https://github.com/khaledsaeed18/nextjs-shadcn-dashboard
📊 A modern, responsive dashboard template built with Next.js, shadcn/ui.
https://github.com/khaledsaeed18/nextjs-shadcn-dashboard
frontend nextjs shadcn-ui tailwindcss tanstack-table turbopack webdevelopment
Last synced: 6 months ago
JSON representation
📊 A modern, responsive dashboard template built with Next.js, shadcn/ui.
- Host: GitHub
- URL: https://github.com/khaledsaeed18/nextjs-shadcn-dashboard
- Owner: KhaledSaeed18
- Created: 2025-02-25T17:17:09.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2025-03-21T15:19:39.000Z (7 months ago)
- Last Synced: 2025-03-21T16:28:24.035Z (7 months ago)
- Topics: frontend, nextjs, shadcn-ui, tailwindcss, tanstack-table, turbopack, webdevelopment
- Language: TypeScript
- Homepage:
- Size: 178 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 📊 Next.js Dashboard Template
A modern, responsive dashboard template built with Next.js, shadcn/ui, and Tailwind CSS. This template provides a solid foundation for building administrative interfaces, data visualization applications, and control panels.
## Features
- 🚀 Built with Next.js 15 and React 19
- 🎨 Styled with Tailwind CSS
- 🌓 Light/Dark mode with next-themes
- 📊 Data visualization with Recharts
- 📋 Data tables with TanStack Table
- 🧩 UI components from shadcn/ui
- 🔍 Fully responsive design
- ⚡ Fast performance with Turbopack
## Tech Stack
### Core
- [Next.js](https://nextjs.org/) - React framework
- [React](https://react.dev/) - UI library
- [TypeScript](https://www.typescriptlang.org/) - Type safety
### UI & Styling
- [Tailwind CSS](https://tailwindcss.com/) - Utility-first CSS
- [shadcn/ui](https://ui.shadcn.com/) - UI components
- [Radix UI](https://www.radix-ui.com/) - Headless UI primitives
- [Lucide React](https://lucide.dev/) - Icon library
- [class-variance-authority](https://cva.style/docs) - Component variant management
- [tailwind-merge](https://github.com/dcastil/tailwind-merge) - Merge Tailwind classes
### Data & Visualization
- [TanStack Table](https://tanstack.com/table) - Headless table management
- [Recharts](https://recharts.org/) - Chart library
## Getting Started
### Prerequisites
- Node.js 18.0 or later
- npm or yarn or pnpm
### Installation
1. Clone the repository
```bash
git clone https://github.com/KhaledSaeed18/nextjs-shadcn-dashboard.git
cd nextjs-dashboard-template
```
2. Install dependencies
```bash
npm install
# or
yarn install
# or
pnpm install
```
3. Run the development server
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
```
4. Open [http://localhost:3000](http://localhost:3000) in your browser
## Customization
### Theming
This template uses next-themes for theme management. You can customize the themes in the `tailwind.config.js` file.
### Components
The UI components are built with shadcn/ui, which provides a collection of accessible and customizable components. You can modify them to fit your needs or add new components.
### Adding Pages
Create new pages by adding files to the `app` directory. Next.js 15 uses the App Router for routing.