Color Swatch Selector
Open in
Basic Example
Select color
Reactbasic-example.tsx
const [value, setValue] = useState("#e91e63")<ColorSwatchSelector.Root value={value} onValueChange={setValue}>  <ColorSwatchSelector.Label value="Color" />  <ColorSwatchSelector.Content>    <ColorSwatchSelector.Item value="#e91e63" />    <ColorSwatchSelector.Item value="#e57373" />    <ColorSwatchSelector.Item value="#ec407a" />    <ColorSwatchSelector.Item value="#7dd3fc" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
Without Label
Reactwithout-label.tsx
const [value, setValue] = useState("#6366f1")<ColorSwatchSelector.Root value={value} onValueChange={setValue}>  <ColorSwatchSelector.Content>    <ColorSwatchSelector.Item value="#ef4444" />    <ColorSwatchSelector.Item value="#f59e0b" />    <ColorSwatchSelector.Item value="#10b981" />    <ColorSwatchSelector.Item value="#3b82f6" />    <ColorSwatchSelector.Item value="#6366f1" />    <ColorSwatchSelector.Item value="#8b5cf6" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
Custom Gap Spacing
Theme
Reactcustom-gap.tsx
const [value, setValue] = useState("#10b981")<ColorSwatchSelector.Root value={value} onValueChange={setValue}>  <ColorSwatchSelector.Label value="Theme" />  <ColorSwatchSelector.Content className="gap-6">    <ColorSwatchSelector.Item value="#10b981" />    <ColorSwatchSelector.Item value="#14b8a6" />    <ColorSwatchSelector.Item value="#06b6d4" />    <ColorSwatchSelector.Item value="#0ea5e9" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
Custom Size
Size
Reactcustom-size.tsx
const [value, setValue] = useState("#f97316")<ColorSwatchSelector.Root value={value} onValueChange={setValue}>  <ColorSwatchSelector.Label value="Size" />  <ColorSwatchSelector.Content className="gap-4">    <ColorSwatchSelector.Item value="#f97316" className="h-14 w-14" />    <ColorSwatchSelector.Item value="#fb923c" className="h-14 w-14" />    <ColorSwatchSelector.Item value="#fdba74" className="h-14 w-14" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
With Disabled Option
Select Color
Reactdisabled-option.tsx
<ColorSwatchSelector.Root defaultValue="#8b5cf6">  <ColorSwatchSelector.Label value="Select Color" />  <ColorSwatchSelector.Content>    <ColorSwatchSelector.Item value="#8b5cf6" />    <ColorSwatchSelector.Item value="#a78bfa" />    <ColorSwatchSelector.Item value="#c4b5fd" disabled />    <ColorSwatchSelector.Item value="#ddd6fe" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
Many Colors
Palette
Reactmany-colors.tsx
const [value, setValue] = useState("#8b5cf6")<ColorSwatchSelector.Root value={value} onValueChange={setValue}>  <ColorSwatchSelector.Label value="Palette" />  <ColorSwatchSelector.Content className="gap-2">    <ColorSwatchSelector.Item value="#ef4444" />    <ColorSwatchSelector.Item value="#f97316" />    <ColorSwatchSelector.Item value="#f59e0b" />    <ColorSwatchSelector.Item value="#eab308" />    <ColorSwatchSelector.Item value="#84cc16" />    <ColorSwatchSelector.Item value="#10b981" />    <ColorSwatchSelector.Item value="#14b8a6" />    <ColorSwatchSelector.Item value="#06b6d4" />    <ColorSwatchSelector.Item value="#3b82f6" />    <ColorSwatchSelector.Item value="#6366f1" />    <ColorSwatchSelector.Item value="#8b5cf6" />    <ColorSwatchSelector.Item value="#a855f7" />    <ColorSwatchSelector.Item value="#d946ef" />    <ColorSwatchSelector.Item value="#ec4899" />    <ColorSwatchSelector.Item value="#f43f5e" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>
Vertical Layout
Color Theme
Reactvertical-layout.tsx
<ColorSwatchSelector.Root defaultValue="#ec4899" className="flex-col items-start">  <ColorSwatchSelector.Label value="Color Theme" />  <ColorSwatchSelector.Content className="gap-3">    <ColorSwatchSelector.Item value="#ec4899" />    <ColorSwatchSelector.Item value="#f472b6" />    <ColorSwatchSelector.Item value="#f9a8d4" />    <ColorSwatchSelector.Item value="#fbcfe8" />  </ColorSwatchSelector.Content></ColorSwatchSelector.Root>

Features

  • Built on Radix UI Radio Group primitives for accessibility
  • Composable architecture with separate Root, Label, Content, and Item components
  • Visual color swatch display with hex color values
  • Selected state indication with center ring indicator
  • Support for disabled states
  • Flexible layout options (horizontal and vertical)
  • Customizable size and spacing via className props
  • Smooth transitions and hover effects
  • Keyboard navigation and focus management
  • Fully typed with TypeScript

Component Props

ColorSwatchSelector.Root

  • value - string - Currently selected color value
  • onValueChange - (value: string) => void - Callback when value changes
  • defaultValue - string - Default selected value (uncontrolled)
  • className - string - Override default container styles

ColorSwatchSelector.Label

  • value - string (required) - The label text to display
  • className - string

ColorSwatchSelector.Content

  • className - string - Useful for customizing gap spacing
  • children - React.ReactNode - ColorSwatchSelector.Item components

ColorSwatchSelector.Item

  • value - string (required) - The color value (hex format recommended)
  • disabled - boolean - Whether the item is disabled
  • className - string - Useful for customizing swatch size (e.g., h-14 w-14)