Color Swatch Picker

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

Example

Usage

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…

Accessible React component library to copy, customize, and own your UI. Built for Next.js, Vite, and Laravel.

Crafted by dervyon. Peep the Source Code on GitHub.

Hosted on Vercel. The source code's got the MIT license.

2025 - 2026 · LibravelUI

Starter Kits

Templates

    Coming Soon

Labs