https://github.com/marleydip/nextjs-admin-dashboard-shadcn-tailwind-css

This project demonstrates how to design a scalable, modern dashboard with reusable UI components. It showcases responsive layouts, theming, dark mode, charts, forms, and interactive elements.
https://github.com/marleydip/nextjs-admin-dashboard-shadcn-tailwind-css

action-button area-chart bar-chart breadcrumbs calendar-component checkbox-component data-table-component hover-card line-chart navbar-menu pagina pie-chart popover-component progress-bar react-hook-form-zod row-selection scroll-area sidebar-menu tanstack-react-table theme-toggle

Last synced: 2 days ago
JSON representation

This project demonstrates how to design a scalable, modern dashboard with reusable UI components. It showcases responsive layouts, theming, dark mode, charts, forms, and interactive elements.

• Host: GitHub
• URL: https://github.com/marleydip/nextjs-admin-dashboard-shadcn-tailwind-css
• Owner: marleyDip
• Created: 2025-09-20T18:58:14.000Z (10 months ago)
• Default Branch: master
• Last Pushed: 2025-10-09T12:57:33.000Z (10 months ago)
• Last Synced: 2025-10-14T15:35:39.170Z (9 months ago)
• Topics: action-button, area-chart, bar-chart, breadcrumbs, calendar-component, checkbox-component, data-table-component, hover-card, line-chart, navbar-menu, pagina, pie-chart, popover-component, progress-bar, react-hook-form-zod, row-selection, scroll-area, sidebar-menu, tanstack-react-table, theme-toggle
• Language: TypeScript
• Homepage: https://sofian-dashboard-nextjs-shadcn.vercel.app/
• Size: 11.7 MB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# ShadCN Dashboard UI

A modern **admin dashboard** built with **Next.js, React, Tailwind CSS, Radix UI, and ShadCN UI**.  

This project demonstrates how to design a scalable dashboard with reusable UI components.

---

## ✨ Features

- 📊 **Dashboard Layout** – Responsive grid-based layout.  

- 🧭 **Navbar & Sidebar** – Collapsible sidebar with nested menus.  

- 🌙 **Dark Mode Support** – Custom theming with Tailwind + ShadCN.  

- 🎨 **UI Components** – Dropdowns, Sidebar, Charts, Avatar, Modals (sheets), Collapsible, Button, Tooltips, Skeleton, Card, Breadcrumbs, Scroll Areas, Checkboxes, Calendar, Popover,  Sheet Component, progress bars, forms, and more.  

- ✅ **Form Handling** – Validation with `react-hook-form` and `zod`.  

- 📈 **Charts & Data Visualization** – Area, Pie, Line, and Bar Charts using Recharts.  

- 📑 **Data Tables** – Built with Tanstack React Table (Sorting, Pagination, Row Actions, Row Selection, Filtering, Visibility, Reusable Components).  

- 👤 **Profile & User Pages** – Example pages with reusable ShadCN components.  

---

## 🛠️ Built With

- **[Next.js](https://nextjs.org/)** – React framework for production apps. 

- **[React](https://react.dev/)** – UI library.

- **[Tailwind CSS](https://tailwindcss.com/)** – Utility-first CSS framework.

- **[ShadCN UI](https://ui.shadcn.com/)** – Radix UI + Tailwind component library.

- **[Recharts](https://recharts.org/)** – Data visualization library.

- **[TanStack Table](https://tanstack.com/table)** – Advanced data tables.

- **[react-hook-form](https://react-hook-form.com/)** – Form handling.

- **[Zod](https://zod.dev/)** – Schema validation.

---

## Project Preview