Color Swatches

Row of color circles with a check on the active swatch and a trailing eyedropper for custom values.

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

Import & use
import { Toolbar6 } from "@/components/beste/piece/toolbar6";

<Toolbar6
  swatches={[
    {
      "color": "#0f172a",
      "label": "Slate"
    },
    {
      "color": "#ef4444",
      "label": "Rose"
    },
    {
      "color": "#f59e0b",
      "label": "Amber"
    },
    {
      "color": "#10b981",
      "label": "Emerald"
    },
    {
      "color": "#0ea5e9",
      "label": "Sky"
    },
    {
      "color": "#8b5cf6",
      "label": "Violet"
    }
  ]}
  active="#10b981"
/>