Color Swatch

ColorSwatch

Installation

Add the component with the CLI.

npx shadcn@latest add @intentui/color-swatch

Manual installation

Install the dependencies, then copy the component source into your project.

npm install react-aria-components

Anatomy

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

<ColorSwatch aria-label="Current color" color="#0d6efd" />

Examples

Size

You can use the --size variable to adjust the size of the color swatch.

Component API

ColorSwatch

ColorSwatch extends the React Aria Components <ColorSwatch> component.

classNamestring

See the React Aria for the full API reference.

Design
Color Swatch Picker
Color Thumb