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 DefaultValueDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
      <ColorSwatchPicker defaultValue="#8B5CF6">
        {colors.map((color) => (
          <ColorSwatchPicker.Item key={color} color={color}>
            <ColorSwatchPicker.Swatch />
            <ColorSwatchPicker.Indicator />
          </ColorSwatchPicker.Item>
        ))}
      </ColorSwatchPicker>
    </div>
  );
}

export {DefaultValueDemo};