# Cell Color Picker
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/cell-color-picker
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(colors)/cell-color-picker.mdx
> A compact color picker styled as a settings cell, with a leading label and a trailing swatch and live hex value.
***
## Import
```tsx
import { ColorPicker, ColorArea, ColorSlider } from '@darkcode-ui/react';
```
The cell color picker is the standard [ColorPicker](/react/components/color-picker) rendered
in its cell layout: pass the `variant` prop and compose the `ColorPicker.Label`,
`ColorPicker.Swatch`, and `ColorPicker.ValueDisplay` parts inside the trigger.
## Usage
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider} from "@darkcode-ui/react";
export function Default() {
return (
Background
);
}
```
## Anatomy
The trigger becomes a full-width settings-cell row: a leading `Label` on the left, and a
trailing cluster with the `Swatch` preview and the live hex `ValueDisplay` on the right.
```tsx
import { ColorPicker, ColorArea, ColorSlider } from '@darkcode-ui/react';
export default () => (
Background
);
```
## Controlled
Pass `value` and `onChange` to control the selected color. `ColorPicker.ValueDisplay`
reflects the current value automatically.
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider, parseColor} from "@darkcode-ui/react";
import {useState} from "react";
export function Controlled() {
const [color, setColor] = useState(parseColor("#325578"));
return (
Background
Selected: {color.toString("hex")}
);
}
```
## Disabled
Pass `isDisabled` to disable the cell.
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider} from "@darkcode-ui/react";
export function Disabled() {
return (
Background
);
}
```
## Settings Group
Stack multiple cells in a single inset panel with merged corners and hairline dividers,
ideal for preference and configuration forms.
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider} from "@darkcode-ui/react";
const cells = [
{defaultValue: "#0485F7", label: "Background"},
{defaultValue: "#F43F5E", label: "Accent"},
{defaultValue: "#22C55E", label: "Success"},
];
export function SettingsGroup() {
return (
);
}
```
## Variants
Use `variant="secondary"` for an accent-tinted cell. The variant styles the trigger row.
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider} from "@darkcode-ui/react";
const variants = [
{defaultValue: "#0485F7", label: "Default", variant: "default"},
{defaultValue: "#F43F5E", label: "Secondary", variant: "secondary"},
] as const;
export function Variants() {
return (
{variants.map((item) => (
{item.label}
))}
);
}
```
## With Presets
Add a `ColorSwatchPicker` inside the popover to offer a palette of preset colors alongside
the full picker.
```tsx
"use client";
import {ColorArea, ColorPicker, ColorSlider, ColorSwatchPicker} from "@darkcode-ui/react";
const presets = [
"#EF4444",
"#F97316",
"#EAB308",
"#22C55E",
"#06B6D4",
"#3B82F6",
"#8B5CF6",
"#EC4899",
];
export function WithPresets() {
return (
Label color
{presets.map((preset) => (
))}
);
}
```
## Styling
The cell color picker is the [ColorPicker](/react/components/color-picker) component, so all
of its styling patterns apply. The cell layout is provided by the `variant` modifier and the
BEM classes below.
### CSS Classes
The cell layout uses the following CSS classes ([View source styles](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/color-picker.css)):
#### Base Classes
- `.color-picker` - Root wrapper
- `.color-picker__trigger` - The visible cell row button
- `.color-picker__popover` - Dropdown color picker panel
#### Element Classes
- `.color-picker__trigger--default` - Default variant trigger styling
- `.color-picker__trigger--secondary` - Secondary variant trigger styling
- `.color-picker__label` - Leading text label
- `.color-picker__value-display` - Live hex value text
- `.color-picker__swatch` - Color swatch preview
### Interactive States
The component supports both CSS pseudo-classes and data attributes:
- **Focus**: `:focus-visible` or `[data-focus-visible="true"]`
- **Disabled**: `:disabled` or `[data-disabled="true"]`
## API Reference
### ColorPicker
The root component. Add the `variant` prop to enable the cell layout.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `'default' \| 'secondary'` | - | Renders the trigger as a settings-cell row. When omitted, the trigger stays a compact inline trigger. |
Also supports all [DarkCode UI ColorPicker](/react/components/color-picker) props
(`value`, `defaultValue`, `onChange`, `isDisabled`, etc.).
### ColorPicker.Trigger
The visible cell row button. Wraps React Aria [Button](https://react-spectrum.adobe.com/react-aria/Button.html).
Also supports all React Aria `Button` props.
### ColorPicker.Label
Leading text label rendered as a `span`.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `children` | `ReactNode` | - | Label text |
Also supports all native `span` HTML attributes.
### ColorPicker.ValueDisplay
Displays the current color as a hex value (e.g. `#FF5733`). Reads from the color picker state
automatically.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `uppercase` | `boolean` | `true` | Render the hex value in uppercase |
| `children` | `ReactNode \| (({ hex }) => ReactNode)` | - | Override the displayed content; receives the resolved `hex` string when a function |
Also supports all native `span` HTML attributes.
### ColorPicker.Swatch
Color swatch preview. Wraps DarkCode UI [ColorSwatch](/react/components/color-swatch).
Also supports all DarkCode UI `ColorSwatch` props (`size`, `shape`, etc.).
### ColorPicker.Popover
Dropdown color picker panel.
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `placement` | `Placement` | `'bottom left'` | Popover placement relative to the trigger |
Also supports all DarkCode UI `ColorPicker.Popover` props.
## Related Components
- **ColorArea**: 2D color picker for selecting colors from a gradient area
- **ColorWheel**: Circular slider for selecting the hue of a color
- **ColorSlider**: Slider for adjusting individual color channel values