Color Picker

ColorPicker

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 cn

Anatomy

Compose ColorPicker with a custom button and a controlled Popover. Keep the selected color state separate from the popover's open state.

"use client"

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

export default function ColorPickerExample() {
  const [color, setColor] = useState(parseColor("#0d6efd"))
  const [isOpen, setIsOpen] = useState(false)
  const triggerRef = useRef<HTMLButtonElement>(null)
  return (
    <ColorPicker value={color} onChange={setColor} defaultValue="rgb(120,140,200)">
      <Button
        ref={triggerRef}
        aria-haspopup="dialog"
        aria-expanded={isOpen}
        onPress={() => setIsOpen(true)}
        intent="plain"
        data-slot="control"
      >
        <ColorSwatch />
        Select color
      </Button>
      <Popover
        aria-label="Choose color"
        triggerRef={triggerRef}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        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>
      </Popover>
    </ColorPicker>
  )
}

The button forwards its ref to Popover through triggerRef. Pass isOpen and onOpenChange to the popover, and use aria-haspopup="dialog" and aria-expanded={isOpen} on the button. See the Popover anatomy for the complete trigger pattern.