Color Picker React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Color Picker is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import ColorPicker from @/components/ui/color-picker.

import { useState } from "react"
import { ColorPicker } from "@/components/ui/color-picker"

export function StoreColor() {
  const [color, setColor] = useState("#FC4C01")
  return (
    <ColorPicker
      label="Primary color"
      description="The store's buttons and links use this color."
      value={color}
      onValueChange={setColor}
      onValueCommit={(saved) => console.log("saved", saved)}
      name="primary_color"
      placeholder="Choose a brand color"
      sheetTitle="Brand color"
      labels={{ swatches: "Brand presets", done: "Apply" }}
    />
  )
}

Props

• labeldefault ""
  ReactNode

  The field label. The trigger reads it with the value ("Primary color, #FC4C01"); plain text also titles the phone sheet.

• descriptiondefault ""
  ReactNode

  Helper text under the field, linked with aria-describedby.

• errordefault ""
  ReactNode

  Replaces the description with an animated error and marks the field invalid.

• requireddefault false
  boolean

  The red mark after the label and aria-required on the trigger.

• invaliddefault false
  boolean

  The invalid look and aria-invalid without a message.

• disableddefault false
  boolean

  Dims the field and never opens the panel; the hidden input is not submitted.

• readOnlydefault false
  boolean

  The color stays visible and the trigger focusable, but the panel never opens (inline: nothing can change).

• defaultValuedefault ""
  string

  The starting color while uncontrolled, any CSS color we can read ("#FC4C01", "rgb(252 76 1)", "hsl(18 99% 50%)", "red"). A form reset returns to it.

• value
  string

  The color, controlled, as a CSS color in format ("" is empty). A value in another format is shown as given and re-emitted in format on the next change.

• onValueChange
  (value: string) => void

  Called with the new color in format: live while dragging (at most once per frame), after a typed value, a swatch or the eyedropper. On phones only when Done is pressed.

• onValueCommit
  (value: string) => void

  Called when a change is final: pointer up after a drag, Enter or blur in a field, a swatch, an eyedropper pick, a key in the square, the sheet's Done. Save here.

• formatdefault "hex"
  "hex" | "rgb" | "hsl"

  The output: "#FC4C01", "rgb(252, 76, 1)" or "hsl(18, 99%, 50%)". Also the fields the panel shows first; the panel's switch only changes the fields. The exported parseColor(text) and formatColor(hsva, format, alpha) do the same conversions for your own code.

• alphadefault false
  boolean

  An opacity slider and an opacity field. Hex becomes #RRGGBBAA below 100% opacity; rgb and hsl always become rgba() / hsla(). Off, colors are always opaque.

• swatchesdefault "["#0A0A0A", "#525252", "#A3A3A3", "#FFFFFF", "#EF4444", "#F97316", "#F59E0B", "#EAB308", "#84CC16", "#22C55E", "#14B8A6", "#0EA5E9", "#3B82F6", "#6366F1", "#8B5CF6", "#EC4899"]"
  string[]

  Preset colors in a grid of 8 per row. Defaults to the exported COLOR_PICKER_SWATCHES: 16 colors (neutrals, red, orange, amber, yellow, lime, green, teal, sky, blue, indigo, violet, pink), easy to extend. [] hides the row.

• showInputsdefault true
  boolean

  The format switch, the text fields and the eyedropper under the sliders.

• showFormatSwitchdefault true
  boolean

  The HEX / RGB / HSL segmented control above the fields.

• showEyeDropperdefault true
  boolean

  The pipette button. It only renders where the browser has window.EyeDropper (Chrome and Edge on desktop), so it never appears broken.

• inlinedefault false
  boolean

  Renders the panel in place (settings pages): no trigger, no popover, no sheet. Changes apply at once.

• triggerdefault "field"
  "field" | "swatch"

  A field box with a color chip and the value, or a round swatch button sized like an icon button (toolbars, compact forms).

• placeholderdefault "Pick a color"
  string

  The trigger's text while empty (with a checkerboard chip).

• labels
  Partial<{ area; saturation; brightness; hue; alpha; hex; red; green; blue; hueInput; lightness; format; eyeDropper; swatches; done; trigger: string }>

  Every spoken and visible string, merged over English defaults ("Saturation and brightness", "Hue", "Opacity", "Done"...). trigger names the trigger when there is no label ("Color, #FC4C01").

• sizedefault "md"
  "sm" | "md" | "lg"

  Trigger heights of 32, 40 and 48px (md is 44px on touch screens); the swatch button is square at the same sizes.

• variantdefault "soft"
  "soft" | "outline" | "underline" | "ghost"

  The field box look (trigger field): a tinted fill, a border, a bottom line, or nothing until hover.

• radiusdefault "md"
  "none" | "sm" | "md" | "lg" | "full"

  Corner radius of the field, scaled per size like the button; full also makes the color chip round. Ignored by underline.

• namedefault ""
  string

  Renders a hidden input with this name and the color text, for native forms.

• defaultOpendefault false
  boolean

  Starts with the panel (or the sheet) open. Pass open and onOpenChange to control it.

• open
  boolean

  Whether the panel or sheet is open, controlled. It never opens while disabled or readOnly.

• onOpenChange
  (open: boolean) => void

  Called when the panel or sheet opens or closes.

• responsivedefault true
  boolean

  Below 768px the panel opens in a bottom sheet with a Done button that commits the draft. Off, phones get the popover too.

• sheetTitledefault "Pick a color"
  string

  The phone sheet's title (and the popover's accessible name) when the label is not plain text or missing.

• sidedefault "bottom"
  "top" | "right" | "bottom" | "left"

  Where the panel opens; it flips when there is no room.

• aligndefault "start"
  "start" | "center" | "end"

  How the panel lines up with the trigger.

• container
  HTMLElement | null

  Portal target of the panel and the sheet; defaults to document.body.

• fieldProps
  Partial<FieldProps>

  Anything else for the Field wrapper: optional, labelAction, orientation, labelWidth, hideLabel.

• id
  string

  The trigger's id (the panel's with inline); generated when left out.

• classNames
  Partial<Record<"field" | "label" | "description" | "error" | "counter" | "trigger" | "swatch" | "value" | "chevron" | "content" | "panel" | "area" | "thumb" | "hue" | "alpha" | "preview" | "inputs" | "format" | "input" | "eyedropper" | "swatches" | "swatchOption" | "footer", string>>

  Extra classes for the inner parts. content is the popover or the sheet, thumb the square's thumb, input every text field in the panel.

• className
  string

  Extra classes for the outermost element: the Field when there is a label or message, else the trigger (or the inline panel).

• ref
  Ref<HTMLButtonElement> (a useRef object or an (el) => void callback)

  The trigger button. Other props (onBlur, autoFocus, aria-*, data-*) land on it too.

Parts

FAQ

Used in

More React input components