Back to components
Color Swatch Row React component

What is this?

A white tile with a row of round color swatches for picking an accent or label color. The selection ring glides to the next swatch and takes its color, a check pops in, and the name and hex update in the header. Arrow keys, Home, and End move the choice. Swap the colors and heading, then drop it into theme settings or a project label editor.

Component

Color Swatch Row

A white tile with a row of round color swatches for picking an accent or label color. The selection ring glides to the next swatch and takes its color, a check pops in, and the name and hex update in the header. Arrow keys, Home, and End move the choice. Swap the colors and heading, then drop it into theme settings or a project label editor.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS · Lucide UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16
  • Lucide-react 1.23.0

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS
  • Lucide

Version 1.0.0