ComponentsCore

Color Swatch Picker

A color swatch picker is a picker that represents a color value.

Example

Installation

$npx libravelui@latest add color-swatch-picker

Anatomy

import {
  ColorSwatchPicker,
  ColorSwatchPickerItem,
} from "@/components/ui/core/color-swatch-picker";
<ColorSwatchPicker>
  <ColorSwatchPickerItem color="#fde68a" />
  <ColorSwatchPickerItem color="#4ade80" />
  <ColorSwatchPickerItem color="#38bdf8" />
  <ColorSwatchPickerItem color="#a78bfa" />
  <ColorSwatchPickerItem color="#f472b6" />
  <ColorSwatchPickerItem color="#60a5fa" />
  <ColorSwatchPickerItem color="#fb7185" />
  <ColorSwatchPickerItem color="#34d399" />
  <ColorSwatchPickerItem color="#facc15" />
  <ColorSwatchPickerItem color="#818cf8" />
</ColorSwatchPicker>

Props

Loading types…

Edit on GitHub

Color Slider

A color slider is a slider that represents a color value.

Color Swatch

A color swatch is a small square that represents a color value.