Color Swatch

A circular chip that previews a CSS color. Shows a checkerboard behind transparent values and a check mark when selected.

Playground

color

size

selected

disabled

<ColorSwatch color="#3b82f6" selected />

Preview

Pass any valid CSS color string – hex, rgb(), hsl(), oklch(), named colors or even CSS variables like var(--primary).

<ColorSwatch color="#3b82f6" />
<ColorSwatch color="rgb(239, 68, 68)" />
<ColorSwatch color="hsl(160, 84%, 39%)" />
<ColorSwatch color="oklch(0.65 0.18 250)" />
<ColorSwatch color="dodgerblue" />

Installation

npx shadcn@latest add https://espresso-base-ui.vercel.app/r/color-swatch.json

Usage

import { ColorSwatch } from "@/components/ui/color-swatch"

<ColorSwatch color="#3b82f6" selected />

Sizes

Three sizes: sm (24px), default (32px) and lg (48px).

<ColorSwatch color="#3b82f6" size="sm" />
<ColorSwatch color="#3b82f6" size="default" />
<ColorSwatch color="#3b82f6" size="lg" />

Transparency

Colors with an alpha channel below 1 get a checkerboard backdrop so the transparency reads; withoutTransparency disables it and lets the color blend with the surface behind.

<ColorSwatch color="#3b82f680" />
<ColorSwatch color="rgba(239, 68, 68, 0.5)" />
<ColorSwatch color="transparent" />
<ColorSwatch color="#3b82f680" withoutTransparency />

Selected

selected springs in a white check mark and offsets an outline ring tinted with the swatch's own color – wrap swatches in buttons to build a palette picker.

const [selected, setSelected] = React.useState("#3b82f6")
const colors = ["#3b82f6", "#ef4444", "#10b981"]

{colors.map((color) => (
  <button
    key={color}
    type="button"
    onClick={() => setSelected(color)}
    className="rounded-full"
  >
    <ColorSwatch color={color} selected={selected === color} />
  </button>
))}

Empty, invalid and disabled

A missing or invalid color renders a diagonal strike-through – the "no color" affordance familiar from design tools – while disabled halves the opacity and blocks pointer events.

<ColorSwatch />
<ColorSwatch color="not-a-real-color" />
<ColorSwatch color="#3b82f6" disabled />

API reference

ColorSwatch renders a single div (or its child with asChild) and accepts className, style and all standard div props. Custom children replace the built-in check-mark indicator.

ColorSwatch

Prop	Type	Default	Description
color	string	–	Any CSS color value. Omitted, empty or invalid values render the strike-through placeholder.
size	"sm" \| "default" \| "lg"	"default"	Swatch diameter – 24px, 32px or 48px.
selected	boolean	false	Shows the animated check mark and an offset outline tinted with the swatch color.
disabled	boolean	false	Halves opacity, blocks pointer events and sets aria-disabled.
withoutTransparency	boolean	false	Skip the checkerboard backdrop for colors with an alpha channel.
asChild	boolean	false	Merge the swatch's props and styling onto the child element instead of rendering a div.

Accessibility & styling hooks

The swatch renders role="img" with an aria-label announcing the current color value (or "No color selected"), and sets forced-color-adjust: none so the preview stays accurate in forced-colors modes. State surfaces as data attributes – data-slot="color-swatch", data-selected and data-disabled – for CSS targeting. The swatch itself is not interactive; wrap it in a button (or use asChild) to make it clickable and focusable.