Theme
A live editor for the library's semantic tokens — preview, copy and share.
Edit the semantic tokens the library ships and watch them apply to a preview in
real time. The editor reads its defaults from @gpuixui/tokens and emits the
same createTheme shape the library consumes; it invents no palette of its own.
Account
Update your profile and how the app notifies you.
Popover, muted and border roles drive the chrome around the card.
Browser preview of the semantic tokens from @gpuixui/tokens. The shipped components read these roles through GPUix, not CSS variables; the bridge above only exists for this preview.
How it works
The editor edits the shadcn-core roles — background, foreground, card,
popover, primary, secondary, muted, accent, destructive, border,
input and ring — plus radius.md and the sans family. Light and dark are
independent; pick the mode, edit, and the preview follows. Edits persist to the
URL (shareable) and to localStorage; Reset restores the built-in themes.
The token bridge
@gpuixui/tokens ships TypeScript objects, not CSS variables, and the library
paints through GPUix. This preview is CSS, so the editor exposes each role as
the shadcn variable name (--primary, --background, …) on the preview
element, maps radius.md to --radius, and maps .SystemUIFont to a CSS
system stack because GPUI resolves that sentinel natively and the browser
cannot. The bridge exists only for this preview.
Copy theme
Copy theme emits a createTheme module — one theme per mode — in the exact
format @gpuixui/tokens consumes, plus a one-line usage note.