Huebert

Free Shadcn/ui theme generator

Generate beautiful shadcn/ui themes with light and dark modes instantly.

Start theming
Features

The all-in-one shadcn/ui theme generator

Light & dark modes

Generate and preview complete light and dark themes side by side.

Contrast aware

Tokens are paired for readable contrast so text and surfaces stay accessible.

Color blindness check

Simulate how UI colors read for common types of color vision deficiency.

Auto-generation

Create a full light and dark theme from one action.

Live preview

See tokens applied to real shadcn/ui components as you edit.

Edit tokens

Adjust individual CSS variables for colors, radius, spacing, and shadows.

Typography

Choose sans, serif, and mono fonts from the shadcn registry so previews match how your app will look.

Theme import

Paste CSS from an existing Tailwind v3 or v4 shadcn setup and keep editing from there.

Theme export

Export light and dark CSS variables for Tailwind v3 or v4, ready to paste into your project.

Start generating

Viral products havethree colors

Huebert generates high-contrast color schemes of background, foreground, and primary for beautiful and accessible UIs.

Generate your scheme

Frequently Asked Questions

Is the theme generator free?
Yes. You can generate, customize, import, export, and preview shadcn/ui themes for free. Saving themes to your personal library is a Huebert Pro feature.
Can I manually edit themes?
Yes. Start from a preset, import an existing theme, or generate one automatically, then fine-tune colors, typography, radius, spacing, and shadows.
Can I import my current shadcn/ui theme?
Yes. Paste CSS variables from an existing Tailwind v3 or v4 shadcn/ui setup, and the generator will load the matching tokens so you can continue editing from there.
Can I customize typography?
Yes. You can choose sans, serif, and mono fonts from the shadcn registry and preview them directly on real components.
How do I use the generated theme?
Copy the generated theme snippet and add it to the stylesheet where your app keeps global design tokens. The output is formatted for shadcn/ui and includes light and dark values together.
Can I export the preview as an image?
Yes. You can download the live component preview as an image for documentation, client reviews, portfolios, or design handoff.
Does it support dark mode?
Yes. You can preview and customize light and dark themes side by side, and the copied output includes values for both modes.

Ready to create your custom shadcn/ui theme?

Start theming