Glass UI
GitHub

Color Picker

A compact color control for theme tokens, accents, and lightweight visual settings.

AccentBrand token
#7c3aed

ColorPicker is the compact primitive for this library: a native color well presented as a small glass swatch button that fits settings panels, token pickers, and toolbar controls.

Use it for theme accents, semantic token editing, and small customization flows. Compose it with Input when you also need direct hex editing. If you need gradients, alpha channels, or a full design-tool canvas, reach for a specialized picker instead.

Installation

npx @glass-ui-kit/cli add color-picker

Usage

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


export default function App() {
  return <ColorPicker aria-label="Accent color" defaultValue="#7c3aed" />
}

Examples

Controlled

Use value and onValueChange when a token editor or settings form owns the current color. Add Input beside it when users should edit the hex value directly.

Current token#0ea5e9

Styling

Color Picker keeps the API intentionally small. Reach for size first, then use className or native color-input props when you need local adjustments.

/* Sizes */
<ColorPicker size="sm" />
<ColorPicker size="md" />
<ColorPicker size="lg" />


/* Controlled state */
<ColorPicker value={value} onValueChange={setValue} />


/* Native input props */
<ColorPicker aria-label="Accent color" name="accentColor" />

API Reference

ColorPicker

PropType
valuestring
defaultValuestring
onValueChange(value: string) => void
disabledboolean
size"sm" | "md" | "lg"
Native color input propsInputHTMLAttributes<HTMLInputElement>
swatchAriaLabelstring
classNamestring

ColorPicker normalizes controlled and uncontrolled values to lowercase six-digit hex values. Three-digit values like #abc are expanded to #aabbcc, and invalid incoming values fall back to the default swatch color.

Accessibility and composition

Pass aria-label for standalone use, or pair ColorPicker with an external <label> when it lives inside a field row. Use swatchAriaLabel if you want a dedicated accessible name without setting the generic input prop directly.

Collapsible Dialog