<ColorSwatch color="#f00" />npx shadcn@latest add @dotui/color-swatchUse color swatches to display a color sample.
import { ColorSwatch } from "@/components/ui/color-swatch";<ColorSwatch color="#ff0000" />Use the controls below to experiment with different color swatch props and see the live preview and code update.
<ColorSwatch color="#ff0000" />A ColorSwatch displays a preview of a selected color.
| Prop | Type | Default | |
|---|---|---|---|
string | Color | — | ||
string | — | ||
Last updated on 1/13/2026
Bringing singularity to the web.
Built with passion by @mehdibha.