Color Picker

RAC
Color FieldColor Slider
Loading...

Installation

Install the component via the CLI in one command.

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 pickerpopoverbuttoncolor swatchcolor areacolor slidercolor thumbcolor fieldinput

Manual installation

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

npm install react-aria-components @heroicons/react tailwind-merge

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.

Loading...

Disabled

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

Loading...

Component API

ColorPicker

The ColorPicker component coordinates color input controls.

PropTypeDefault
classNamestring-

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