Swatch

The building block of colour choice

A clickable colour tile for preset palettes and picker triggers. The colour is plain data (pass any CSS colour as value), and the selected state draws a theme-aware ring. Purely presentational, so it renders from Server Components; interactivity is whatever onClick you give it.

Palette

Shapes

Sizes

States

tsx
// From the npm package
import { Swatch } from 'rift-ds/components/Swatch/Swatch';

// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/swatch.json