On this page
Props
<ColorSwatch />Installation
npm
pnpm
yarn
bun
npx shadcn@latest add @dotui/color-swatchUsage
Use color swatches to display a color sample.
import { ColorSwatch } from '@/components/ui/color-swatch'<ColorSwatch color="#ff0000" />Examples
Default
API Reference
ColorSwatch
A ColorSwatch displays a preview of a selected color.
| Prop | Type | Default | |
|---|---|---|---|
Color | string | — | ||
string | — | ||
Last updated on 6/16/2026