## Installation [#installation] npm pnpm yarn bun ```bash npx shadcn@latest add @dotui/color-editor ``` ```bash pnpm dlx shadcn@latest add @dotui/color-editor ``` ```bash yarn dlx shadcn@latest add @dotui/color-editor ``` ```bash bun x shadcn@latest add @dotui/color-editor ``` ## Usage [#usage] Use a color editor to let users adjust a color with a saturation/brightness area, channel sliders, and format-aware fields. Standalone, it manages its own color value; inside a [Color Picker](/docs/components/color-picker), it edits the picker's color instead. ```tsx import { ColorEditor } from '@/components/ui/color-editor' ``` ```tsx ``` ### Composition [#composition] The default children render an area row and a fields row. Pass your own children to reorder, drop, or extend them. ```tsx import { ColorEditor, ColorEditorArea, ColorEditorFields, } from '@/components/ui/color-editor' ``` ```tsx ``` ## Examples [#examples] ## API Reference [#api-reference] ### ColorEditor [#coloreditor] ### ColorEditorArea [#coloreditorarea] ### ColorEditorFields [#coloreditorfields]