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-pickerimport {ColorSwatchPicker} from "@/components/ui/heroui-color-swatch-picker";
const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];
const sizes = ["xs", "sm", "md", "lg", "xl"] as const;
export default function SizesDemo() {
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-6">
{sizes.map((size) => (
<div key={size} className="flex items-center gap-4">
<span className="w-8 text-sm text-muted">{size}</span>
<ColorSwatchPicker size={size}>
{colors.map((color) => (
<ColorSwatchPicker.Item key={color} color={color}>
<ColorSwatchPicker.Swatch />
<ColorSwatchPicker.Indicator />
</ColorSwatchPicker.Item>
))}
</ColorSwatchPicker>
</div>
))}
</div>
</div>
);
}
export {SizesDemo};