A dynamic theming engine for modern web applications. Inject OKLCH colors directly into your DOM and transform your UI in real-time.
Inspect, test, and live-edit shadcn/ui components. Tweak the Convergence tokens on the bottom-right to watch styles morph instantly.
Main brand actions
Alternative surfaces
Hover and highlights
Errors and deletes
Subtle indicators
Revenue
+12%$42.5k
Users
+24%12,400
Active
+4%1.2k
Conversion
-1%4.3%
Overview panel: Displays live platform variables. Updates style dynamically when theme variable coordinates change.
The quick brown fox jumps over the lazy dog perfectly.
The quick brown fox jumps over the lazy dog perfectly.
The quick brown fox jumps over the lazy dog.
Triggers live states
Product Engineer & Themer
Tailwind v4's CSS engine handles standard `@theme` configurations correctly. Local components will update when colors in `:root` change.
System Update
Version 2.4 is live.
New User Registration
Alice joined the workspace.
Build Successful
Production bundle generated.
| Token ID | Semantic Role | Default Color | Contrast Status |
|---|---|---|---|
| --primary | Brand action buttons, active toggles, highlighted states | oklch(0.205 0 0) | Passes AA |
| --secondary | Background surfaces, alternate badges, inactive borders | oklch(0.97 0 0) | Passes AA |
| --destructive | Danger notifications, deletion confirmation, negative tags | oklch(0.577 0.245 27.3) | Passes AA |
Semantic color mappings derived from your palette.
--background--foreground--primary--secondary--accent--destructive--muted--border--input--card--chart-1--chart-2--chart-3--chart-4--chart-5--ring--sidebar--popover