A themeable design system for admin dashboards
Built with Next.js, Tailwind CSS v4, and shadcn/ui. Every color, radius and font is a CSS variable — retune the whole product from one file, or live-preview it with the controls below.
Live theme controls
This edits --brand-hue and --radius on :root in real time — no rebuild required.
Color tokens
Every color in this system is a CSS variable defined once in globals.css and consumed through Tailwind's @theme mapping. Swap the OKLCH values there (or drag --brand-hue above) and every component below updates — nothing is hardcoded in component files. Click any swatch to copy its variable name.
Core surfaces
Status colors
Chart palette
Sidebar palette
Typography
Font family is the --font-sans variable set in layout.tsx (Geist by default). Swap the font import and every size below inherits it automatically.
Heading 1 — The quick brown fox
Heading 2 — The quick brown fox
Heading 3 — The quick brown fox
Heading 4 — The quick brown fox
Heading 5 — The quick brown fox
Body — Design systems bring order to complexity. This paragraph demonstrates the default body copy size and line height used throughout the dashboard, forms, and tables.
Muted / small — used for captions, helper text, and secondary metadata under form fields and table rows.
“Blockquote — good design is as little design as possible.”
const inlineCode = "font-mono, bg-muted";Spacing & radius
Spacing follows Tailwind's default 4px scale. Radii are derived from the single --radius variable (see the live control above), so a client can tune roundness once instead of per-component.
Form controls
Text inputs, selects, checkboxes, radios, switches, sliders and toggles — the primitives every settings page and create/edit form is built from.
Cards, badges, alerts & tables
The building blocks of every dashboard page: content cards, status badges, inline alerts, and data tables.
| Invoice | Customer | Status | Amount |
|---|---|---|---|
| INV-3021 | Aditi Sharma | Paid | $249.00 |
| INV-3022 | Marco Rossi | Pending | $99.00 |
| INV-3023 | Lin Wei | Overdue | $1,200.00 |
| INV-3024 | Sara Ahmed | Paid | $450.00 |
Overlays
Dialogs, sheets, popovers, tooltips and accordions — for confirmations, side panels, and progressive disclosure.
Feedback
Progress bars, loading skeletons, and toast notifications for async states.
Section one
Section two
Charts
Recharts wrapped with the ChartContainer helper — series colors read from the chart-1…5 tokens so charts stay in sync with the rest of the theme.