Import
import { ColorPicker } from "@sugarcoat/ui-nxt";Usage
<ColorPicker color="#6366f1" onChange={(color) => console.log(color)} />Examples#
Basic Color Picker#
Default Color Picker
Color Models#
The ColorPicker supports multiple color models for different use cases.
Hex Model (Default)
Hex with Alpha
RGB Model
RGBA Model
HSL Model
HSLA Model
Sizes#
Extra Small
Small
Medium (Default)
Large
Shapes#
Control the shape of the color swatch trigger.
Circle (Default)
Rounded
Square
Shadow#
Add depth with shadow variants.
No Shadow
Small Shadow
Medium Shadow
Large Shadow
Popover Mode#
Display the color picker in a popover that opens on click.
Popover Color Picker
Popover with Different Shapes
Practical Examples#
Color Palette
Theme Color Selector
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| colorrequired | string | - | The initial color value |
| onChange | (color: string) => void | - | Callback fired when the color changes |
| model | "hex" | "hexa" | "rgb" | "rgba" | "hsl" | "hsla" | "hsv" | "hsva" | "hex" | The color model to use |
| popover | boolean | false | Whether to display the picker in a popover |
| size | "xs" | "sm" | "md" | "lg" | "md" | The size of the color swatch |
| shape | "circle" | "rounded" | "square" | "circle" | The shape of the color swatch |
| shadow | "none" | "sm" | "md" | "lg" | "none" | The shadow depth of the swatch |