Colors
Color Picker
A versatile UI component that provides multiple ways to choose colors, including sliders, swatches, and manual input, for comprehensive color selection.
Basic
The basic color picker allows users to select a color.
Installation
npx shadcn@latest add @intentui/color-pickerComposed 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
npm i react-aria-components @heroicons/reactAnatomy
import { ColorPicker } from "@/components/ui/color-picker";
import { Popover, PopoverBody, PopoverContent } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { ColorSwatch } from "@/components/ui/color-swatch";
import { ColorArea } from "@/components/ui/color-area";
import { ColorSlider, ColorSliderTrack } from "@/components/ui/color-slider";
import { ColorThumb } from "@/components/ui/color-thumb";
import { ColorField } from "@/components/ui/color-field";
import { Input } from "@/components/ui/input";<ColorPicker defaultValue="rgb(120,140,200)">
<Popover>
<Button intent="plain" data-slot="control">
<ColorSwatch />
Select color
</Button>
<PopoverContent className="[--gutter:--spacing(1)]">
<PopoverBody>
<div className="space-y-(--gutter)">
<ColorArea
colorSpace="rgb"
defaultValue="rgb(120,140,200)"
xChannel="red"
yChannel="green"
xName="red"
yName="green"
/>
<ColorSlider colorSpace="hsb" channel="hue">
<ColorSliderTrack>
<ColorThumb />
</ColorSliderTrack>
</ColorSlider>
<ColorField aria-label="Color">
<Input />
</ColorField>
</div>
</PopoverBody>
</PopoverContent>
</Popover>
</ColorPicker>Controlled
Control the selected color with the value prop to sync it with your application's state.
Disabled
Disable the color picker by setting the isDisabled prop, making it non-interactive.