Palette
Every step of a preset hue as a copy action. One status line above the chips reports the actual clipboard result.
Two families
Preset palette
Select a swatch to copy its variable.
blue
violet
Each swatch shows the fixed preset value in both themes.
Used on the Colors guide.
Usage and interface
DemoPalette renders a tray whose stage holds div.ui-palette: one ui-palette-row per family with its name and a ui-palette-chip button per step. families limits the hues. Each chip copies var(--color-<family>-<step>) and reports to the shared ui-copy-status line.
<DemoPalette families={["blue", "violet"]} /><div class="ui-palette"> <div class="ui-palette-row" role="group" aria-label="blue palette"> <span>blue</span> <button type="button" class="ui-palette-chip" aria-label="Copy color-blue-5" style="background-color: …"></button> … </div></div>On narrow pages each row wraps into seven columns with the family name above.