A modern, production-ready Next.js starter template featuring Tailwind CSS for styling and shadcn/ui for beautiful, accessible components. This project showcases a clean tech stack presentation with dark mode support and smooth animations, powered by the latest Next.js 15 with Turbopack.
- Next.js 15.0.3 - The React Framework for Production with Turbopack
- Tailwind CSS 3.4.15 - Utility-First CSS Framework
- shadcn/ui 0.9.0 - Beautifully designed components built on Radix UI
- Turbopack - Lightning-fast development server with up to 53% faster builds
- Dark Mode Support - Seamless theme switching with smooth transitions
- Responsive Design - Mobile-first approach with responsive layouts
- TypeScript - Type-safe development experience
- Component Library - 30+ pre-built UI components
- React Hook Form - Performant forms with easy validation
- Charts & Data Visualization - Recharts integration
- Theme System - CSS variables for consistent theming
- Optimized Build - Production-ready with best practices
- Next.js 15.0.3 - React framework with App Router and Turbopack
- React 18.3.1 - UI library
- TypeScript 5.6.3 - Type safety
- Tailwind CSS 3.4.15 - Utility-first CSS framework
- shadcn/ui 0.9.0 - Component library built on Radix UI
- Lucide React 0.460.0 - Beautiful & consistent icons
- Tailwind CSS Animate - Animation utilities
- React Hook Form 7.53.2 - Performant forms
- Zod 3.23.8 - Schema validation
- @hookform/resolvers 3.9.1 - Form validation integration
- next-themes 0.4.3 - Dark mode support
- Recharts 2.13.3 - Chart library
- date-fns 4.1.0 - Date utilities
- clsx 2.1.1 & tailwind-merge 2.5.4 - Utility functions
- Sonner 1.7.0 - Toast notifications
- Node.js 18+
- npm, yarn, pnpm, or bun
-
Clone the repository
git clone https://github.com/dlzvy/nexttailwindshadcnui.git cd nexttailwindshadcnui -
Install dependencies
npm install # or yarn install # or pnpm install
-
Run the development server
npm run dev # or yarn dev # or pnpm dev
-
Open your browser Navigate to http://localhost:3000
├── app/ # Next.js App Router
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page with tech stack showcase
├── components/ # React components
│ └── ui/ # shadcn/ui components
├── hooks/ # Custom React hooks
├── lib/ # Utility functions
├── public/ # Static assets
├── .eslintrc.json # ESLint configuration
├── components.json # shadcn/ui configuration
├── tailwind.config.ts # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── package.json # Dependencies and scripts
This starter kit includes 30+ pre-built shadcn/ui components:
- Form Components: Input, Button, Select, Checkbox, Radio Group, Switch
- Navigation: Menu, Dropdown Menu, Navigation Menu, Breadcrumb
- Feedback: Alert, Dialog, Toast, Tooltip, Popover
- Data Display: Card, Table, Badge, Avatar, Skeleton
- Layout: Accordion, Tabs, Separator, Scroll Area
- Charts: Various chart components with Recharts
- And many more...
The project includes built-in dark mode support with:
- Automatic system preference detection
- Manual theme toggle with smooth animations
- Persistent theme selection
- Component-level theme awareness
- Beautiful gradient backgrounds
This project leverages Next.js 15 with Turbopack for:
- 53% faster local development startup
- 94% faster code updates with Fast Refresh
- Optimized bundling for production builds
- Improved caching for better performance
# Development
npm run dev # Start development server with Turbopack
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run typecheck # Run TypeScript type checkingAdd new shadcn/ui components using the CLI:
npx shadcn-ui@latest add [component-name]Modify the theme in tailwind.config.ts and app/globals.css:
// tailwind.config.ts
theme: {
extend: {
colors: {
border: "hsl(var(--border))",
background: "hsl(var(--background))",
// ... more colors
}
}
}All components are fully customizable. Simply copy a component from components/ui and modify it to fit your needs.
This project includes full Docker support with multi-stage builds for optimal performance.
-
Development Mode:
docker-compose up app-dev
Access your app at http://localhost:3000
-
Development with Turbopack:
docker-compose --profile turbo up app-turbo
Access your app at http://localhost:3002
-
Production Mode:
docker-compose --profile production up app-prod
Access your app at http://localhost:3001
# Build and run development container
docker-compose up app-dev --build
# Run in background
docker-compose up app-dev -d
# View logs
docker-compose logs app-dev
# Stop containers
docker-compose down
# Stop and remove volumes
docker-compose down -v- Multi-stage build for optimized image size
- Node.js 18 Alpine for minimal footprint
- Non-root user for security
- Health checks and proper signal handling
- Volume mounting for development
- Environment variables for configuration
- Push your code to GitHub
- Connect your repository to Vercel
- Deploy automatically with Turbopack optimization
# Build for production
npm run build
# Start production server
npm run start- Upgraded to Next.js 15.0.3 with Turbopack support
- Updated Tailwind CSS to 3.4.15 with latest utilities
- Enhanced shadcn/ui to 0.9.0 with improved components
- Added TypeScript 5.6.3 for better type safety
- Improved performance with optimized dependencies
- Enhanced dark mode with smooth transitions
- Modern tech stack showcase page
- Full Docker support with multi-stage builds and development profiles
- Container-ready deployment with optimized Docker configuration
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Next.js - The React Framework
- Tailwind CSS - Utility-First CSS Framework
- shadcn/ui - Beautifully designed components
- Radix UI - Low-level UI primitives
- Lucide - Beautiful & consistent icons
If you have any questions or need help, feel free to:
- Open an issue
- Start a discussion
- Reach out on Twitter
If you find this project helpful, please consider giving it a ⭐ star!