GitHub55X

Color Picker

Vue color picker to choose colors with swatches, channels, and hex or RGB values in forms and editors.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/color-picker.json

Usage

      
      <script setup lang="ts">
import { ColorPicker } from "@/components/ui/color-picker";
</script>

<template>
  <ColorPicker.Root>
    <!-- … -->
  </ColorPicker.Root>
</template>

Composition

      
      ColorPicker.Root
├── ColorPicker.AreaBackground
├── ColorPicker.AreaThumb
├── ColorPicker.Area
├── ColorPicker.ChannelInput
├── ColorPicker.ChannelSliderLabel
├── ColorPicker.ChannelSliderThumb
├── ColorPicker.ChannelSliderTrack
├── ColorPicker.ChannelSliderValueText
├── ColorPicker.ChannelSlider
├── ColorPicker.Content
├── ColorPicker.Context
├── ColorPicker.Control
├── ColorPicker.EyeDropperTrigger
├── ColorPicker.FormatSelect
├── ColorPicker.FormatTrigger
├── ColorPicker.HiddenInput
├── ColorPicker.Label
├── ColorPicker.Positioner
├── ColorPicker.RootProvider
├── ColorPicker.SwatchGroup
├── ColorPicker.SwatchIndicator
├── ColorPicker.SwatchTrigger
├── ColorPicker.Swatch
├── ColorPicker.TransparencyGrid
├── ColorPicker.Trigger
├── ColorPicker.ValueSwatch
├── ColorPicker.ValueText
├── ColorPicker.View

Examples

Controlled

Use the value and onValueChange props to programatically control the color picker's state.

Open Controlled

Control the open state of the color picker popover programmatically using the open and onOpenChange props.

Root Provider

An alternative way to control the color picker is to use the RootProvider component and the useColorPicker hook. This way you can access the state and methods from outside the component.

Disabled

Use the disabled prop to disable the color picker.

Inline

Render the color picker inline without a popover by using the inline prop.

Input Only

A minimal color picker with just an input field, value swatch, and eye dropper trigger.

Slider Only

Display only the channel sliders for RGB color selection.

Swatch Only

A simple color picker with only preset color swatches.

Swatches

Include preset color swatches in the color picker content for quick color selection.

Value Swatch

Display the current color value as a swatch alongside the color area and sliders.

Field

The Field component helps manage form-related state and accessibility attributes of a color picker. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Form Usage

Integrate the color picker with form libraries like React Hook Form using the HiddenInput component.

Inside Dialog

Here's an example of how to use the color picker inside a dialog.

API

See Ark UI Color Picker docs for full props and examples.

CollapsibleDate Input