- Components24
- Autocomplete
- Location Input
- Signature Input
- Signature Pad
- Credit Card
- Masked Input
- Color Picker
- Tag / Token Input
- Emoji Picker
- Transfer List
- Tree Select
- Image Upload / Dropzone
- Cron Expression Builder
- Inline Editable Field
- Sortable List Input
- Schedule / Availability Picker
- Phone Input
- Datetime Picker
- Smart Datetime Input
- File Upload
- Tags Input
- Multi Select
- Password Input
- Rating
Color Picker
Figma-like color picker with saturation/value canvas, hue + alpha sliders, format switching, eyedropper, and swatches.
Color Picker
Figma-like color picker with saturation/value canvas, hue + alpha sliders, format switching, eyedropper, and swatches.
Preview
Features
- 2D saturation/value color plane with draggable thumb.
- Hue slider and alpha slider with live gradient tracks.
- Format input modes: Hex, RGB, and HSL.
- EyeDropper API support when available in the browser.
- Returns a CSS-safe hex/hexa color string via onChange.
Installation
npx shadcn@latest add https://www.shadcn-form.com/r/color-picker.json
The CLI installs every dependency listed in the registry item.
Usage
import { ColorPicker } from '@/components/ui/color-picker'const [color, setColor] = React.useState('#7c3aed')<ColorPicker value={color} onChange={setColor} />
Current value: #7C3AED