A modern, responsive dashboard application built with Next.js 15, React 19, and shadcn/ui components. This project demonstrates a complete admin dashboard with user management, payment tracking, data visualization, and a beautiful dark/light theme support.
- Live Demo: [Coming Soon]
- Repository: https://github.com/dev0jha/DashBoard-Project
- 🎨 Modern UI Components: Built with shadcn/ui and Radix UI primitives
- 📊 Data Visualization: Interactive charts using Recharts (Area, Bar, Line, Pie charts)
- 📋 Data Tables: Advanced table with sorting, filtering, and pagination using TanStack Table
- 👥 User Management: User listing and detailed user profiles with edit capabilities
- 💳 Payment Tracking: Payment data table with column management
- 🌓 Theme Support: Dark/Light mode toggle with next-themes
- 📱 Responsive Design: Mobile-friendly sidebar and layouts
- 🎯 Form Handling: React Hook Form with Zod validation
- 🚀 Performance: Built on Next.js 15 with Turbopack
- Framework: Next.js 15.3.0
- React: 19.0.0
- UI Components: shadcn/ui
- Styling: Tailwind CSS 4
- Component Library: Radix UI
- Charts: Recharts
- Table: TanStack Table
- Form Management: React Hook Form
- Validation: Zod
- Icons: Lucide React
- TypeScript: Type-safe development
shadcn/
├── public/ # Static assets
│ ├── logo.svg
│ └── SS.png
├── src/
│ ├── app/ # Next.js App Router pages
│ │ ├── layout.tsx # Root layout
│ │ ├── page.tsx # Home page
│ │ ├── payments/ # Payment management pages
│ │ └── users/ # User management pages
│ ├── components/ # React components
│ │ ├── ui/ # shadcn/ui components
│ │ ├── providers/ # Context providers
│ │ ├── AppSidebar.tsx
│ │ ├── Navbar.tsx
│ │ ├── CardList.tsx
│ │ ├── TodoList.tsx
│ │ ├── EditUser.tsx
│ │ └── Chart components (Bar, Line, Area, Pie)
│ ├── hooks/ # Custom React hooks
│ └── lib/ # Utility functions
└── components.json # shadcn/ui configuration
- Node.js 20.x or higher
- npm, yarn, or pnpm
- Clone the repository:
git clone https://github.com/dev0jha/DashBoard-Project.git
cd DashBoard-Project- Install dependencies:
npm install --legacy-peer-deps
# or
pnpm install
# or
yarn install- Run the development server:
npm run dev
# or
pnpm dev
# or
yarn dev- Open http://localhost:3000 in your browser to see the application.
npm run dev- Start development server with Turbopacknpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
This project includes the following shadcn/ui components:
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Chart
- Checkbox
- Collapsible
- Dropdown Menu
- Form
- Hover Card
- Input
- Label
- Popover
- Progress
- Scroll Area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Table
- Tooltip
- Overview cards with key metrics
- Multiple chart visualizations
- Todo list component
- Responsive sidebar navigation
- User listing and management
- Individual user profiles (
/users/[username]) - Edit user functionality
- Payment data table
- Advanced filtering and sorting
- Pagination support
The application supports both light and dark modes. The theme can be toggled using the theme switcher in the navbar. Theme preferences are persisted across sessions.
Configuration is in postcss.config.mjs and uses Tailwind CSS 4 with @tailwindcss/postcss.
Component configuration is in components.json. You can add more components using:
npx shadcn@latest add [component-name]TypeScript configuration is in tsconfig.json with strict mode enabled.
This project is private and not licensed for public use.
This is a private project. If you have access and want to contribute:
- Create a feature branch
- Make your changes
- Submit a pull request
For questions or support, please contact the project maintainer.
Built with ❤️ using Next.js and shadcn/ui