Skip to content
WingoUI
ComponentsTemplatesDocsPricingAI agentsBlogChangelogContact

Theme generator

One brand color, every component.

Pick a brand, neutrals and a shape, or import a shadcn theme. Every token is derived with AA contrast in light and dark, and the preview is built from the real library.

Editing

Mode
Derive dark from lightDark tones follow the light colors

Brand

Brand color
Solid fillWhat tone="neutral" solids use

Neutrals

Status colors

Fills, soft surfaces and tone text are derived with 4.5:1 contrast.

Success
Warning
Danger
Info

Shape and density

Radius
DensityDefault control size

Typography

Locale

Component defaults

App-wide props, stored as UIProvider defaults. Explicit props still win.

Component

Accordion reads UIProvider defaults: changes show in the preview and in ui.config.tsx.

type
collapsible
keepMounted
headingLevel
variant
size
radius
indicator
indicatorPosition
tone
color
divided
No component overrides yet

Saved themes

Saved themes stay in this browser.

app.northwind.com/orders
Magazin
OverviewOrdersProductsCustomersSettings
Pro planUnlimited products and reports.

Orders

28 orders this week, 12 need attention.

Revenue
$48,250+12.4%
Orders
128+8
New customers
36+4.1%
Returns
2.3%-0.6%
EC
Emma Carter#10482 · New York
Paid$1,249.90
LB
Liam Brooks#10481 · Chicago
Pending$389
SR
Sophia Reed#10480 · London
New$2,150
NB
Noah Bennett#10479 · Boston
Failed$74.50
Courier pickup at 16:00
Pack the 12 pending orders before the Fan Courier pickup.
Low stock
Trek city bike: 2 left in New York.

Store settings

Applied to new orders.

    9:41

    Profile

    EC
    Emma CarterNew York
    Pro
    Sales this week$12,460
    Addresses3

    Contrast

    All 98 pairs pass

    Text pairs need 4.5:1 (WCAG AA), the focus ring 3:1, in light and dark.

    Closest to the limit (light)
    • Aabrand-foregroundon brand4.56AA
    • Aabrand-soft-foregroundon card4.62AA
    • Aamuted-foregroundon card4.63AA
    • Aawarning-soft-foregroundon card4.63AA

    A theme generator that speaks shadcn

    The Wingo UI theme generator turns one brand color into a full set of Tailwind CSS v4 design tokens: surfaces, text levels, brand and status tones, the focus ring, chart colors, radius and font, in light and dark. Already have a shadcn/ui or tweakcn theme? Import it: paste its CSS variables, and the generator maps them onto Wingo UI tokens, checks the contrast and shows the result on real components, ready to export as globals.css, a UIProvider config or theme.json.

    FAQ

    Can I import a shadcn theme?

    Yes. Click Import (or open /theme?import=1) and paste the :root and .dark blocks from your globals.css. The importer reads --primary, --background, --foreground, --card, --popover, --muted, --border, --ring, --destructive, --radius and --font-sans, maps them onto the brand, neutral, status, radius and font settings, and updates the preview while you paste.

    Does it work with tweakcn themes?

    Yes. Paste the CSS that tweakcn copies, or the registry item JSON its theme links serve (the shadcn registry format with cssVars). Values from cssVars.theme, such as the radius and fonts, are read too.

    Which color formats can I paste?

    The bare HSL triplets of shadcn v3 (222.2 84% 4.9%), hsl(), rgb(), oklch() as written by shadcn v4 and Tailwind CSS v4, oklab() and hex. Alpha is ignored, and var() references to other variables in the same paste are resolved.

    Why do some colors change after the import?

    The generator keeps one brand color, one neutral family and four status colors, then derives every foreground, soft tone, focus ring and chart color again so each pair passes WCAG AA in light and dark. A gray --primary becomes the neutral solid fill, and --radius maps to the nearest radius step by the corner shadcn draws on a button.

    What do I get when I export?

    A globals.css block with :root, .dark and @theme inline, a ui.config.tsx with the UIProvider defaults, and a theme.json. Copy or download them; the generator runs in your browser and needs no account.