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

"use client";

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

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

export default function ControlledDemo() {
  const [value, setValue] = useState(parseColor("#F43F5E"));

  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-4">
        <ColorSwatchPicker value={value} onChange={setValue}>
          {colors.map((color) => (
            <ColorSwatchPicker.Item key={color} color={color}>
              <ColorSwatchPicker.Swatch />
              <ColorSwatchPicker.Indicator />
            </ColorSwatchPicker.Item>
          ))}
        </ColorSwatchPicker>
        <p className="text-sm text-muted" aria-label="Selected: #F43F5E">
          Selected: <span className="font-medium">{value.toString("hex")}</span>
        </p>
      </div>
    </div>
  );
}

export {ControlledDemo};