Color swatch
A rounded colour chip with a checkerboard alpha backing, used standalone or as part of a colour-picking grid.
$
Registry itembunx shadcn@latest add @nx-ui/color-swatchInstalls withutils
Used bycolor-picker
Basic usage
A single swatch, sized against components/ui/button.tsx's control heights.
Sizes
sm, md (default) and lg.
Selected state
A selected swatch gets a ring plus a check mark for contrast against light and dark fills.
Disabled
Disabled swatches dim and stop responding to pointer input.
Alpha checkerboard
Translucent colours render over a checkerboard backing so the alpha value stays legible in both themes.
ColorSwatchGroup — uncontrolled
A radio-group-semantics grid; pass defaultValue to seed the initial pick.
ColorSwatchGroup — controlled
Drive value and onValueChange yourself, e.g. to tag a Nexus ReGen collection round by material stream.
#0891B2
API reference
Exported parts and their props, extracted from the component source.