Skip to content

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.

Notifications You must be signed in to change notification settings

marleyDip/NextJS-Admin-Dashboard-ShadCN-Tailwind-CSS

Repository files navigation

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


Project Preview

dashboard half down dashboard half up Dashboard dashboard sidebar User Page Payments paymenrs filtter