ColorSwatch

Component 4

About

A visual preview of a color value with accessibility support.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds ColorSwatch to your project and fits it to your theme.

Code

How ColorSwatch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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 };