Color Picker

InstallCopy Anchor Link

pnpm exec vegastack-design verify color-picker

pnpm dlx shadcn@4.21.0 add @vegastack/color-picker

UsageCopy Anchor Link

import { useState } from "react";
import { ColorPicker } from "@/components/ui/color-picker";

function Example() {
  const [color, setColor] = useState("blue");
  return <ColorPicker value={color} onValueChange={setColor} />;
}

ColorPicker is controlled — pass value (matched against each option's name) and onValueChange (called with the picked color's name). The trigger is a rounded-md outline control with a rounded-sm fill chip showing the current selection; opening it reveals the palette. Only the in-grid preset swatches are rounded-full.

ExamplesCopy Anchor Link

PaletteCopy Anchor Link

The colors are data backed by semantic tokens. The default palette exposes stable hue names (green, blue, rose, …), and each swatch uses VegaStack semantic CSS variables — info, status, neutral, and chart tokens — rather than raw Tailwind palette variables. Pass your own colors to override:

import { ColorPicker, type ColorOption } from "@/components/ui/color-picker";

const palette: ColorOption[] = [
  { name: "info", label: "Info", color: "var(--color-info)" },
  { name: "accent", label: "Accent", color: "var(--color-accent)" },
  { name: "danger", label: "Danger", color: "var(--color-destructive)" },
];

<ColorPicker
  value="blue"
  onValueChange={setColor}
  colors={palette}
  columns={3}
/>;

Each ColorOption is { name, label, color }:

• name — the stable value the picker emits and matches selection against.
• label — the swatch's accessible name (aria-label) and tooltip.
• color — a CSS color value. Prefer semantic variables like var(--color-info) or var(--color-chart-2). Arbitrary CSS colors are reserved for dynamic user-authored palette data; this is the one place the design system renders a dynamic swatch fill via inline style={{ backgroundColor }}. Every other style (sizing, borders, focus, spacing) uses semantic tokens.

DEFAULT_COLORSCopy Anchor Link

When you omit colors, the picker renders the exported DEFAULT_COLORS palette — 12 named options, each mapped to a VegaStack semantic token (status, neutral, or chart series) so the registry component never ships raw Tailwind palette variables:

StatesCopy Anchor Link

Default (a selection chosen), empty (no selection yet — a transparent trigger), and disabled.

Custom paletteCopy Anchor Link

Pass colors to render your own curated set — here a 3-color tag palette in a 3-wide grid.

Hue palette, inlineCopy Anchor Link

HUE_COLORS is the ten tag hues — the exact colours Chip, Avatar and IconGlyph draw — so the stored value ("blue", "purple"…) is a hue those components take. variant="inline" renders the swatches in the page with no trigger, and onClear adds a separate clear action, selected while value matches no hue. Pick columns so the row fits its container (six wraps the eleven swatches onto two rows at a phone's width).

ColumnsCopy Anchor Link

columns sets the swatch-grid width (default 6), driving the dynamic --swatch-cols grid template. Below: the default 12-color palette at columns={4}, 7, and 14.

API ReferenceCopy Anchor Link

ColorPickerCopy Anchor Link

ColorOptionCopy Anchor Link

The shape of each entry in a colors palette.

AccessibilityCopy Anchor Link

• The trigger is a Button with an accessible name (aria-label, default "Pick a color"); customize it to describe what the color is for (e.g. "Label color").
• Each preset is a <button> labelled by its color name, grouped in a role="group" labelled "Colors". The selected swatch carries aria-pressed="true" and uses a persistent outer-cell border, leaving the colour fill unobscured.
• The picker opens on trigger click; focus moves into the grid and is restored to the trigger on close.
• Dismiss is built in — clicking outside the panel or pressing Esc closes it.
• Every control keeps the global keyboard-focus background tint from base.css; no component adds a focus ring or changes its border on focus.

Do / Don'tCopy Anchor Link