Shadcn Dashboard - Free Shadcn Admin Dashboard Template (React + Vite)

Shadcn Dashboard is a modern, responsive admin dashboard template built with React (Vite). Built with Shadcn UI, Base UI and Tailwind CSS v4, it ships with a modern dashboard, Blog, Notes & Tickets apps, authentication pages, form layouts, data tables, user profile, and rich UI components - giving you everything you need to build your next admin panel faster.

Shadcn Dashboard is a production-ready admin dashboard starter to kickstart your next project. It features a modern dashboard, Blog, Notes & Tickets apps, authentication flows, form layouts with validation, data tables, user profile pages, and a comprehensive library of Shadcn UI components.

Available in both React (Vite) and Next.js versions!

• View Demo (React)
• Next.js Free Version Repository
• View Documentation

Crafted with ❤️ by shadcndashboard.dev , committed to empowering the open-source community.

• Modern Dashboard - Ready-to-use dashboard layout with statistics, charts, and widgets
• Apps - Blog, Notes, and Tickets apps out of the box
• Authentication Pages - Login, Register, Forgot Password, OTP Verification, Reset Password, Two-Factor Auth
• Forms & Tables - Vertical & Horizontal form layouts and a data table
• User Profile - Rich profile page with connections and activity views
• Built with React 19 + Vite - Modern, fast, and SEO-friendly
• Tailwind CSS v4 - Easy theming and utility-based styling
• Responsive & Mobile-First - Designed to look great on all devices
• Dark Mode Support - Full light/dark theme toggle via a custom ThemeProvider/useTheme context
• Rich Charting - Recharts integration for beautiful visualizations
• Rich Text Editor - TipTap-powered editor for the Blog app

|-- public/                                    # Static assets served from the site root
|-- src/                                       # Application source code
|   |-- App.tsx                                # Root application component
|   |-- main.tsx                               # Application entry point
|   |-- api/                                   # API service layer and handlers
|   |-- assets/                                # Local SVGs, images, and static helpers
|   |-- components/                            # Shared React components
|   |-- context/                               # React context providers
|   |-- css/                                   # Global and component-level CSS
|   |-- hooks/                                 # Reusable client hooks
|   |-- layouts/                               # Dashboard shell layouts (Sidebar + Header)
|   |-- lib/                                   # General utilities and helpers
|   |-- routes/                                # React Router route definitions
|   |   |-- Router.tsx                         # Central route configuration
|   |-- types/                                 # Shared TypeScript interfaces and types
|   |-- utils/                                 # Feature-specific helper functions
|   |-- views/                                 # Page-level UI composed by route files
|   |   |-- apps/                              # App view modules
|   |   |   |-- blog/                          # Blog app views
|   |   |   |-- notes/                         # Notes app views
|   |   |   |-- tickets/                       # Tickets app views
|   |   |-- auth/                              # Auth page views
|   |   |   |-- auth2/                         # Two-factor auth views
|   |   |   |-- authforms/                     # Login, Register, etc. views
|   |   |   |-- error/                         # Error page views
|   |   |   |-- maintenance/                   # Maintenance page views
|   |   |-- dashboards/                        # Dashboard charts, statistics, and widgets
|   |   |   |-- modern/                        # Modern dashboard view
|   |   |-- icons/                             # Icon showcase views
|   |   |-- pages/                             # Inner page views
|   |   |   |-- form/                          # Form layout and validation views
|   |   |   |-- tables/                        # Data table views
|   |   |   |-- user-profile/                  # User profile views
|   |   |-- spinner/                           # Loading spinner views
|-- components.json                            # shadcn/ui aliases and registry config
|-- index.html                                 # HTML entry point
|-- vite.config.ts                             # Vite configuration
|-- package.json                               # Scripts and dependencies
|-- postcss.config.js                          # Tailwind CSS v4 PostCSS setup
|-- tsconfig.json                              # TypeScript compiler and path aliases

Key UI Sections

• Dashboard - Modern overview with statistics, charts, and widgets
• Apps - Blog, Notes, and Tickets management
• Authentication - Login, Register, and account recovery flows
• Forms & Tables - Layouts, validation, and data table views
• User Pages - Profile page with connections and activity

• Dashboard
  • Modern Dashboard
• Apps
  • Blog
  • Notes
  • Tickets
• Pages
  • User Profile
  • Form Layouts
  • Data Table
• Authentication
  • Login Page
  • Register Page
  • Forgot Password Page
  • OTP Verification Page
  • Reset Password Page
  • Two Steps Verification Page
  • Error Page
  • Maintenance Page
• Components
  • Shadcn UI Primitives
  • Recharts
  • TipTap Rich Text Editor
  • Data Tables
  • Date Pickers & Calendar
  • File Dropzone
  • OTP Input
• Miscellaneous
  • Icons Showcase
  • Dark / Light Mode

• Node.js 18, 20, or 22+
• npm

1. Install dependencies:

   npm install

2. Start the development server:

   npm run dev

   The site will be available at http://localhost:5173

3. Build for production:

   npm run build

4. Preview the production build:

   npm run preview

All scripts can be run using npm.

For comprehensive documentation, please visit shadcndashboard.dev/docs.

Please refer to the CHANGELOG file. We add detailed release notes to each new release.

• Copyright © shadcndashboard.dev
• Licensed under MIT
• All our free items are Open Source and licensed under MIT. You can use our free items for personal as well as commercial purposes. We just need attribution from your end. Copy the link below and paste it in the footer of your web application or project.

  <a href="https://shadcndashboard.dev/">Shadcn Dashboard</a>

shadcndashboard.dev is a free and open-source admin dashboard template built with Shadcn UI, Base UI, Tailwind CSS v4, and React - designed to help developers ship beautiful admin panels faster. 🚀

Shadcn Dashboard is a production-ready admin dashboard kit built with React, Vite, TypeScript, Tailwind CSS v4, Shadcn UI, and Base UI. It ships with reusable UI blocks, a full component library, pre-built app pages, and authentication flows - so you can go from zero to a fully functional admin panel in minutes.

• Production-ready blocks: dashboards, charts, tables, forms, and full apps
• Built on Base UI primitives for full design control

Shadcn Dashboard is proudly backed by WrapPixel - a trusted name in the admin dashboard space with over 15+ years of experience building production-grade UI templates and component systems. WrapPixel's products are used by 600k+ developers and agencies worldwide, consistently rated 4.9/5 for quality, consistency, and developer experience.

Join the Shadcn Dashboard community to ask questions, share ideas, and get help:

• 🐦 Follow us on Twitter
• 🎮 Join us on Discord

We are grateful for the contributions of the open-source community, particularly:

• shadcn/ui
• Tailwind CSS
• Vite
• Base UI
• TanStack Table
• Recharts
• TipTap

These projects form the backbone of Shadcn Dashboard.

• Shadcn Dashboard Website
• Documentation
• React Demo
• Next.js Free Version (GitHub Repository)
• Changelog
• License

• Twitter / X
• Discord
• GitHub