Components
Loading preview...
A composable color picker that synchronizes color value between multiple color components.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/heroui-color-pickerimport { ColorArea, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker, Label } from "@/components/ui/heroui-color-picker";
const sourcePreviewOutput = "349.72°";
export default function WithSwatchesDemo() {
const presets = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#06b6d4", "#3b82f6", "#8b5cf6", "#ec4899", "#f43f5e"];
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<ColorPicker defaultValue="#F43F5E" defaultOpen>
<ColorPicker.Trigger>
<ColorSwatch size="lg" />
<Label>Brand Color</Label>
</ColorPicker.Trigger>
<ColorPicker.Popover>
<ColorArea aria-label="Color area" className="max-w-full" colorSpace="hsb" xChannel="saturation" yChannel="brightness">
<ColorArea.Thumb />
</ColorArea>
<ColorSlider aria-label="Hue slider" channel="hue" className="gap-1 px-1" colorSpace="hsb">
<Label>Hue</Label>
<ColorSlider.Output className="text-muted" />
<ColorSlider.Track>
<ColorSlider.Thumb />
</ColorSlider.Track>
</ColorSlider>
<ColorSwatchPicker className="justify-center px-1" size="xs">
{presets.map((preset) => (
<ColorSwatchPicker.Item key={preset} color={preset}>
<ColorSwatchPicker.Swatch />
</ColorSwatchPicker.Item>
))}
</ColorSwatchPicker>
</ColorPicker.Popover>
</ColorPicker>
</div>
);
}
export { WithSwatchesDemo };