Color picker

A swatch that grows into a picker with format morphing, eyedropper, saved swatches, and contrast readout.

$npx shadcn@latest add @silicon-ui/color-picker

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/color-picker

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/color-picker/color-picker.tsx
- components/silicon-ui/color-picker/color-picker.module.css
- components/silicon-ui/text-morph/text-morph.tsx shared
- components/silicon-ui/text-morph/text-morph.module.css shared
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ColorPicker } from "@/components/silicon-ui/color-picker/color-picker";

Prop	Type	Default
`value` Any color the picker can read: hex, rgb(), hsl(), or oklch().	`string`	—
`defaultValue`	`string`	`"#2F6BFF"`
`onValueChange` Receives the color as hex, with two alpha digits when it is not opaque.	`(hex: string) => void`	—
`background` The background the color will sit on, for the contrast readout.	`string`	`"#FFFFFF"`
`label` Name shown on the swatch, such as "Accent".	`string`	`"Color"`
`swatches`	`ColorSwatch[]`	—
`defaultSwatches`	`ColorSwatch[]`	—
`onSwatchesChange`	`(swatches: ColorSwatch[]) => void`	—
`maxSwatches` Most saved swatches. Saving past it drops the oldest.	`number`	`7`
`defaultFormat`	`ColorFormat` `"hex""rgb""hsl""oklch"`	`"hex"`
`className`	`string`	—