OPEN SOURCE · SHADCN REGISTRY
A color picker
for shadcn/ui.
A compact React color picker that fits a shadcn project. Install the source, change the Tailwind classes, and keep the component in your codebase.
Used for buttons, links, and focus rings.
Visitors in the last 7 days
#7C3AED01 / INSTALL
One command.
The source is yours.
The shadcn CLI adds the component, its popover and button dependencies, and react-colorful. It respects the aliases in your components.json.
npx shadcn@latest add https://convertfa.st/r/color-picker.jsonAlready using ConvertFast? npx convertfast-ui@latest block add color-picker works too.
"use client"
import { useState } from "react"
import { ColorPicker } from "@/components/color-picker"
export function BrandColorField() {
const [color, setColor] = useState("#7C3AED")
return (
<ColorPicker
value={color}
onValueChange={setColor}
name="brandColor"
/>
)
}02 / USE IT
Controlled when you need it. Simple when you do not.
Pass value and onValueChange to connect the picker to application state. For a settings form, pass name and the component adds a hidden input with the current hex value.
- Hex, shorthand hex, and eight-digit hex input
- Optional alpha channel with
showAlpha - Custom preset colors
- Keyboard focus and labeled controls
03 / API
The props you will actually use.
All color values normalize to uppercase hex. Invalid typed values reset to the last valid color when the field loses focus.
| Prop | Type | What it does |
|---|---|---|
value | string | Controlled hex color |
defaultValue | string | Initial uncontrolled value |
onValueChange | (value: string) => void | Runs when the selected color changes |
showAlpha | boolean | Adds alpha and returns #RRGGBBAA |
presets | string[] | Replaces the default preset swatches |
name | string | Adds a hidden form field |
COMMON QUESTIONS
About this shadcn color picker.
Does shadcn/ui include a color picker?
The official component catalog does not currently include one. This component follows the same source-owned approach and composes shadcn's Button and Popover.
Can I use it without alpha?
Yes. Alpha is off by default, so the picker returns six-digit hex values. Set showAlpha when your UI needs transparency.
Can I change the design?
Yes. The registry installs a TSX file into your project. Edit its Tailwind classes, preset list, labels, or API like any other local component.
READY TO USE