design-infraReport a problem or share feedback← Catalog
Color Picker
curatedtheme-awarefreekibo-ui/color-picker
Allows users to select a color. Modeled after the color picker in Figma.
drop-inTrustworthyTechnical
$
npx shadcn@latest add @kibo-ui/color-pickernpm deps: color, lucide-react, radix-ui
Our notes
Figma-style colour picker (saturation/hue/alpha/eyedropper/format). Surfaces use tokens; the colour gradients are intrinsic.- Source
- Kibo UI
- Kind
- component
- Categories
- input
- Use as
- drop-in — replaces your component
- Applies to
- input
- Motion
- not tagged (static or unknown)
- Licence
- MIT (shadcnblocks/kibo, originally Hayden Bleasel). Premium blocks are sold at shadcnblocks.com — not catalogued.
- Live demo
- www.kibo-ui.com
- Docs
- www.kibo-ui.com
Similar
Compare all 4 →- Image Cropper: upload, file, imageoriginui/comp-554Avatar upload with crop dialog + zoom slider. Uses Origin's cropper primitive and use-file-upload hook.
- Dropzonekibo-ui/dropzoneFile dropzone (react-dropzone) with empty/content states. Token-based; pairs with stock shadcn forms.
- Editorkibo-ui/editorTipTap rich-text editor with slash commands, bubble menu, tables. Token-based UI but ~18 tiptap/lowlight deps — only when you truly need rich text.