<ColorSwatch color="#f00" />pnpm dlx 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.
A ColorSwatch displays a preview of a selected color.
| Prop | Type | Default | |
|---|---|---|---|
| — | ||
| — | ||
Last updated on 12/21/2025
Bringing singularity to the web.
Built with passion by @mehdibha.
<Dynamic(ColorSwatch) color="#ff0000" />