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"];
export default function StackLayoutDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<ColorSwatchPicker layout="stack">
{colors.map((color) => (
<ColorSwatchPicker.Item key={color} color={color}>
<ColorSwatchPicker.Swatch />
<ColorSwatchPicker.Indicator />
</ColorSwatchPicker.Item>
))}
</ColorSwatchPicker>
</div>
);
}
export {StackLayoutDemo};