Theme builder
Build a shadcn-style theme for Pro live on real components: presets, brand colours, radius and imported shadcn themes, with the CSS to copy.
Editing the light theme. Switch light and dark in the header to edit the other.
Workspace
Live preview
Revenue
/* The Pro default theme: nothing to add. Pick a preset or change a colour. */
Save it as theme.css and import it after the kit styles, or let the CLI write it: npx @twentyfirstmedia/ui theme ./theme.css
Pick a preset, change any colour or paste a theme from ui.shadcn.com/themes or tweakcn; the preview uses the real components of the kit. Light and dark are edited separately: switch the theme in the header. "Apply to the whole site" lets you browse every component page in your theme (in this tab only).
Use the result
Save the CSS as theme.css and import it once, after the kit's styles, or let the CLI write and import it:
npx @twentyfirstmedia/ui theme ./theme.css
npx @twentyfirstmedia/ui theme violet
In React you can also pass a theme at runtime: <UIProvider tokens={theme}>. See Theming and tokens for every variable.