Color Swatches

Forms

About

A radio-group style color picker that lets a user choose one color from a row of swatches, with keyboard navigation and native form support.

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

Code

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

Usage.tsx

import { ColorSwatches } from "@/components/ui/color-swatches";

export default function ColorSwatchesDemo() {
  return (
    <ColorSwatches
      aria-label="Sail colour"
      defaultValue="brass"
      colors={[
        { value: "brass", color: "#d9b06a", label: "Brass" },
        { value: "sea", color: "#6fb3c2", label: "Sea" },
        { value: "coral", color: "#e07a5f", label: "Coral" },
        { value: "slate", color: "#6b7280", label: "Slate", disabled: true },
      ]}
    />
  );
}