WingoUI
ComponentsDocsChangelogAI agents
ThemePricing

Theme generator

One brand color, every component.

Pick a brand, neutrals and a shape. 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