Color Picker

A hex color picker with optional preset swatches.

Installation

Copy the command below and run it in your terminal.

bunx @sivir/ui add color-picker

Usage

Compose the Color Picker from its Root, Trigger, and Content parts:

import * as ColorPicker from '$lib/sivir/components/color-picker';

let value = $state('#5e6ad2');

<ColorPicker.Root value={value} onValueChange={(v) => (value = v)}>
	<ColorPicker.Trigger />
	<ColorPicker.Content />
</ColorPicker.Root>

Examples

Default

Pick a color

With preset swatches

Choose