Colors

Color Swatch

A predefined color block that allows users to quickly select commonly used or brand-specific colors.

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.

Unlock the full power of
Design Intent UI
Build modern web apps faster with 500+ blocks and polished templates crafted for you.
Color Swatch Picker
Color Thumb