Components

Color Picker

A versatile UI component that provides multiple ways to choose colors, including sliders, swatches, and manual input.

Basic

The basic color picker allows users to select a color.

Installation

If you hit any issues, make sure you check out the installation guide here for more information.

Composed Components

When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.

The Color Picker comes packed with several components to enhance functionality and provide a seamless experience.

An interactive color selection tool that enables users to pick a color by adjusting both hue and saturation within a 2D space.
A text input for specifying color values, supporting formats like HEX, RGB, and HSL for precise color selection.
A horizontal or vertical slider used to adjust individual color properties like hue, saturation, or brightness.
A predefined color block that allows users to quickly select commonly used or brand-specific colors.
Field's a core piece every other component uses. It flexes reusable styles, showing up in inputs, labels, descriptions, and more.
A small, floating UI element that appears near a trigger to show contextual information or actions.

Manual Installation

Make sure you also install the composed components and the required packages for the component to function properly.

Anatomy

Enable Format Selection

Enable users to select the format of the color value (e.g., RGB, HSL).

Combination

Combine both swatch and selection format options in the color picker.

Eye Dropper

Add an eye dropper button to the color picker to allow users to select a color from the screen.

Label

Add a label to the color picker for better accessibility and user guidance.

Dynamic Label

Dynamically update the label based on the selected color.

import { ColorPicker, defaultColor } from "ui"
 
const [color, setColor] = useState(defaultColor)
return <ColorPicker label={color.toString('hex')} value={color} onChange={setColor} />

Description

Include a description to provide additional information or instructions.

Snag a color for the app theme

Controlled

Control the selected color with the value prop to sync it with your application's state.

hex#0D6DFDhexa#0D6DFDFFrgbrgb(13, 109, 253)rgbargba(13, 109, 253, 1)hslhsl(216, 98%, 52%)hslahsla(216, 98%, 52%, 1)hsbhsb(216, 94.99%, 99.04%)hsbahsba(216, 94.99%, 99.04%, 1)

Disabled

Disable the color picker by setting the isDisabled prop, making it non-interactive.

Get premium Blocks

Create stunning, professional-grade layouts that not only save time but also elevate the quality of your projects.
Previous
Color Field
Next
Color Slider