Palette Generator
betaA row of swatches that melt together through a goo filter and pop back out in a new palette.
- Effects & motion
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add palette-generatornpm packages installed: class-variance-authority.
import { PaletteGenerator } from "@/components/ui/palette-generator";Default
Gallery
<PaletteGenerator>
| Prop | Type | Default |
|---|---|---|
colorsControlled palette. | PaletteColor[] | — |
countSwatches per palette. | number | 4 |
defaultColorsInitial palette when uncontrolled. Defaults to a generated one. | PaletteColor[] | — |
generateMakes a palette. Defaults to | PaletteGenerate | generateTokenPalette |
generateLabelThe refresh button's accessible name. | string | "Generate a new palette" |
morphHow deep the shrink and melt go, 0–100. | number | 50 |
onColorsChangeCalled with each new palette. | (colors: PaletteColor[]) => void | — |
paletteLabelNames the swatch list. | string | "Palette" |
radiusSwatch corner radius in pixels; the slabs are 10px rounder. | number | 14 |
stroke | boolean | — |
Plus every attribute of <div> except defaultValue, onChange.
The refresh control is a named button ("Generate a new palette") with a focus ring. The swatches are a labelled list of images named by colour, and each new palette is announced through a polite live region (missing in the source). The melt is decoration: under reduced motion the colours swap at once.
8/8
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes