This tool helps you visualize how your CSS theme will look on real UI components. Paste your globals.css with CSS variables and instantly see the results on buttons, cards, inputs, and more. Perfect for designing shadcn/ui themes or any CSS variable-based design system.
The previewer parses your CSS variables and applies them to sample components in an isolated preview. It supports these variable names:
--color-primary, --color-secondary
--color-background, --color-foreground
--color-muted, --color-accent
--color-destructive, --color-border
--radius
Syntax Highlighting
Edit CSS with full syntax highlighting and auto-completion
Live Preview
See your theme applied to real UI components instantly
Light/Dark Mode
Toggle between light and dark themes to test both
Component Showcase
Preview buttons, cards, inputs, badges, and more
How do I preview my theme?
Paste your CSS variables (from :root or CSS file) and see how they affect shadcn/ui components in real-time.
What components are included?
Buttons, cards, inputs, selects, dialogs, and more - all major shadcn/ui components for testing.
Can I copy the theme code?
Yes! Copy the theme configuration to use in your project. Supports Tailwind CSS and CSS variables.
What CSS variables are supported?
All standard shadcn/ui theme variables: background, foreground, primary, secondary, accent, muted, destructive, borders, and more.
Does this work with Tailwind CSS?
Yes! The tool shows how your theme maps to Tailwind CSS colors and CSS variables for shadcn/ui.
Privacy First
All CSS processing happens in your browser. Your theme code never leaves your device or gets uploaded to any server.