DOCSEARCHbyAlgolia
Submit Docs

Shadcn Dashboard + Landing Page Template

repository·main·Indexed 19 days ago

https://github.com/shadcnstore/shadcn-dashboard-landing-template

An open-source admin dashboard and landing page template built with React 19, TypeScript, and Tailwind CSS v4. It features dual-framework support for Vite and Next.js 15 (App Router), providing over 30 pages including authentication, settings, and application demos like mail, tasks, and chat. The template includes integrated theme customization, a live theme customizer, and a suite of responsive chart components powered by Recharts and shadcn/ui v3.

Tokens
67.8K
Snippets
197
Records
260
Agent score
75%

What's inside shadcn-dashboard-landing-template

  1. Overview of the Component Library

    main

    The template provides a comprehensive component library built using shadcn/ui v3, Radix UI primitives, and Tailwind CSS v4. The library is categorized into several functional groups to help organize your UI development:

    • UI Foundation Components: Core building blocks like buttons, inputs, cards, and dialogs.
    • Data Display Components: Advanced elements for information presentation, including data tables, charts, calendars, and progress indicators.
    • Navigation Components: Elements for site movement, such as sidebars, breadcrumbs, pagination, and the command palette.
    • Form Components: A complete solution for form handling, integrated with React Hook Form for validation and various input types.
    • Layout Components: Structural elements for page organization, including headers, footers, containers, and layouts.

  2. Overview of the Tech Stack

    main

    The template is built using a modern web stack focused on performance, type safety, and design flexibility. It supports two primary build paths: Vite or Next.js 15.

    Core Frontend Stack

    • Framework: React 19 with TypeScript 5.x
    • UI Components: shadcn/ui v3 built on Radix UI primitives
    • Styling: Tailwind CSS v4
    • Theming: Uses tweakcn for live customization, CSS variables, and the HSL color space.

    State, Data, and Tables

    • State Management: Zustand
    • Forms: React Hook Form with Zod for schema validation
    • Data Tables: TanStack Table

    Visuals

    • Charts: Recharts
    • Icons: Lucide React

  3. Overview of Template Contents

    main

    The template provides a complete set of pre-built interfaces for both dashboard and landing page applications. It includes:

    • Dashboard & Landing Page: 2 dashboard variants (including analytics and charts), a full landing page (hero, features, pricing), and over 30 demo pages.
    • Application Interfaces: Specialized views for Email (inbox, compose, read), Task Management (drag & drop), Chat (message threads), and Calendar (event management).
    • Authentication & Settings: Multiple login/signup variants, user profile management, and standard error pages (404, 500, maintenance).

  4. Overview of Template Features and Customization

    main

    The ShadCN Dashboard + Landing Page Template provides several key capabilities for developers:

    Core Features

    • 30+ Pre-built Pages: Includes dashboard layouts, landing pages, authentication flows, and app interfaces.
    • Dual Framework Support: Identical implementations for both Vite (Single Page Application) and Next.js (Server-Side Rendering/Static Site Generation).
    • Live Theme Customizer: Real-time theme editing powered by tweakcn integration.

    Customization Options

    • UI Components: Access a comprehensive library of shadcn/ui components.
    • Theme System: A robust system for managing styles and design tokens.
    • Live Editing: Use the theme customizer to see changes in real-time.

  5. Overview of Shadcn Dashboard + Landing Page Template

    main

    This template provides a comprehensive set of UI components and pages for building both an admin dashboard and a marketing landing page. It is built using shadcn/ui v3 and Tailwind CSS v4.

    Key Capabilities

    • Admin Dashboard: Includes 30+ pages such as mail, tasks, chat, calendar apps, authentication flows, and settings.
    • Landing Page: Includes hero sections, features, pricing, testimonials, and complete business sections.
    • Dual Framework Support: You can choose between a Vite implementation for fast development or a Next.js 15 implementation for production-ready SSR/SSG.
    • Live Theme Customization: Integrated with tweakcn for real-time editing of colors, layouts, and components.
    • Responsive Design: Mobile-first approach utilizing container queries for seamless cross-device compatibility.

  6. Framework Support Options

    main

    You can choose between two primary framework implementations depending on your project requirements:

    • Vite Version: Uses React + Vite + React Router DOM. This version is optimized for Single Page Applications (SPAs) and provides an ultra-fast development experience.
    • Next.js Version: Uses Next.js 15 + App Router. This version is optimized for SEO and supports Server-Side Rendering (SSR) and Static Site Generation (SSG).

  8. Project Structure and Included Pages

    main

    The template provides a comprehensive set of pre-built pages and components:

    Dashboard & Apps

    • Dashboard Pages: Overview with analytics and an alternative Dashboard v2.
    • Application Demos: Mail (Inbox/Compose), Tasks (Drag & Drop), Chat, Calendar, and Users (Advanced Tables).

    Authentication & Settings

    • Auth: Multiple variants for Login, Sign Up, and Forgot Password.
    • Settings: User, Account, Plans & Billing, Appearance, Notifications, and Connections.

    Landing Page

    • Sections: Hero, About, Features, Stats, Logo Carousel, Team, Testimonials, Blog, Pricing, FAQ, Contact, and CTA.
    • Components: Full Navigation and Footer.

    Error Pages

    • Standard Errors: 404, 401, 403, 500, and Under Maintenance pages.

  9. Understand the Next.js project structure

    main

    The Next.js version uses the App Router pattern. Key directories include:

    • src/app/: Contains App Router pages and layouts.
      • (auth)/: Authentication-related routes.
      • (dashboard)/: Dashboard-related routes.
      • layout.tsx: Root layout.
      • page.tsx: Home page.
      • globals.css: Global styles.
    • src/components/: Reusable components.
      • ui/: shadcn/ui components.
      • layouts/: Layout components.
    • src/hooks/: Custom React hooks.
    • src/lib/: Utility functions.
    • src/types/: TypeScript type definitions.
    • src/utils/: Helper utilities.
    • public/: Static assets.
    • components.json: shadcn/ui configuration.
    • next.config.ts: Next.js configuration.
    • tailwind.config.ts: Tailwind CSS configuration.

  10. Developer Stack and Performance Features

    main

    The template uses a modern, type-safe stack designed for high performance and developer experience:

    • Core Stack: React 19, TypeScript 5.x, and Tailwind CSS v4.
    • Tooling: Includes ESLint, Prettier, and build optimizations.
    • Performance & Accessibility: Features code splitting, lazy loading, and optimized bundle sizes. All components are designed to meet WCAG 2.1 AA accessibility standards.

  11. Component Library and Theming Capabilities

    main

    The template is built using shadcn/ui v3 and includes:

    • Core Components: All standard shadcn/ui components, custom dashboard components, advanced data tables (powered by TanStack Table), and chart components (powered by Recharts).
    • Theme System: A real-time theme customizer using tweakcn. It supports multiple built-in color schemes (blue, rose, green, dark, etc.), layout variations (vertical or horizontal sidebars), and the ability to export/import custom themes.

  12. Define a Custom Theme structure

    main

    A theme is defined by a CustomTheme object containing metadata, a color scheme, layout configuration, typography, and component-specific styles. Colors should be provided in hsl() format.

    Key properties include:

    • name: Unique identifier for the theme.
    • colors: A dictionary of color values (e.g., primary, background).
    • layout: Configuration for sidebarWidth, headerHeight, borderRadius, and spacing.
    • typography: Font families and font size mappings.
    • components: Component-specific overrides.
    interface CustomTheme {
  name: string
  description?: string
  author?: string
  version?: string
  
  colors: {
    [key: string]: string
  }
  
  layout: {
    sidebarWidth: number
    headerHeight: number
    borderRadius: number
    spacing: number
  }
  
  typography: {
    fontFamily: string[]
    fontSize: {
      [size: string]: string
    }
  }
  
  components: {
    [component: string]: Record<string, any>
  }
}