# antuikit / ColorPicker

> ColorPicker with a `shape` for the trigger's corners and the panel's step buttons drawn from your icon pack.

Docs: https://antuikit.com/docs/components/colorpicker

## Install

npx antuikit@latest init
npx antuikit@latest add color-picker

## Import

import { ColorPicker } from "@/components/ui/color-picker";

## Demos

- [Basic](https://ui.antuikit.com/embed/color-picker/basic.md): A `ColorPicker` opens a panel to pick a color, and `showText` shows the value beside the swatch.
- [Sizes](https://ui.antuikit.com/embed/color-picker/sizes.md): Set `size` to `small`, `medium` or `large` to match the trigger to the fields around it.
- [Shapes](https://ui.antuikit.com/embed/color-picker/shapes.md): Set `shape` to `squircle` or `round` to change the corners of the trigger and its swatch.
- [Custom text](https://ui.antuikit.com/embed/color-picker/text-render.md): Pass `showText` a function to render your own text beside the swatch, like a label before the hex value.
- [Formats](https://ui.antuikit.com/embed/color-picker/formats.md): Set `format` to `hex`, `rgb` or `hsb`, and follow the format picked in the panel with `onFormatChange`.
- [Presets](https://ui.antuikit.com/embed/color-picker/presets.md): Pass `presets` groups of colors to offer below the panel, each group with its own label.
- [Gradient](https://ui.antuikit.com/embed/color-picker/gradient.md): Set `mode` to `['single', 'gradient']` to let the panel switch between a plain color and a gradient.
- [Clearable](https://ui.antuikit.com/embed/color-picker/allow-clear.md): Set `allowClear` to add a clear button to the panel, and reset your own state in `onClear`.
- [Disabled](https://ui.antuikit.com/embed/color-picker/disabled.md): Set `disabled` to show a color that cannot be changed, with a grayed-out trigger that does not open the panel.
- [No transparency](https://ui.antuikit.com/embed/color-picker/disabled-alpha.md): Set `disabledAlpha` to remove the transparency slider, so every color picked is fully opaque.
- [Panel title](https://ui.antuikit.com/embed/color-picker/panel-title.md): Pass `panelRender` a function that wraps the panel, to put a title above it.
- [Panel layout](https://ui.antuikit.com/embed/color-picker/panel-layout.md): Use the `Picker` and `Presets` parts `panelRender` receives to lay the presets out beside the picker.
- [Custom trigger](https://ui.antuikit.com/embed/color-picker/custom-trigger.md): Pass any element as `children` to open the panel from it, here a tag showing the current color.
- [In a form](https://ui.antuikit.com/embed/color-picker/in-form.md): Set `getValueFromEvent` on the `Form.Item` to store a hex string instead of the color object `onChange` passes.

## Rules

- antuikit components are COPIED into a project from a registry. There is no
  `antuikit` package to import components from at runtime.
- Import from `@/components/ui/color-picker`, never from `antd`. antd stays for
  `theme`, `App`, the `message` / `notification` statics and type-only imports.
- Do not nest a bare `<ConfigProvider theme>` to re-theme a region. Use
  `<ThemeScope theme={...}>`, which also carries the cssVar key class that
  non-antd descendants inherit their tokens from.
- Colors, radii and spacing come from the token contract, not from hardcoded
  values: write `rounded-lg`, `px-xxs`, `bg-warning`, not the raw `var(--ant-*)`.
- `ColorPicker` takes every Ant Design v6 prop of the same component. The
  wrapper never narrows that surface, so anything antd documents also works here.