ShadCN Dashboard

A modern, scalable, and fully responsive dashboard built using ShadCN UI, Radix UI, and Tailwind CSS.
This project demonstrates real-world dashboard patterns including navigation, charts, tables, forms, dark mode, and advanced component composition.

Features

Layout & Navigation

• Responsive Navbar
• Dropdown Menus using Radix UI
• Accessible sr-only utilities
• asChild pattern for component composition
• Dark Mode support
• Fully featured Sidebar
  • Collapsible sidebar
  • Custom collapse button
  • Sidebar actions
  • Collapsible groups
  • Badges
  • Nested menu items (sub-menus)

UI Components

• Cards
• Scroll Area
• Checkbox
• Calendar & Popover
• Breadcrumb
• Hover Card
• Progress Bar
• Sheet (Drawer)
• Form & Input components
• User Profile page
• User Card component

Data Visualization

• Charts powered by Recharts
  • Area Chart
  • Line Chart
  • Pie Chart

Data Tables

• Table & Data Table components
• TanStack React Table
  • Custom headers and cells
  • Action buttons
  • Pagination
  • Column sorting
  • Row selection

Forms & Validation

• Form handling with react-hook-form
• Schema validation using Zod

Tech Stack

• React
• ShadCN UI
• Radix UI
• Tailwind CSS
• Recharts
• TanStack React Table
• react-hook-form
• Zod
• TypeScript

Accessibility

• Built on top of Radix UI
• Keyboard navigation support
• Screen-reader friendly (sr-only)
• Accessible color contrast and focus states

Screenshots

.png)

Installation

npm install
npm run dev