Color Swatch

<ColorSwatch />

Installation

npx shadcn@latest add @dotui/color-swatch

Usage

Use color swatches to display a color sample.

import { ColorSwatch } from "@/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