1<ColorPicker
2  defaultValue="#DA2929"
3  style={{
4    width: "240px",
5    height: "320px",
6    padding: 20,
7    background: "white",
8  }}
9>
10  <ColorPicker.Area />
11  <ColorPicker.Hue />
12  <ColorPicker.Alpha />
13  <Flex direction="row" gap={2}>
14    <ColorPicker.Mode />
15    <ColorPicker.Input />
16  </Flex>
17</ColorPicker>

Usage

1import { ColorPicker } from '@raystack/apsara'

ColorPicker Props

The ColorPicker is composed of several subcomponents, each responsible for a specific aspect of color selection. The root component acts as a data provider for its children.

ColorPicker.Area Props

Enables users to select a color from a palette. Typically used for choosing saturation and brightness.

ColorPicker.Hue Props

Provides a slider for selecting the hue value of the color.

ColorPicker.Alpha Props

Provides a slider for selecting the alpha value of the color.

ColorPicker.Mode Props

Lets users switch between different color models (e.g., HEX, RGB, HSL) via a dropdown menu.

ColorPicker.Input Props

Displays the current color value in the selected color model and allows direct text input.

Examples

Basic Usage

1<ColorPicker
2  defaultValue="#00bcd4"
3  style={{
4    width: "240px",
5    height: "220px",
6    padding: 20,
7    background: "white",
8  }}
9>
10  <ColorPicker.Area />
11  <ColorPicker.Hue />
12</ColorPicker>

Popover Integration

The ColorPicker can be embedded within a Popover component to create a more interactive and space-efficient color selection experience.

1(function PopoverColorPicker() {
2  const [color, setColor] = useState("#DA2929");
3
4  return (
5    <Popover>
6      <Popover.Trigger asChild>
7        <Button
8          style={{
9            width: 60,
10            height: 60,
11            background: color,
12          }}
13        />
14      </Popover.Trigger>
15      <Popover.Content>
16        <ColorPicker
17          value={color}
18          onValueChange={setColor}
19          style={{
20            width: "100%",
21            height: "320px",
22          }}
23        >
24          <ColorPicker.Area />
25          <ColorPicker.Hue />
26          <ColorPicker.Alpha />