For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Color picker

Verified

Swatches to choose from and a hex field for any other color.

When to use

Use when: Choosing a color from a few swatches or by hex value.
Avoid when: Picking from gradients or an image; this has no canvas.

Installation

bunx shelf add color-picker

The source lands in src/components/ui/color-picker.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

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

<ColorPicker aria-label="Accent color" value={color} onValueChange={setColor} />

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, Input, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: Optional native Figma library. See Designers.

Verified

Size: 1.9 kB gzipped on its own, 17 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 3 stories
Behavior: 3 interaction tests in Storybook
React Doctor: React Doctor finds nothing