Colors

Color Swatch

A predefined color block that allows users to quickly select commonly used or brand-specific colors. It displays colors in various sizes for easy identification.

ColorSwatch
Color Swatch PickerColor Thumb

Basic

The basic color swatch simply displays the selected color value.

Installation

npx shadcn@latest add @intentui/color-swatch

Manual installation

npm i react-aria-components

Anatomy

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

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

Size

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

Color Swatch Picker
Color Thumb