UI Components

Configure and preview the UI components in real-time.

Configuration

Customize the Color Picker component properties

Default Value

Show Presets

Display preset color swatches

Show Alpha

Enable transparency control

Show Preview

Show preview swatch in popover

Show Labels

Display section labels (Color, Hue, Hex)

Show Value

Display the current color value

Hue Slider Position

Position of the hue slider relative to the color area

Disabled

Disable the color picker

Custom Presets

Use custom preset colors

Live Preview

Interactive preview of your configured Color Picker

Color Picker Component

Active Props

showPresets

showPreview=false

Code

Use this component in your project by copying and pasting the code below

<ColorPicker
  defaultValue="#ffffff10"
  showPresets={true}
  showPreview={false}
  onValueChange={(color) => console.log(color)}
/>

Installation

via CLI (shadcn)

pnpx shadcn@latest add https://ui.steellgold.fr/r/color-picker.json