ShadCN Dashboard + Landing Page Template

Dashboard Preview

šŸŽÆ | šŸ§©

Introducing a sleek, modern, and open-source admin dashboard template built with the latest web technologies, including React + TypeScript + Vite and Next.js + TypeScript. Powered by shadcn/ui v3 and Tailwind CSS v4, this project offers a clean, responsive, and highly customizable UI. Developed and maintained by , this free and open-source template is designed to accelerate your development process. Whether you're building an admin panel, SaaS dashboard, or launching an AI-driven product, this dashboard provides a beautiful, production-ready interface for your application ā€” complete with a seamless dashboard and a fully-featured landing page to help you hit the ground running.

šŸš€ Free & Open Source by - Your gateway to premium UI components and templates.

šŸŒŸ Live Demo

Experience the template in action:

  • - Complete admin dashboard with apps
  • - Beautiful marketing landing page

Note: This template includes both a complete dashboard (with mail, tasks, chat, calendar apps) and a marketing landing page in both Vite and Next.js versions.

āœØ What's Included

šŸŽÆ Two Complete Templates:

  • šŸ–„ļø Admin Dashboard - Modern, feature-rich dashboard with 30+ pages
  • šŸŒ Landing Page - Business-ready landing page template

āš” Dual Framework Support:

  • Vite - Lightning-fast development experience
  • Next.js 15 - Production-ready with App Router

šŸŽØ Live Theme Customization:

  • tweakcn integration - Real-time theme editing
  • Built-in customizer - Preview all possible combinations live
  • Multiple layouts - Sidebar variants & collapsible options

šŸš€ Key Features

šŸ“Š Dashboard Features

  • 2 Dashboard Variants - Overview & Analytics dashboards
  • App Demos - Mail, Tasks, Chat, Calendar, Users applications
  • 30+ Pages - Authentication, Settings, Errors, FAQ, Pricing
  • Data Tables - Advanced tables with sorting, filtering, and pagination
  • Charts & Analytics - Recharts integration with beautiful visualizations

šŸŽØ Design & Theming

  • Live Theme Customizer - Real-time color and layout switching
  • tweakcn Integration - Professional theme management
  • Multiple Layouts - Sidebar variants, collapsible navigation
  • Responsive Design - Mobile-first approach with container queries
  • Dark/Light Mode - Seamless theme switching

āš” Developer Experience

  • Modern Tech Stack - React 19, TypeScript, Tailwind CSS v4
  • Cross-Platform - Works with both Vite and Next.js
  • Type Safety - Full TypeScript support throughout
  • Component Library - Latest shadcn/ui v3 with Radix UI
  • Easy Customization - Well-structured, modular codebase

šŸ—ļø Project Structure

text
šŸ“ shadcn-dashboard/ā”œā”€ā”€ šŸ“ vite-version/              # Vite + React versionā”‚   ā”œā”€ā”€ šŸ“ src/ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ app/               # Demo pages & applicationsā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ dashboard/     # Dashboard variantsā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ dashboard-2/   # Alternative dashboard layoutā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ landing/       # Landing page templateā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ auth/          # Authentication pagesā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ mail/          # Email application demoā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ tasks/         # Task management demoā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ chat/          # Chat application demoā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ calendar/      # Calendar demoā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ settings/      # User settings pagesā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ errors/        # Error pages (404, 500, etc.)ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ users/         # User management pagesā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ faqs/          # FAQ pagesā”‚   ā”‚   ā”‚   ā””ā”€ā”€ šŸ“ pricing/       # Pricing pagesā”‚   ā”‚   ā”œā”€ā”€ šŸ“ components/        # UI componentsā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ ui/            # shadcn/ui v3 componentsā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ layouts/       # Layout componentsā”‚   ā”‚   ā”‚   ā””ā”€ā”€ šŸ“ theme-customizer/ # Live theme editorā”‚   ā”‚   ā”œā”€ā”€ šŸ“ hooks/             # Custom React hooksā”‚   ā”‚   ā”œā”€ā”€ šŸ“ lib/               # Utilities & configurationsā”‚   ā”‚   ā””ā”€ā”€ šŸ“ types/             # TypeScript type definitionsā”‚   ā””ā”€ā”€ šŸ“„ package.json           # Vite dependenciesā”‚ā”œā”€ā”€ šŸ“ nextjs-version/            # Next.js 15 versionā”‚   ā”œā”€ā”€ šŸ“ src/ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ app/               # App Router with route groupsā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ (auth)/        # Authentication route groupā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ login/     # Login pagesā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ signup/    # Registration pagesā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ forgot-password/ # Password recoveryā”‚   ā”‚   ā”‚   ā”‚   ā””ā”€ā”€ šŸ“ errors/    # Error pages (404, 500, etc.)ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ (dashboard)/   # Dashboard route groupā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ dashboard/ # Main dashboardā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ dashboard-2/ # Alternative dashboardā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ mail/      # Email applicationā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ tasks/     # Task managementā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ chat/      # Chat applicationā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ calendar/  # Calendar demoā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ settings/  # User settingsā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ users/     # User managementā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ faqs/      # FAQ pagesā”‚   ā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ pricing/   # Pricing pagesā”‚   ā”‚   ā”‚   ā”‚   ā””ā”€ā”€ šŸ“„ layout.tsx # Dashboard layoutā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“ landing/       # Landing page templateā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“„ layout.tsx     # Root layoutā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“„ loading.tsx    # Global loading componentā”‚   ā”‚   ā”‚   ā”œā”€ā”€ šŸ“„ not-found.tsx  # 404 pageā”‚   ā”‚   ā”‚   ā””ā”€ā”€ šŸ“„ page.tsx       # Homepageā”‚   ā”‚   ā”œā”€ā”€ šŸ“ components/        # Same component structure as Viteā”‚   ā”‚   ā”œā”€ā”€ šŸ“ hooks/             # Custom React hooksā”‚   ā”‚   ā”œā”€ā”€ šŸ“ lib/               # Utilities & configurationsā”‚   ā”‚   ā””ā”€ā”€ šŸ“ types/             # TypeScript type definitionsā”‚   ā””ā”€ā”€ šŸ“„ package.json           # Next.js dependenciesā”‚ā”œā”€ā”€ šŸ“„ README.md                  # This fileā””ā”€ā”€ šŸ“„ LICENSE                    # MIT License

ļæ½ Quick Start

Prerequisites

  • Node.js 18+
  • pnpm (recommended) or npm

1. Clone the Repository

bash
git clone https://github.com/silicondeck/shadcn-dashboard-landing-templatecd shadcn-dashboard

2. Choose Your Framework

šŸ”„ Vite Version (Recommended for Development)

bash
cd vite-versionpnpm installpnpm dev

Access at: http://localhost:5173

āš” Next.js Version (Production-Ready)

bash
cd nextjs-versionpnpm installpnpm dev

Access at: http://localhost:3000

3. Start Building

  • Dashboard: Navigate to or
  • Landing Page: Visit for the business template
  • Theme Customizer: Use the built-in customizer to preview themes live
  • Apps: Explore , , , ,
  • Authentication: Check out , ,
  • Settings: Visit , ,

šŸ› ļø Development Commands

Vite Version

bash
pnpm dev          # Start development serverpnpm build        # Build for productionpnpm preview      # Preview production buildpnpm lint         # Run ESLint

Next.js Version

bash
pnpm dev          # Start development serverpnpm build        # Build for productionpnpm start        # Start production serverpnpm lint         # Run Next.js linter

šŸŽØ Theme Customization

Live Theme Customizer

This template includes a powerful live theme customizer powered by tweakcn:

Customizer Preview
  1. Open the customizer - Click the theme customizer button
  2. Choose colors - Pick from preset themes or create custom palettes
  3. Layout options - Switch between sidebar variants and layouts
  4. Real-time preview - See changes instantly across all components
  5. Export themes - Save your custom themes for production use

Built-in Themes

  • šŸŒŠ Default - Clean blue theme
  • šŸŒ™ Dark - Professional dark theme
  • šŸŒø Rose - Warm pink accents
  • šŸŒæ Green - Fresh green palette
  • šŸŒ… Orange - Vibrant orange theme
  • šŸ”“ Red - Bold red accents
  • šŸ’œ Violet - Modern purple theme

Custom Theme Creation

Adding Custom Themes to the Customizer

To add your own custom themes to the live customizer, create theme objects in your theme configuration:

typescript
// src/config/theme-data.ts (or similar file)export const customTheme = {  name: "Custom Brand",  cssVars: {    light: {      primary: "210 100% 50%",      "primary-foreground": "0 0% 98%",      secondary: "210 100% 95%",      "secondary-foreground": "210 100% 20%",      accent: "210 100% 90%",      "accent-foreground": "210 100% 15%",      // Add more color variables as needed    },    dark: {      primary: "210 100% 60%",      "primary-foreground": "210 100% 15%",      // Dark mode variants    }  }}

Manual CSS Variable Customization

To directly modify theme colors, update your CSS variables in globals.css or index.css:

css
:root {  --primary: oklch(0.5 0.2 240);  --primary-foreground: oklch(0.98 0.02 240);  --secondary: oklch(0.96 0.01 240);  --secondary-foreground: oklch(0.2 0.02 240);  /* Customize other variables */}
.dark {  --primary: oklch(0.7 0.2 240);  --primary-foreground: oklch(0.15 0.02 240);  /* Dark mode variants */}

Removing the Theme Customizer

If you want to remove the theme customizer from your project:

Vite Version:

  1. Remove the theme customizer component: src/components/theme-customizer.tsx
  2. Remove the theme customizer button from your layout
  3. Remove theme-related imports from your main layout file
  4. Delete the src/components/theme-customizer/ folder if it exists

Next.js Version:

  1. Remove the theme customizer component: src/components/theme-customizer.tsx
  2. Remove the theme customizer button from src/app/layout.tsx
  3. Remove theme-related imports from your layout files
  4. Delete the src/components/theme-customizer/ folder if it exists

šŸ“– Learn More: For comprehensive theming documentation, visit the which covers CSS variables, color formats, and advanced customization techniques.

šŸ“¦ Tech Stack

Core Framework

  • React 19 - Latest React with concurrent features
  • TypeScript - Full type safety
  • Vite - Ultra-fast development
  • Next.js 15 - Production-ready with App Router

UI & Styling

  • shadcn/ui v3 - Latest component library
  • Radix UI - Accessible primitives
  • Tailwind CSS v4 - Utility-first styling
  • tweakcn - Advanced theme management
  • Lucide React - Beautiful icons

State & Data

  • Zustand - Lightweight state management
  • React Hook Form - Forms with validation
  • Zod - Schema validation
  • TanStack Table - Advanced data tables

Development

  • ESLint - Code linting
  • Prettier - Code formatting
  • TypeScript - Static type checking

šŸ“‹ What's Included

šŸ–„ļø Dashboard Pages

  • Dashboard - Overview with analytics cards and charts
  • Dashboard v2 - Alternative dashboard with different metrics

šŸ“± Application Demos

Apps Preview
  • šŸ“§ Mail - Complete email interface (Inbox, Read, Compose)
  • āœ… Tasks - Task management with drag & drop
  • šŸ’¬ Chat - Real-time chat interface
  • šŸ“… Calendar - Event scheduling and management
  • šŸ‘„ Users - User management and profiles with advanced tables

šŸ” Authentication

  • Login - 3 login page variants with different layouts
  • Sign Up - 3 registration page variants with different designs
  • Forgot Password - 3 password recovery page variants

āš™ļø Settings & Profile

  • User Settings - Manage your personal information and preferences
  • Account Settings - Profile management
  • Plans & Billing - Subscription and payment pages
  • Appearance - Theme and display preferences
  • Notifications - Notification preferences
  • Connections - Social media integrations

āŒ Error Pages

  • 404 - Page not found
  • 401 - Unauthorized access
  • 403 - Forbidden
  • 500 - Internal server error
  • Under Maintenance - Maintenance mode page

šŸŒ Landing Page Template

  • Hero Section - Compelling headlines and CTAs
  • About Section - Company/product introduction with interactive elements
  • Features Section - Product/service highlights with icons
  • Stats Section - Key metrics and achievements display
  • Logo Carousel - Partner/client logos showcase
  • Team Section - Team member profiles and information
  • Testimonials Section - Customer reviews and social proof
  • Blog Section - Latest blog posts and articles
  • Pricing Section - Pricing tables and plans
  • FAQ Section - Frequently asked questions with expandable answers
  • Contact Section - Contact forms and information
  • CTA Section - Call-to-action components
  • Navigation & Footer - Complete navigation and footer components
  • Theme Customizer - Live theme switching for landing page

šŸ“„ Additional Pages

  • FAQ - Frequently asked questions
  • Pricing - Detailed pricing pages

šŸŒŸ Why Choose This Template?

šŸ†“ Completely Free & Open Source

  • MIT Licensed - Use for personal and commercial projects
  • No restrictions - Modify, distribute, and sell
  • Community driven - Contributions welcome

šŸ¢ Business Ready

  • Production code - Clean, maintainable, and scalable
  • Professional design - Modern UI that looks great
  • Complete templates - Dashboard + Landing page included

šŸŽØ Advanced Theming

  • Live customization - See changes in real-time
  • tweakcn integration - Professional theme management
  • Multiple layouts - Sidebar variants and options

āš” Developer Friendly

  • Modern stack - Latest React, TypeScript, Tailwind CSS
  • Great DX - Fast development with Vite
  • Type safe - Full TypeScript coverage
  • Well documented - Clear code and comments

šŸš€ Take It Further with ShadcnStore

This free template is just the beginning! ShadcnStore offers a complete ecosystem of free & premium UI components, dashboards and templates to accelerate your development:

šŸŽ Available Now

  • - 150+ production-ready UI blocks
    • Application Blocks - Advanced dashboard components
    • Marketing Blocks - Landing page sections
    • E-commerce Blocks - Online store components
    • Free Blocks - No-cost starter components

šŸ”œ Coming Soon

  • Premium Templates - Complete application templates
  • Landing Page Collection - Business-ready landing pages
  • Premium Dashboards - Advanced dashboard solutions

šŸ’” Perfect For

  • SaaS Applications - Complete dashboard solutions
  • Marketing Sites - Beautiful landing pages
  • E-commerce - Online store interfaces
  • Internal Tools - Admin panels and dashboards

šŸŽÆ - Premium blocks, dashboards and templates for modern web applications.

šŸ¤ Contributing

We welcome contributions! Here's how you can help:

Ways to Contribute

  • šŸ› Report bugs - Found an issue? Let us know!
  • šŸ’” Suggest features - Have ideas for improvements?
  • šŸ”§ Submit PRs - Fix bugs or add new features
  • šŸ“– Improve docs - Help make documentation better
  • ā­ Star the repo - Show your support!

Getting Started

  1. Fork the repository
  2. Create a feature branch: git checkout -b my-feature
  3. Make your changes and test thoroughly
  4. Commit: git commit -m "Add new feature"
  5. Push: git push origin my-feature
  6. Open a Pull Request

Code Style

  • Use TypeScript for all new code
  • Follow ESLint and Prettier configurations
  • Add type definitions for props and data
  • Write clear commit messages
  • Test your changes in both Vite and Next.js versions

šŸ“„ License

This project is licensed under the MIT License - see the LICENSE [blocked] file for details.

You are free to:

  • āœ… Use commercially
  • āœ… Modify and distribute
  • āœ… Include in private projects
  • āœ… Sell products built with this template

Attribution to is appreciated but not required.

šŸ™ Credits & Acknowledgments

This template is built on the shoulders of amazing open-source projects:

  • - Beautiful and accessible components
  • - Low-level accessible primitives
  • - Utility-first CSS framework
  • - Beautiful & consistent icons
  • - Advanced theme customization
  • - Composable charting library
  • - Powerful data tables

šŸ“ž Support & Community

Get Help

  • šŸ“– Documentation - This README covers everything
  • šŸ› Issues -
  • šŸ’¬ Discussions -

Stay Connected

  • šŸŒ Website -
  • šŸ¦ Twitter -
  • šŸ’¬ Discord -
  • šŸ“§ Email -

ā­ Star this repo if it helped you!

A free & open-source template by - Premium UI components, dashboards and templates for modern web development.