ShadCN Dashboard + Landing Page Template

January 2, 2026 · View on GitHub

Dashboard Preview

🎯 View Live Demo | 🧩 Explore Premium Blocks

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 ShadcnStore, 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 ShadcnStore - Your gateway to premium UI components and templates.

🌟 Live Demo

Experience the template in action:

🖥️ Dashboard Demo - Complete admin dashboard with apps
🌐 Landing Page Demo - 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

📁 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

git clone https://github.com/silicondeck/shadcn-dashboard-landing-template
cd shadcn-dashboard

2. Choose Your Framework

🔥 Vite Version (Recommended for Development)

cd vite-version
pnpm install
pnpm dev

Access at: http://localhost:5173

⚡ Next.js Version (Production-Ready)

cd nextjs-version
pnpm install
pnpm dev

Access at: http://localhost:3000

3. Start Building

Dashboard: Navigate to /dashboard or /dashboard-2
Landing Page: Visit /landing for the business template
Theme Customizer: Use the built-in customizer to preview themes live
Apps: Explore Mail, Tasks, Chat, Calendar, Users
Authentication: Check out Signin, Signup, Forgot Password
Settings: Visit Account, Appearance, Billing

🛠️ Development Commands

Vite Version

pnpm dev          # Start development server
pnpm build        # Build for production
pnpm preview      # Preview production build
pnpm lint         # Run ESLint

Next.js Version

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

🎨 Theme Customization

Live Theme Customizer

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

Customizer Preview

Open the customizer - Click the theme customizer button
Choose colors - Pick from preset themes or create custom palettes
Layout options - Switch between sidebar variants and layouts
Real-time preview - See changes instantly across all components
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:

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

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

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

Next.js Version:

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

📖 Learn More: For comprehensive theming documentation, visit the official shadcn/ui theming guide 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

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