Glass Swatch

A glass-edged colour swatch with a selected accent ring and press — for palette and colour pickers. Use standalone or as a radio group.

Playground

Edit the props live and copy the config.

Size

<GlassSwatchGroup value={color} onValueChange={setColor}>
  <GlassSwatch value="sky" color="#0ea5e9" size={36} />
  {/* … */}
</GlassSwatchGroup>

Install

npx shadcn@latest add https://websiteglass.com/r/glass-swatch.json

Usage

import { GlassSwatch, GlassSwatchGroup } from '@/components/ui/glass-swatch';

<GlassSwatchGroup value={color} onValueChange={setColor}>
  {colors.map((c) => (
    <GlassSwatch key={c.key} value={c.key} color={c.css} title={c.name} />
  ))}
</GlassSwatchGroup>

Standalone (toggle):

<GlassSwatch color="#f43f5e" selected={on} onClick={() => setOn(!on)} title="Rose" />

Components

GlassSwatchGroup

Prop	Type	Default	Description
`value`	`string`	—	Selected swatch value (controlled).
`onValueChange`	`(v: string) => void`	—	Fires when a swatch is chosen.

Renders a radiogroup; each child swatch becomes a radio.

GlassSwatch

Prop	Type	Default	Description
`color`	`string`	required	Fill colour — any CSS color.
`value`	`string`	—	Value within a `GlassSwatchGroup`.
`selected`	`boolean`	`false`	Standalone selected state (ignored inside a group).
`title`	`string`	—	Accessible name + native tooltip.
`size`	`number`	`36`	Diameter in px.

The colour fill is opaque; the "glass" is the rim highlight, the sheen, the selected ring, and the press scale — so it's cheap (no backdrop-filter).