ColorPicker

Controlled color-picker component. Clicking the swatch opens the browser's native color dialog; the hex field accepts manual input. Both inputs stay in sync.

Preview

#3b72e8

Primary Destructive Muted

The demo above is interactive. For token-level editing, open the Theme Builder.

Usage

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

function Example() {
  const [color, setColor] = useState("#3b72e8");

  return <ColorPicker value={color} onChange={setColor} />;
}

Props

Prop	Type	Required	Description
`value`	`string`	✓	Current hex color value (`#rrggbb`).
`onChange`	`(value: string) => void`	✓	Called whenever the color changes.
`className`	`string`	—	Additional Tailwind classes.