A modern, customizable dashboard application built with Next.js, featuring multiple beautiful themes, interactive charts, and a comprehensive UI system.
Check out the live demo: https://dashboard.nexui.xyz/
- Multiple Custom Themes - T3 chat, Amber, Lilac, Candy, Sky, and Default theme
- Interactive Data Visualizations - Bar charts, line charts, radar charts, and sales graphs
- Kanban Board - Drag-and-drop task management with smooth animations
- Product Management - Server-side table with filtering, sorting, and pagination
- Theme Selector - Dynamic theme switching with persistence
- Responsive Design - Mobile-first approach with Tailwind CSS
- Smooth Animations - Powered by Motion (Motion react)
- TypeScript First - Full type safety throughout
- Modern UI Components - Built with shadcn/ui
- Authentication Ready - NextAuth.js integration
- Database Integration - Prisma ORM with PostgreSQL support
The fastest way to get started is using our CLI tool:
npx nexui-dashboard my-dashboardThis will scaffold a complete dashboard with all themes and features in seconds!
- Node.js 18+
- npm, yarn, pnpm, or bun
- PostgreSQL (optional, for full features)
git clone <repository-url>
cd dashboard
npm installCreate a .env.local file in the root directory:
# NextAuth (optional)
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"
# Database (optional)
DATABASE_URL="postgresql://user:password@localhost:5432/dashboard"# Generate Prisma Client
npx prisma generate
# Run migrations
npx prisma migrate dev
# Seed database
npx prisma db seednpm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 in your browser.
| Technology | Purpose |
|---|---|
| Next.js 14+ | React framework with App Router |
| TypeScript | Type-safe development |
| Tailwind CSS | Utility-first styling |
| shadcn/ui | Beautiful UI components |
| Recharts | Data visualization library |
| Motion | Animation library |
| NextAuth.js | Authentication solution |
| Prisma | Next-generation ORM |
| PostgreSQL | Relational database |
| Lucide React | Icon library |
| Tabler Icons | Additional icons |
dashboard/
├── app/
│ ├── api/
│ │ └── auth/ # NextAuth API routes
│ │ └── verify-captcha/
│ ├── dashboard/ # Dashboard pages
│ │ ├── (account)/ # Account settings
│ │ ├── (general)/ # General pages
│ │ ├── calendar/ # Calendar page
│ │ ├── kanban/ # Kanban board
│ │ ├── overview/ # Main dashboard
│ │ ├── product/ # Product management
│ │ ├── reports/ # Reports page
│ │ └── transactions/ # Transactions page
│ ├── layout.tsx # Root layout
│ └── page.tsx # Home page
├── components/
│ ├── graphs/ # Chart components
│ │ ├── BarChart.tsx
│ │ ├── LineChart.tsx
│ │ ├── RadarChart.tsx
│ │ ├── Sales.tsx
│ │ └── TopCard.tsx
│ ├── kanban/ # Kanban components
│ ├── products/ # Product table components
│ ├── ui/ # shadcn/ui components
│ ├── active-theme.tsx # Theme provider
│ ├── ThemeSelector.tsx # Theme selector
│ ├── UpdateSoon.tsx # Coming soon component
│ └── ... # Other components
├── constants/
│ └── mock-api.ts # Mock data and API
├── hooks/ # Custom hooks
├── lib/ # Utility libraries
├── prisma/ # Database schema and migrations
├── public/
│ ├── theme.json # Theme configurations
│ └── ... # Static assets
├── types/ # TypeScript types
└── ...
The dashboard features a comprehensive theme system with 6 built-in themes:
- Default: Clean, neutral theme
- T3 chat: Warm purple tones
- Amber: Golden yellow theme
- Lilac: Soft purple and pink
- Candy: Bright, playful colors
- Sky: Twitter-inspired blue theme
- Add your theme configuration to
public/theme.json - Include
lightanddarkvariants - The theme selector will automatically pick up new themes
Example theme structure:
{
"your-theme": {
"displayName": "Your Theme",
"light": {
"background": "#ffffff",
"foreground": "#000000",
// ... more color variables
},
"dark": {
// ... dark mode colors
}
}
}Pre-built chart components:
- BarChart: Animated bar chart with hover effects
- LineChart: Partial line chart with dash patterns
- RadarChart: Radar chart for multi-dimensional data
- Sales: Recent sales component with avatars
- TopCard: Animated KPI cards with trend indicators
Use shadcn/ui CLI:
npx shadcn-ui@latest add [component-name]Edit theme variables in public/theme.json or add new themes.
Update prisma/schema.prisma and run:
npx prisma migrate dev --name your-migrationnpm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint
npm run type-check # TypeScript type checkingnpm run build
vercel --prodEnsure environment variables are set for your deployment platform.
- Star the repository
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
If you make changes to the main dashboard files (outside the cli/ directory), you need to sync these changes to the CLI template so they're included when users scaffold new projects.
Run this command after making changes:
cd cli
npm run syncThis will sync your latest changes to the template that gets distributed via npm.
Note: The template includes all dashboard features with authentication. Users can run
npx nexui-dashboard [project-name]to instantly scaffold a new project.
MIT License - see LICENSE file for details.
- shadcn/ui for beautiful components
- Evil charts for charting library
- Motion for animations
- Next.js team
- All open-source contributors
Built by ❤️ Piyush