Skip to content

# Introduction

A modern, production-ready admin dashboard built with Next.js 16, React 19, TypeScript 6, and Tailwind CSS v4 — 125+ static routes, fully responsive, dark/light/system theme, RTL support, and everything you need to ship fast.

## What is Zenith Dashboard?

Zenith Dashboard is a feature-rich admin template designed for building internal tools, SaaS applications, and back-office dashboards. It provides a solid foundation with pre-built components, pages, and patterns so you can focus on shipping your product instead of building boilerplate UI. With five dashboard variations, 20+ app pages, a live Theme Customizer, i18n support, Storybook component browser, and a comprehensive set of auth and error pages, it covers every scenario a modern admin panel needs out of the box.

## Features

- Next.js 16 + React 19 + TypeScript 6 + Tailwind CSS v4 — App Router with server and client components, strict typing, and utility-first styling with OKLCh color tokens
- 5 Dashboard Variations — Overview, Analytics, eCommerce, CRM, and SaaS dashboards, each with unique layouts and chart compositions
- 10+ App Pages — Chat, Mail, Files, Kanban, Calendar, Wizard, Orders, Products, Customers, Invoices, Billing, Profile, Settings, Support, and Pricing pages with full interactivity
- Charts Showcase — Area, Bar, Pie, Radar, RadialBar, Treemap, Scatter, and Composed charts powered by Recharts
- Theme Customizer — Live drawer panel with 6 color presets (Default, Ocean, Sunset, Forest, Berry, Slate), 3 density levels (Compact, Default, Comfortable), dark/light/system theme, and persistent preferences
- Layout Options — Sidebar (default) or horizontal top-nav layout, plus fluid (full-width) or boxed (max-width centered) container modes
- RTL Support — Full right-to-left language support for Arabic, Hebrew, Persian, and more, toggled via the Theme Customizer
- 35+ shadcn/ui Components — Vendored, accessible, and fully customizable primitives built on Radix UI with CVA variants
- TanStack Table — Sortable, filterable, paginated data tables with CSV export and mobile-responsive card views
- Auth Pages — Sign-in, sign-up, forgot password, reset password, two-factor authentication, email verification, and lock screen templates
- Error Pages — 404 Not Found, 403 Forbidden, 500 Server Error, Coming Soon, and Maintenance pages
- Command Palette (Cmd+K) — Quick navigation and search across all pages and actions
- Drag-and-Drop Kanban — Interactive task board with draggable cards across columns
- Framer Motion Page Transitions — Smooth animated transitions between routes and interactive UI elements
- React Hook Form + Zod Validation — Type-safe form handling with schema-based validation across all form pages
- Vitest + Playwright Testing — Unit and component testing with Vitest, end-to-end testing with Playwright
- Internationalization (i18n) — Built-in locale system with English, German, and French translations, localStorage persistence, and a locale switcher in Settings and Theme Customizer
- User Management & RBAC — Full CRUD user pages with roles (Admin, Editor, Viewer, Moderator), permissions grid, department filters, and status management
- Storybook Component Browser — 15 interactive stories across UI primitives, form components, and dashboard widgets for visual development and testing
- Performance Optimizations — Lazy-loaded charts with IntersectionObserver, next/dynamic code splitting, and bundle analyzer integration
- Seed/Starter Version — A minimal, stripped-down starter project with all infrastructure (theming, i18n, layouts, 33 UI components) but no demo pages or mock data
- Fully Responsive — Collapsible sidebar, mobile-first layout, and touch-friendly interactions across 125+ static routes

## Quick Start

Get up and running in under a minute:

    git clone https://github.com/colorlib/zenith-dashboard.git
    cd zenith-dashboard
    npm install
    npm run dev

Then open `http://localhost:3737` in your browser.

## Tech Stack

Next.js 16
React 19
TypeScript 6
Tailwind CSS v4
Recharts
Lucide Icons
Radix UI
React Hook Form
Zod
cmdk
Framer Motion
TanStack Table
Vitest
Playwright
Storybook

## Next Steps

Ready to dive in? Continue with the Installation Guide for detailed setup instructions, or explore the Folder Structure to understand the project layout.