Color Picker

A swatch grid and hex input for picking colors.

Install

npx shadcn add @clearly/color-picker

Preview

Live Color Picker component — see usage below.

Usage

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

<ColorPicker />

Every Clearly component also accepts glass (subtle·medium·strong), specular and className.

Props

PropTypeDefaultDescription
valuestringSelected hex color (e.g. "#4CB880").
onChange(hex: string) => voidFires when a swatch or valid hex is picked.