ShadCN Dashboard + Landing Page Template is a free, MIT-licensed open-source boilerplate by ShadcnStore that ships a complete admin dashboard and marketing landing page in both Vite + React and Next.js 15 versions, styled with Tailwind CSS v4 and shadcn/ui v3.
What is the ShadCN Dashboard + Landing Page Template?
The template is a frontend starter that gives you two complete applications: an admin dashboard with 30+ pages and a business landing page, each available in separate vite-version and nextjs-version folders. It takes a fresh clone, runs with pnpm install and pnpm dev, and produces a production-ready TypeScript UI that you can extend with your own backend. Developed and maintained by ShadcnStore, the template uses React 19, TypeScript, Tailwind CSS v4, shadcn/ui v3 components built on Radix UI, and integrates Zustand, React Hook Form, Zod, TanStack Table, and Recharts.
Key Features
- Dual framework support — a Vite + React version for fast local development and a Next.js 15 version with the App Router for production deploys; both share the same component, hooks, and lib structure.
- shadcn/ui v3 + Radix UI — accessible component primitives such as dialogs, dropdowns, and toasts, all customized with Tailwind CSS v4 utility classes.
- Live theme customizer — a built-in tweakcn-powered panel with 7 preset color themes (Default, Dark, Rose, Green, Orange, Red, Violet), sidebar layout variants, collapsible navigation, and real-time preview.
- 30+ dashboard pages — includes two dashboard variants, mail, tasks, chat, calendar, users, settings, authentication (3 login, 3 signup, 3 forgot-password layouts), error pages (404, 401, 403, 500, maintenance), FAQ, and pricing.
- Data tables and charts — TanStack Table for sorting, filtering, and pagination, plus Recharts for analytics visualizations.
- Landing page template — a full marketing page with hero, about, features, stats, logo carousel, team, testimonials, blog, pricing, FAQ, contact, CTA, navigation, and footer sections.
- State and forms — Zustand for lightweight state management and React Hook Form with Zod for validated forms.
Who should use the ShadCN Dashboard + Landing Page Template?
- Startup founders — scaffold a SaaS product with a ready-made landing page and a dashboard for user management without writing UI from scratch.
- Frontend developers — use the template as a learning reference for combining React 19, TypeScript, Tailwind CSS v4, and shadcn/ui v3 in a real project structure.
- Agency teams — build client admin panels or internal tools by customizing the included app demos (mail, chat, tasks, calendar) and theming system.
What can you do with the ShadCN Dashboard + Landing Page Template?
- SaaS builders: launch a production-ready dashboard that includes subscription settings, analytics charts, and team management pages, then add your own backend for auth and billing.
- Marketers: use the included landing page sections to assemble a conversion-focused website with testimonials, pricing, and FAQ blocks in minutes.
- Theme designers: experiment with the live customizer's 7 preset palettes and export custom CSS-variable themes for client projects.
How does the ShadCN Dashboard + Landing Page Template work?
- Clone the repository and enter either the
vite-version or nextjs-version directory.
- Install dependencies with pnpm (or npm) and run
pnpm dev — Vite serves on localhost:5173, Next.js on localhost:3000.
- Use the theme customizer button to change colors and layout live, then replace demo content with your own pages and data.
Pricing
The template is completely free and open source under the MIT License. You can use it in commercial projects, modify it, and sell products built with it; attribution to ShadcnStore is appreciated but not required.
FAQ
Is the ShadCN Dashboard + Landing Page Template free?
Yes, it's free and MIT-licensed. There are no paid tiers or watermarks; you can use it for personal and commercial projects, modify the code, and redistribute it.
Does the template include a landing page?
Yes, the template bundles a full marketing landing page with hero, about, features, stats, logo carousel, team, testimonials, blog, pricing, FAQ, contact, CTA, navigation, and footer sections in both the Vite and Next.js versions.
What version of Next.js does it use?
The Next.js version uses Next.js 15 with the App Router, including route groups for auth and dashboard pages, plus global loading and not-found components.
What are the Node.js requirements?
You need Node.js 18 or later, and the README recommends pnpm as the package manager, though npm works as well.
Can I remove the theme customizer?
Yes. The README provides removal steps for both versions: delete the theme-customizer component, remove the toggle button from the layout, and clean up theme-related imports and folders.
