Color Picker

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

Basic

The basic color picker allows users to select a color.

Installation

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

npm i 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>