Components

ColorPicker

Choose a hex color from a popover with optional preset swatches.

Props

ColorPickerProps props

Prop	Type	Default	Description
`value`	`string`	—	Controlled hex color.
`defaultValue`	`string`	`"#7366ff"`	Initial uncontrolled color.
`onChange`	`(hex: string) => void`	—	Change handler.
`swatches`	`string[]`	`DEFAULT_SWATCHES`	Preset row under the picker. Pass [] to hide.
`showValue`	`boolean`	`true`	Show the hex next to the swatch in the trigger.
`disabled`	`boolean`	—	Prevents interaction.
`align`	`"start" \| "end"`	`"start"`	Popover alignment.

The default picker with DEFAULT_SWATCHES and the hex value shown.

ColorPicker

Provide your own preset palette via swatches.

ColorPicker: custom swatches

Pass an empty array to hide the swatch row entirely.

ColorPicker: no swatches

Set showValue=false to hide the hex text in the trigger, leaving only the swatch.

ColorPicker: no showValue

ImportTSX

import { ColorPicker, DEFAULT_SWATCHES } from "@solarius/onset";