ComponentsCore

Color Swatch

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

Example

Usage

Installation

$npx libravelui@latest add color-swatch

Anatomy

import { ColorSwatch } from "@/components/ui/core/color-swatch";
<ColorSwatch color="#8cf0cd" />

Props

Loading types…

Edit on GitHub

Color Swatch Picker

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

Color Thumb

A color thumb allows users to adjust a single channel of an RGB, HSL or HSB color value against a one-dimensional gradient background.

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