How it works
Adjust controls on the left to override CSS custom properties in real time. Changes are scoped to the preview panel — non-destructive, no build step required. Copy the resulting CSS snippet and paste it into your project's global stylesheet to apply your customizations.
Theme Playground
Customize design tokens in real time
Preview
Button
Typography
Display Heading
Section Heading
Body text — The quick brown fox jumps over the lazy dog.
Small muted text — used for captions and secondary info.
Badge
DefaultSecondaryOutlineDestructive
Progress & Spinner
Loading…Loading…Loading…
Alert
Info
This is an informational message.
Success
Your changes were saved successfully.
Warning
Please review before continuing.
Error
Something went wrong. Try again.
Input & Textarea
Something went wrong.
Select
Card
Card Title
A short description of the card content.
This is the card body. It reacts to token overrides in real time.
Switch & Checkbox