Color Swatch Picker
A grid-based selection tool that presents a set of predefined colors for easy and consistent color choices, allowing for controlled selection and disabled states.
Basic
A color swatch picker allows users to choose a color from a predefined set.
Installation
Install the component via the CLI in one command.
npx shadcn@latest add @intentui/color-swatch-picker
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
This component comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Use this approach if you prefer to install and wire up the component yourself instead of using the CLI.
npm install react-aria-components
Anatomy
import {
ColorSwatchPicker,
ColorSwatchPickerItem,
} from "@/components/ui/color-swatch-picker"<ColorSwatchPicker aria-label="Pick color">
<ColorSwatchPickerItem color="#f59e0b" />
<ColorSwatchPickerItem color="#84cc16" />
<ColorSwatchPickerItem color="#0d6efd" />
</ColorSwatchPicker>Controlled
The color swatch can be managed in a controlled manner.
Disabled
While you can disable individual picker items, disabling the entire picker is possible but generally not recommended.
Design Intent UI
Build modern web apps faster with 1000+ resources across components, blocks, patterns, templates, and starter kits.