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.
Basic
The basic color swatch simply displays the selected color value.
Installation
Install the component via the CLI in one command.
npm
pnpm
yarn
bun
npx shadcn@latest add @intentui/color-swatch
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm
pnpm
yarn
bun
npm install 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.
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.