Themes
A skin is a stylesheet of CSS variables: colors, type, edges, sound and motion. Behavior never changes with it, so you can switch skins live, nest one inside another, or write your own. Every skin is checked for contrast in every component, kit and template.
Base
Adopts the shadcn/ui theme already on your page, or builds one from a single key color. Light and dark.
- Scheme
- Light and dark
- Faces
- Your app's
Blueprint
A technical drawing: cyanotype paper, white linework, hatching for filled states, dimension lines for tracks, lettering for labels.
- Scheme
- Dark
- Faces
- Barlow Semi Condensed
Studio
A rack of synthesizer modules: gunmetal faceplates, rubber caps, silk-screened legends and amber lamps. It sounds mechanical.
- Scheme
- Dark
- Faces
- Saira Semi Condensed
Phosphor
A monochrome video terminal: intensity for hierarchy, inverse video for what's chosen, a faint bloom and static scan lines. It beeps.
- Scheme
- Dark
- Faces
- Spline Sans Mono
Ink
Electronic paper: ink on a grey screen, greys made of dots, a reading serif for long text, and no motion at all.
- Scheme
- Light
- Faces
- Literata, Atkinson Hyperlegible
Use one
Pass the skin to the root. Skins nest: the nearest root wins, so a Blueprint panel can sit inside a Base app.
<UISet skin="base">
<Settings />
<UISet skin="blueprint">
<Schematic />
</UISet>
</UISet>