Color Picker

Basic

The basic color picker allows users to select a color.

Installation

npx shadcn@latest add @intentui/color-picker

Composed components

Manual installation

npm i react-aria-components @intentui/icons

Anatomy

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

<ColorPicker
  label="Theme Color"
  description="Snag a color for the app theme"
  defaultValue="hsl(216, 98%, 52%)"
/>

Enable format selection

Enable users to select the format of the color value (e.g., RGB, HSL).

Combination

Combine both swatch and selection format options in the color picker.

Eye dropper

Add an eye dropper button to the color picker to allow users to select a color from the screen.

Label

Add a label to the color picker for better accessibility and user guidance.

Dynamic label

Dynamically update the label based on the selected color.

import { ColorPicker, defaultColor } from "@/components/ui/ui"

const [color, setColor] = useState(defaultColor)
return <ColorPicker label={color.toString('hex')} value={color} onChange={setColor} />

Description

Include a description to provide additional information or instructions.

Controlled

Control the selected color with the value prop to sync it with your application's state.

Disabled

Disable the color picker by setting the isDisabled prop, making it non-interactive.