Palette picker

A row of colour swatches, one per palette. Selecting a palette re-tints the whole product — surfaces, borders, text, accent and the focus ring — not just the accent spots. It is an axis independent of light/dark mode.

Default

Reads and writes through usePalette, so it must sit under a PaletteProvider. Each swatch paints itself from its palette's own token, so the dots track the live mode. The control below drives the real palette for this page.

<PalettePicker />

Setup

Wrap the app in PaletteProvider, and run paletteInitScript() in the document head so the stored palette attribute is applied before first paint. The palettes themselves live in the token layer and activate off a data-theme attribute on the document root.

import { PaletteProvider, PalettePicker } from '@flabbergasted-ai/react';import { paletteInitScript } from '@flabbergasted-ai/react/palette-script';
// In the document <head>:<script dangerouslySetInnerHTML={{ __html: paletteInitScript() }} />
// Around the app:<PaletteProvider>  <PalettePicker /></PaletteProvider>

Props

Prop	Type	Default	Notes
`aria-label`	`string`	`'Theme palette'`	Accessible label for the radiogroup.
`className`	`string`	—	Merged onto the pill container for layout overrides.