ColorSwatchPicker

Component 3

About

A list of color swatches that allows users to select a color from a predefined palette.

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

Code

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

Usage.tsx

import {ColorSwatchPicker} from "@/components/ui/heroui-color-swatch-picker";

const colors = ["#F43F5E", "#D946EF", "#8B5CF6", "#3B82F6", "#06B6D4", "#10B981", "#84CC16"];

export default function VariantsDemo() {
  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">
        <div className="flex flex-col gap-2">
          <span className="text-sm text-muted">Circle (default)</span>
          <ColorSwatchPicker variant="circle">
            {colors.map((color) => (
              <ColorSwatchPicker.Item key={color} color={color}>
                <ColorSwatchPicker.Swatch />
                <ColorSwatchPicker.Indicator />
              </ColorSwatchPicker.Item>
            ))}
          </ColorSwatchPicker>
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-sm text-muted">Square</span>
          <ColorSwatchPicker variant="square">
            {colors.map((color) => (
              <ColorSwatchPicker.Item key={color} color={color}>
                <ColorSwatchPicker.Swatch />
                <ColorSwatchPicker.Indicator />
              </ColorSwatchPicker.Item>
            ))}
          </ColorSwatchPicker>
        </div>
      </div>
    </div>
  );
}

export {VariantsDemo};