Color picker

Selects a color with a color area, hue slider, and hex field in a popover.

color-picker-demo.tsx

"use client";import { ColorPicker } from "@/components/vip-ui/color-picker";export function ColorPickerDemo() {  return <ColorPicker label="Accent color" defaultValue="#4169bd" />;}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-color-picker.json

Controlled value

Selected: #4169BD

color-picker-controlled-demo.tsx

"use client";import { useState } from "react";import { parseColor } from "react-aria-components";import { ColorPicker } from "@/components/vip-ui/color-picker";export function ColorPickerControlledDemo() {  const [color, setColor] = useState(() => parseColor("#4169bd"));  return (    <div className="grid justify-items-start gap-4">      <ColorPicker label="Accent color" value={color} onChange={setColor} />      <output className="text-sm text-muted-foreground">        Selected: <span className="font-mono">{color.toString("hex")}</span>      </output>    </div>  );}

API reference

vip/ui adds or changes the props below. For all other props, see React Aria ColorPicker (opens in a new tab).

label: string = "Choose color": Text on the trigger. The popover uses it in its accessible name.
children: ReactNode: Replaces the default trigger and popover. Without it, ColorPicker shows its built-in layout.