"use client"
import { ColorPicker } from "@/components/ui/preskok-ui/color-picker"
export function ColorPickerPreskokDemo() {
return (
<div className="flex flex-col gap-2">
<ColorPicker label="Pick color" defaultValue="hsl(216, 98%, 52%)" />
<ColorPicker label="With Eyedropper" eyeDropper />
</div>
)
}
Installation
pnpmnpmyarnbunpnpm dlx @preskok-org/ui@latest add color-picker
Usage
import { ColorPicker } from "@/registry/preskok/ui/preskok-ui/color-picker"
export function ColorPickerDemo() {
return <ColorPicker label="Pick a color" defaultValue="hsl(216, 98%, 52%)" />
}Notes
- EyeDropper API: enable
eyeDropperprop to render an eyedropper button when supported. - Slots: customize content by passing children (e.g., your own sliders or fields).