One panel, every component on this page.
Open the THEME tab on the right edge. Change a preset, drag a slider, toggle dark mode, pick an element with the inspector — buttons, cards, forms, tables, dialogs and video frames below all follow.
Button variants & sizes
Radius, weight and color come from --btn-radius, --font-weight, --primary and --destructive. Drag those sliders and watch.
Alerts & badges
Semantic colors — --success --warning --destructive --info — each have their own picker in the panel.
theme.css downloaded with 30 variables and your custom CSS.
You shuffled presets 3 times. Export before resetting.
That file isn't a valid theme snapshot. Try a .json export.
Use Inspect → Pick an element to restyle anything, even this alert.
Cards, stats & gallery
Surface, border, radius and shadow tokens drive every card. Try shadow depth, card radius and dark mode here.
Drop-in install
One script tag. No markup changes, no build step, no dependencies.
Inspect anything
Click any element on the page and restyle it directly. Overrides persist.
Export clean CSS
A :root {} block plus custom CSS — paste and ship.
12,408
+18% this month
17.4
per session
12
+2 in v3
0
vanilla JS forever
Video embed
Even media frames follow your radius, border and shadow tokens.
Inputs, selects & toggles
Input radius, border width, fonts and focus rings are all live. Try an invalid state by clearing the email field.
--primary.Table & pagination
Row hover, header tint and status badges all derive from your tokens.
| Theme | Preset | Status | Exports | Updated |
|---|---|---|---|---|
| ACAcme launch | Navy & Gold | Approved | 48 | 2h ago |
| BRBoreal rebrand | Forest & Amber | In review | 17 | Yesterday |
| VLViolet SaaS | Violet & Mint | Draft | 9 | 2d ago |
| MNMono portfolio | Mono Ink | Stale | 3 | Last week |
Tabs, accordion, breadcrumb & more
Interactive components with zero dependencies — all themed.
Live preview of the current theme on real components. Switch tabs — the active pill follows --primary.
theme.css is ready: 30 variables plus your custom CSS block.
Every change is saved to a cookie, so history survives reloads and page hops.
How do I theme third-party widgets?
Does dark mode affect my brand colors?
Can I script the panel?
setVar(), getVar(), addPreset(), buildCSS() — see docs.Avatars
Stacked team presence.
Skeleton
Loading shimmer follows surfaces.
Upload
Import a theme JSON snapshot.
Mirrors the panel's Import button.
Type scale in action
Pairings, base size, heading scale, weight, line height and letter spacing — every slider in the Typography section moves this prose.
A theme is more than a color
The space between lines and the space between letters change how a page feels long before anyone notices the palette. Tight and dense reads efficient; loose and airy reads calm and editorial.
Design Customizer treats both as first-class controls, alongside color, radius, density and elevation — so a page's full typographic rhythm can be tuned without touching a stylesheet.
--font-heading:
--font-body:
--line-height: · --letter-spacing:
Pricing & testimonial
The same tokens theme marketing sections — restyle the featured tier with the inspector.
Starter
- Core panel
- 12 color presets
- Export as CSS
Standard Popular
- Everything in Starter
- Element inspector
- Custom CSS + import
Studio
- Everything in Standard
- Runtime
addPreset() - White-label friendly