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.

Introduction 📊

Shadcn Dashboard is built with React (Vite), 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.

View Demo (React)

View Documentation

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

Key Features ✨

• 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

Folder Structure

|-- 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

What's Included 📦

• 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

🚀 Quick Start

Prerequisites

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

1. Install dependencies:

   bash

   npm install

2. Start the development server:

   bash

   npm run dev

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

3. Build for production:

   bash

   npm run build

4. Preview the production build:

   bash

   npm run preview

🧞 Available Commands

All scripts can be run using npm.

Documentation 📚

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

Changelog 📆

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

License ©

• Copyright © shadcndashboard.dev
• Licensed under MIT [blocked]
• 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.
  html

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