For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
1
Sponsor

ColorPicker

PreviousNext

Visual color selection with HEX editing and validation.

Preview

#6B97FF

Installation

$ pnpm dlx shadcn@latest add https://ui.ketyap.me/r/color-picker.json

Usage

import { ColorPicker } from "@/components/ui/color-picker";
 
<ColorPicker defaultValue="#6B97FF" />;

API Reference

value / defaultValue: a 3 or 6 digit HEX color. onValueChange receives normalized 6 digit HEX values while dragging or after a HEX edit. onValueCommit fires after a slider gesture, a swatch selection, or a changed HEX value is confirmed with Enter or blur. Invalid HEX text is marked while editing and reverts on confirmation.

swatches: an array of { name, value } colors; pass [] to hide presets. size: default or compact, otherwise inherited. disabled disables interaction. aria-label names the picker. className styles the trigger wrapper.

Open the picker to drag the color plane and hue slider. Tab to saturation, brightness, hue, HEX, or suggested colors; use arrow keys on sliders and the swatch grid, and Enter or Space to select a swatch. Escape closes the popup and returns focus to the trigger. The color plane uses Base UI Slider for both keyboard axes. Button, Input, and Popover inherit the existing size, shape, icon, motion, and surface foundations.

The screen eyedropper appears beside HEX when the browser supports EyeDropper. Canceling it leaves the color unchanged. The layout and 18-color palette follow Blode UI Color Picker, composed with Ketyap UI foundations.