Color Swatch

<ColorSwatch />

Installation

npx shadcn@latest add @dotui/color-swatch

Usage

Use color swatches to display a color sample.

import { ColorSwatch } from '@/components/ui/color-swatch'

<ColorSwatch color="#ff0000" />

Value

The color prop accepts a hex or CSS color string, or a Color object from parseColor. Translucent colors render over a checkerboard so their transparency shows through.

import { parseColor } from 'react-aria-components'
;<ColorSwatch color={parseColor('#7f0000aa')} />

Examples

API Reference

ColorSwatch