Design systemgallery

Theme editor

Re-theme every component live, then export the tokens.

Theme editor

Presets

Radius0.625rem

Font family

Palette

Surface & semantic

Background

--background

Foreground

--foreground

Card

--card

Card fg

--card-foreground

Popover

--popover

Popover fg

--popover-foreground

Primary

--primary

Primary fg

--primary-foreground

Secondary

--secondary

Secondary fg

--secondary-foreground

Muted

--muted

Muted fg

--muted-foreground

Accent

--accent

Accent fg

--accent-foreground

Destructive

--destructive

Border

--border

Input

--input

Ring

--ring

Chart series

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Loading saved theme…

Live preview

These react to the editor instantly — and so does every other page, through the real :root token cascade.

DefaultSecondaryOutlineMuted

Sample input

Providers

The two app-wide providers from @package/web-ui — theming and data — that wrap every route.

ThemeProvider
QueryProvider

ThemeProvider

Owns the .dark class and persists the color-scheme preference. The editor's light/dark toggle drives it directly.

PreferencesystemResolvedlight

QueryProvider

The shared React Query client provider. Wraps the app so any route can use typed queries and mutations — the data layer beside the design layer.

This gallery has no server data, so the client is present but idle — it's here to show the provider every real app mounts.