Components
HeroUI v3 ColorPicker is a trigger + popover color picker that composes a swatch trigger with an interactive picker surface — color area, sliders, fields and swatch presets — for selecting a color in any format. Built on the real @heroui/react package with @heroui/styles, it supports controlled and uncontrolled value, editable channel fields, hue/alpha sliders, and preset swatches. A thin re-export of the upstream component so consumers install and render the genuine HeroUI primitive.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-color-pickerLoading preview...
"use client"
import { ColorArea, ColorSlider, ColorSwatch, ColorSwatchPicker, Label } from "@heroui/react"
import { ColorPicker } from "@/components/ui/heroui-color-picker"
export function WithSwatches() {
const presets = [
"#ef4444",
"#f97316",
"#eab308",
"#22c55e",
"#06b6d4",
"#3b82f6",
"#8b5cf6",
"#ec4899",
"#f43f5e",
];
return (
<ColorPicker defaultValue="#F43F5E">
<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>
);
}
export default WithSwatches
Loading preview...
Loading preview...
Loading preview...
Loading preview...