Components
Starting preview...
@haydenbleasel
npx shadcn@latest add https://21st.dev/r/haydenbleasel/color-pickerimport {
ColorPicker,
ColorPickerSelection,
ColorPickerHue,
ColorPickerAlpha,
ColorPickerOutput,
ColorPickerEyeDropper,
ColorPickerFormat
} from "@/components/ui/color-picker"
const Demo = () => {
return (
<ColorPicker className="w-full max-w-[300px] rounded-md border bg-background p-4 shadow-sm">
<ColorPickerSelection />
<div className="flex items-center gap-4">
<ColorPickerEyeDropper />
<div className="w-full grid gap-1">
<ColorPickerHue />
<ColorPickerAlpha />
</div>
</div>
<div className="flex items-center gap-2">
<ColorPickerOutput />
<ColorPickerFormat />
</div>
</ColorPicker>
)
}
export default { Demo }