Color Picker

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/color-picker.json

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

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.

State

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.

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>

State

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

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.

State

Disabled

Set disabled to prevent user interaction.

Examples

Custom Size

Customize swatch size using the size-* utility class 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

Usage

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

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

Examples

Color Channels

With Dots

Slider

Usage

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

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

Controlled

State

Disabled

Examples

Alpha Channel

HSL Channels

HSBA Channels

RGB Channels

Vertical

Custom spacing

Use [--space:--spacing("value")] on <ColorPickerContent /> to adjust popover padding (default --spacing(3)).

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.