Description
Flux Dashboard is a gradient-forward, animated admin dashboard template built with Next.js 16, React 19, TypeScript 5, Tailwind CSS v4, and shadcn/ui. 64+ pages, fully responsive, dark/light/system themes, RTL support, and a bold startup-inspired design language — built for dev tools, SaaS products, and fast-moving teams.
5 Dashboard Variations
- Overview — Stats cards with sparkline charts, revenue chart, traffic pie chart, recent orders, activity feed
- Analytics — Line/bar charts with time-period filters, date range picker, top pages, geographic traffic
- eCommerce — Sales stats, daily sales chart, order status donut, top products with sparkline trends
- CRM — Pipeline value, deal stages funnel, lead sources breakdown, filterable deals table
- SaaS — MRR/ARR metrics, subscription plans donut, MRR growth chart, churn rate tracking
7 Flux-Exclusive Specialty Pages
- Product Roadmap — Kanban-style roadmap with status columns and drag-and-drop
- Feature Flags — Toggle-based feature management with rollout percentages
- Deployment Log — Deployment history with status indicators and commit references
- Team Activity Feed — Real-time team collaboration feed with filters
- Feedback Board — User feedback collection with voting and status tracking
- Sprint Board — Agile sprint planning with story points and velocity
- Changelog Builder — Release note editor with version management
Flux Design Language
- Vivid Violet Primary — Bold OKLCh color palette (hue 285) with electric blue accent
- Gradient Buttons & Shadows — Layered colored shadows, gradient text, glow effects
- Frosted Glass Header — Backdrop-blur with saturation for a premium feel
- Dot Grid Backgrounds — Subtle geometric patterns on dashboard sections
- Pill-Shaped Elements — 0.875rem border radius for a modern, friendly look
- Inter + JetBrains Mono — Clean sans-serif with monospace for code/data
Live Theme Customizer
- 6 color presets (Violet, Blue, Emerald, Rose, Orange, Slate)
- 3 density levels (Compact, Comfortable, Spacious)
- Dark / Light / System theme with localStorage persistence
- RTL toggle for right-to-left languages
- Sidebar or horizontal top-nav layout
- Fluid or boxed container modes
Developer Experience
- 35+ shadcn/ui components — via @dashboardpack/core, accessible, fully customizable
- 10 Recharts chart types — Area, Bar, Line, Pie, Radar, RadialBar, Treemap, Scatter, Composed, Sparkline
- TanStack Table — Sorting, filtering, pagination, CSV export, mobile card view
- React Hook Form + Zod — Type-safe form validation
- Framer Motion — Animated page transitions
- Command Palette (Cmd+K) — Fuzzy search across all pages
- i18n — English, German, French with type-safe keys
- Syntax-highlighted docs — Built-in /docs site with sugar-high code blocks
Tech Stack
| Framework | Next.js 16 (App Router, static export) |
| UI Library | React 19 |
| Language | TypeScript 5 (strict mode) |
| Styling | Tailwind CSS v4 with OKLCh color tokens |
| Components | shadcn/ui (35 primitives via @dashboardpack/core) |
| Charts | Recharts 3 |
| Data Tables | TanStack Table |
| Forms | React Hook Form + Zod |
| Animations | Framer Motion |
| Icons | Lucide React |
License: MIT | View Live Demo
