Components
Loading preview...
A list of color swatches that allows users to select a color from a predefined palette.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-color-swatch-picker"use client";
import {useState} from "react";
import {ColorSwatchPicker, parseColor} from "@/components/ui/heroui-color-swatch-picker";
const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];
export default function ControlledDemo() {
const [value, setValue] = useState(parseColor("#F43F5E"));
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex flex-col gap-4">
<ColorSwatchPicker value={value} onChange={setValue}>
{colors.map((color) => (
<ColorSwatchPicker.Item key={color} color={color}>
<ColorSwatchPicker.Swatch />
<ColorSwatchPicker.Indicator />
</ColorSwatchPicker.Item>
))}
</ColorSwatchPicker>
<p className="text-sm text-muted" aria-label="Selected: #F43F5E">
Selected: <span className="font-medium">{value.toString("hex")}</span>
</p>
</div>
</div>
);
}
export {ControlledDemo};