Color Picker

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/color-picker

Modes#

You can use multiple modes to build the color picker that fits your needs:

• Input for hex or channel editing
• Popover for area and slider selection
• Swatch picker for preset colors
• Area standalone component for color selection
• Slider for color adjustment

Input#

Anatomy#

ColorPicker
├── ColorPickerControl
│   └── InputGroup
│       ├── ColorPickerTrigger
│       │   └── ColorPickerSwatchPreview
│       └── ColorPickerInput
└── ColorPickerContent
    ├── ColorPickerArea
    │   └── ColorPickerAreaThumb
    └── ColorPickerView
        └── ColorPickerSlider

Usage#

import {
  ColorPicker,
  ColorPickerInput,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerInput asChild channel="hex">
    <Input />
  </ColorPickerInput>
</ColorPicker>

Controlled#

Use the value and onValueChange props to programmatically control the color picker's state.

States#

Invalid#

Disabled#

Examples#

With Field#

Channel Editing#

With Swatch#

Input with ColorPickerSwatchPreview showing the current color alongside the hex input.

With Popover#

An input with trigger and popover content for area, hue, and alpha selection.

Compact#

Inspired by Figma's color input.

Popover#

Color picker with trigger and popover content.

Anatomy#

ColorPicker
├── ColorPickerControl
│   └── ColorPickerTrigger
└── ColorPickerContent
    ├── ColorPickerArea
    │   └── ColorPickerAreaThumb
    ├── ColorPickerView
    │   ├── ColorPickerEyeDropperTrigger
    │   └── ColorPickerSlider
    │       └── ColorPickerTransparencyGrid
    └── ColorPickerSwatchGroup
        └── ColorPickerSwatchTrigger
            └── ColorPickerSwatch

Usage#

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
  ColorPickerContent,
  ColorPickerEyeDropperTrigger,
  ColorPickerSlider,
  ColorPickerTrigger,
  ColorPickerTransparencyGrid,
  ColorPickerView,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerTrigger />
  <ColorPickerContent>
    <ColorPickerArea>
      <ColorPickerAreaThumb />
    </ColorPickerArea>
    <ColorPickerView>
      <ColorPickerEyeDropperTrigger />
      <ColorPickerSlider channel="hue" />
      <ColorPickerSlider channel="alpha">
        <ColorPickerTransparencyGrid />
      </ColorPickerSlider>
    </ColorPickerView>
  </ColorPickerContent>
</ColorPicker>

States#

Disabled#

Set disabled to prevent user interaction.

Examples#

With Eye Dropper#

With Channel Editing#

Popover with area, sliders, and input fields for editing red, green, and blue values.

With Only Sliders#

Popover with hue, saturation, lightness, and alpha sliders only, no color area.

With Swatch Picker#

Popover with preset color swatches for quick selection.

Color Swatch Picker#

Set inline on ColorPicker so swatches render without a popover.

Anatomy#

ColorPicker
└── ColorPickerSwatchGroup
    └── ColorPickerSwatchTrigger
        └── ColorPickerSwatch
            └── ColorPickerSwatchIndicator

Usage#

import {
  ColorPicker,
  ColorPickerSwatchTrigger,
  ColorPickerSwatchGroup,
  ColorPickerSwatch,
  ColorPickerSwatchIndicator,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerSwatchGroup>
    <ColorPickerSwatchTrigger value="#0485F7">
      <ColorPickerSwatch value="#0485F7">
          <ColorPickerSwatchIndicator />
      </ColorPickerSwatch>
    </ColorPickerSwatchTrigger>
  </ColorPickerSwatchGroup>
</ColorPicker>

Controlled#

Use the value and onValueChange props to programmatically control the swatch picker's state.

States#

Disabled#

Set disabled to prevent user interaction.

Examples#

Custom Size#

Customize swatch size using the size-* on ColorPickerSwatchTrigger.

Custom Radius#

Override the default rounded style on ColorPickerSwatchTrigger using the rounded-* utility class.

Custom Indicator#

Replace the default check icon with a custom indicator via the children of ColorPickerSwatchIndicator.

Area#

Set inline on ColorPicker for a standalone color area.

Anatomy#

ColorPicker
└── ColorPickerArea
    └── ColorPickerAreaThumb

Usage#

import {
  ColorPicker,
  ColorPickerArea,
  ColorPickerAreaThumb,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerArea>
    <ColorPickerAreaThumb />
  </ColorPickerArea>
</ColorPicker>

Examples#

Color Channels#

With Dots#

Slider#

Set inline on ColorPicker for standalone sliders. Wrap multiple sliders in ColorPickerView.

Anatomy#

ColorPicker
└── ColorPickerView
    └── ColorPickerSlider
        └── ColorPickerTransparencyGrid

Usage#

import {
  ColorPicker,
  ColorPickerSlider,
} from "@/components/ui/color-picker";

<ColorPicker>
  <ColorPickerSlider channel="hue" />
</ColorPicker>

Controlled#

States#

Disabled#

Examples#

Alpha Channel#

HSL Channels#

HSBA Channels#

RGB Channels#

Vertical#

Custom spacing#

Use [--space:--spacing("value")] on ColorPickerContent to adjust internal spacing.

Default spacing is --spacing(3).

You can use breakpoint utilities to change the internal spacing at different screen sizes.

  md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

ColorPicker#

Root element of the color picker.

ColorPickerTrigger#

Button or element that opens the color picker popover.

ColorPickerContent#

Holds the color picker popover. Displayed in a portal.

ColorPickerControl#

Container for grouping control elements such as area, sliders, and inputs.

ColorPickerView#

Container for sliders and inputs. Can specify format for child value display.

ColorPickerArea#

Two-dimensional color selection area.

ColorPickerAreaThumb#

Draggable thumb within the color area.

ColorPickerSlider#

Slider for adjusting a color channel.

ColorPickerTransparencyGrid#

Checkerboard pattern for transparency. Shown as child of ColorPickerSlider when editing alpha.

ColorPickerEyeDropperTrigger#

Button that activates the native Eye Dropper API to sample colors from the screen.

ColorPickerInput#

Input for displaying and editing a color channel value. Use asChild with a custom input.

ColorPickerSwatchPreview#

Compact swatch that displays the current color. Use inside an input group for input mode.

ColorPickerSwatchGroup#

Container for swatch triggers in swatch picker mode.

ColorPickerSwatchTrigger#

Button that selects a color when clicked. Wraps ColorPickerSwatch and optionally ColorPickerSwatchIndicator.

ColorPickerSwatch#

Color swatch display. Use as a child of ColorPickerSwatchTrigger.

ColorPickerSwatchIndicator#

Check mark or custom icon shown when a swatch is selected. Pass children to customize.

ColorPickerValue#

Displays the current color as formatted text.

ColorPickerValueSwatch#

Displays the current color as a swatch. Use for standalone value preview.

parseColor#

Exported utility to parse color strings. Use for programmatic color handling.

For the complete list of props and additional subcomponents, see the Ark UI Color Picker documentation.