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

ColorPicker

Basic

The basic color picker allows users to select a color.

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.

This component comes packed with several components to enhance functionality and provide a seamless experience.

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>