Components
Loading preview...
A visual preview of a color value with accessibility support.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-color-swatch"use client";
import { ColorSwatch } from "@/components/ui/heroui-color-swatch";
const colors = ["#0485F7", "#EF4444", "#F59E0B", "#10B981", "#D946EF"];
export default function ColorSwatchCustomStyles() {
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-10">
<div className="flex items-center gap-4">
<span className="w-24 text-sm text-muted-foreground">Glow Effect</span>
<div className="flex items-center gap-4">
{colors.map((color) => (
<ColorSwatch
key={`glow-${color}`}
color={color}
size="xl"
style={({ color }) => ({
boxShadow: `0 0 20px 2px ${color.value}`,
})}
/>
))}
</div>
</div>
<div className="flex items-center gap-4">
<span className="w-24 text-sm text-muted-foreground">Gradient</span>
<div className="flex items-center gap-4">
{colors.map((color) => (
<ColorSwatch
key={`gradient-${color}`}
color={color}
size="xl"
style={({ color }) => ({
background: `linear-gradient(135deg, ${color.toString("css")}, white)`,
})}
/>
))}
</div>
</div>
</div>
</div>
);
}
export { ColorSwatchCustomStyles };