Swatch

A small preview of a color, often used in color pickers or design tokens documentation.

Usage

A simple circular indicator used to display a color. It is commonly used within color pickers, palette generators, or to document design tokens.

import { Swatch } from "@elemnts-ui/react"

<Swatch bg="red.500" />

Change the size of the component using the size prop.

Prop	Type	Default
size	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`
asChild	`'boolean' \| 'undefined'`