Skip to content
Flux DashboardDocs

Introduction

A gradient-forward, startup-speed admin dashboard built with Next.js 16, React 19, TypeScript 5, and Tailwind CSS v4 — 64 static routes, fully responsive, dark/light/system theme, RTL support, and everything a startup or dev-tools team needs to ship fast.

What is Flux Dashboard?

Flux Dashboard is a gradient-forward, startup-speed admin template purpose-built for startups, dev tools, and SaaS product teams. 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 unique dashboard variants, 7 startup-specific specialty 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. The Flux signature design language — vibrant gradients, frosted glass surfaces, colored layered shadows, and dot-grid backgrounds — gives your product a polished, contemporary feel from day one.

Features

  • Next.js 16 + React 19 + TypeScript 5 + Tailwind CSS v4 — App Router with server and client components, strict typing, and utility-first styling with OKLCh color tokens
  • 5 Dashboard Variations — Startup Command Center, Product Analytics, Revenue & Sales, Pipeline & Deals, and SaaS Metrics dashboards, each with unique layouts and chart compositions
  • 7 Startup-Specific Pages — Product Roadmap, Feature Flags, Deployments, Sprint Board, Team Activity, Feedback Board, and Changelog Builder — purpose-built for dev-tools and SaaS workflows
  • Flux Design Language — Gradient buttons with glow effects, frosted glass header, colored layered shadows, dot-grid backgrounds, 0.875rem border radius, and Inter + JetBrains Mono typography
  • 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
  • @dashboardpack/core Components — 35+ accessible, fully customizable UI primitives built on Radix UI with CVA variants, shared across all DashboardPack templates
  • 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 64 static routes

Quick Start

Get up and running in under a minute:

cd flux-dashboard
npm install
npm run dev

Then open http://localhost:3838 in your browser.

Tech Stack

Next.js 16
React 19
TypeScript 5
Tailwind CSS v4
@dashboardpack/core
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.