ColorSwatchPicker

Forms 5

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