Every look on offer, one click away
A circular trigger, the row height across, wearing the active theme’s swatch, and a menu of every theme on offer. Each row previews the theme’s colour, corner and faces. The host supplies the themes and applies the choice, so it works for the shipped presets or a product’s own. It is the theme switcher in this site’s header.
The shipped themes
Live: these are the presets this package ships, and choosing one rethemes the page through its data-brand attribute.
Sizes
Two sizes on the row-control scale, then disabled, where the trigger takes no press. These pick between three made-up themes and change nothing else.
Placement and the footer
The menu prefers the placement side, flips when that side has no room, and lines up with the trigger’s start or end edge. A footer sits after the themes, below a divider: this site’s header puts a link to the playground there, where a visitor builds a theme of their own.
// From the npm package
import { ThemePicker } from 'rift-ds/components/ThemePicker/ThemePicker';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/theme-picker.json