Color Picker

Paint your app with all the colors of the wind using our Color Picker. Select, mix, match and marvel at the result!

Examples

1  import { ColorPicker, FlexBox } from '@sugarcoat/ui';
2
3  <FlexBox gap='3' direction='column' justify='center'>
4    <ColorPicker model='hexa' color='#000' />
5  </FlexBox>
6

API Reference

Component	Description
ColorPicker	A versatile color picker component that supports various color models and display options.

Component Properties

ColorPicker

Prop	Type	Default	Explanation
`color`	`string`	-	The current color value.
`model`	`string`	hex	The color model to use.
`size`	`string`	md	The size of the color picker trigger.
`shape`	`string`	circle	The shape of the color picker trigger.
`shadow`	`string`	none	The shadow depth of the color picker trigger.
`popover`	`boolean`	false	Whether to display the color picker in a popover.
`onChange`	`(color: string) => void`	-	Callback function when the color changes.

Customize The Look

Check out these sample themes

Or create your ownBrand color

Accent color

Neutral color

Border radius