Color Swatches

Row of round color swatches where the selected one picks up an outer contrast ring.

Violet · #6D5EFA

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Form26 } from "@/components/beste/piece/form26";

<Form26
  label="Accent color"
  swatches={[
    {
      "tone": "violet",
      "name": "Violet",
      "hex": "#6D5EFA"
    },
    {
      "tone": "sky",
      "name": "Sky",
      "hex": "#0EA5E9"
    },
    {
      "tone": "emerald",
      "name": "Emerald",
      "hex": "#10B981"
    },
    {
      "tone": "amber",
      "name": "Amber",
      "hex": "#F59E0B"
    },
    {
      "tone": "rose",
      "name": "Rose",
      "hex": "#EF4444"
    },
    {
      "tone": "slate",
      "name": "Slate",
      "hex": "#111827"
    }
  ]}
  selectedIndex={0}
/>