Color Picker

Color Picker lets people choose any custom color, such as a brand or theme color. Placed as the last swatch of a palette, it ends a fixed set with a custom choice.

Install

bashnpx shadcn@4.18.0 add @siteplane/color-picker

Import it from @/siteplane/components/color-picker. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Color Swatch Picker: Pick Color Swatch Picker when the choice is limited to a fixed palette.
• vs Input: Pick Input only if people paste hex values and never need to pick by eye.

Rules

• Expect lowercase hex strings from onValueChange; there is no alpha channel.
• Keep an accessible name when hiding the value with showValue={false}.
• Use variant="swatch" with selected to end a Color Swatch Picker row with a custom color.
• required will not block submission, because the picker always holds a color.
• Use readOnly to show a fixed color and disabled to remove it from the form.

Reference

• Color Picker docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Date & color. Read the installed source under src/siteplane before relying on an API.