A versatile UI component that provides multiple ways to choose colors, including sliders, swatches, and manual input, for comprehensive color selection.

RAC

Installation

Install the component via the CLI in one command.

npm

pnpm

yarn

bun

npx shadcn@latest add @intentui/color-picker

Composed components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

color picker popover button color swatch color area color slider color thumb color field input

Manual installation

Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.

npm

pnpm

yarn

bun

npm install react-aria-components @heroicons/react

Anatomy

import { ColorPicker } from "@/components/ui/color-picker";
import { Popover, PopoverBody, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { ColorSwatch } from "@/components/ui/color-swatch";
import { ColorArea } from "@/components/ui/color-area";
import { ColorSlider, ColorSliderTrack } from "@/components/ui/color-slider";
import { ColorThumb } from "@/components/ui/color-thumb";
import { ColorField } from "@/components/ui/color-field";
import { Input } from "@/components/ui/input";

<ColorPicker defaultValue="rgb(120,140,200)">
  <Popover>
    <Button intent="plain" data-slot="control">
      <ColorSwatch />
      Select color
    </Button>
    <PopoverContent className="[--gutter:--spacing(1)]">
      <PopoverBody>
        <div className="space-y-(--gutter)">
          <ColorArea
            colorSpace="rgb"
            defaultValue="rgb(120,140,200)"
            xChannel="red"
            yChannel="green"
            xName="red"
            yName="green"
          />
          <ColorSlider colorSpace="hsb" channel="hue">
            <ColorSliderTrack>
              <ColorThumb />
            </ColorSliderTrack>
          </ColorSlider>
          <ColorField aria-label="Color">
            <Input />
          </ColorField>
        </div>
      </PopoverBody>
    </PopoverContent>
  </Popover>
</ColorPicker>

Examples

Controlled

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

hex#0D6DFD

hexa#0D6DFDFF

rgbrgb(13, 109, 253)

rgbargba(13, 109, 253, 1)

hslhsl(216, 98%, 52%)

hslahsla(216, 98%, 52%, 1)

hsbhsb(216, 94.99%, 99.04%)

hsbahsba(216, 94.99%, 99.04%, 1)

Disabled

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

Component API

ColorPicker

The ColorPicker component coordinates color input controls.

Prop	Type	Default
`className`	`string`	-

EyeDropper

The EyeDropper component lets users pick a color from the screen when the browser supports it.

See the React Aria for the full API reference.

Unlock the full power of
Intent UI Design

Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.

Learn more

Color Field

Color Slider