Installation

npm install @vuelor/picker

pnpm add @vuelor/picker

yarn add @vuelor/picker

Install a ready-made picker with the shadcn-vue CLI

Prefer a complete, editable picker over wiring the parts yourself? Every example on vuelor.dev is a shadcn-vue registry item. Add the @vuelor registry to your components.json once:

{ "registries": { "@vuelor": "https://vuelor.dev/r/{name}.json" } }

then copy a picker into your project (this also installs @vuelor/picker and adds the required theme tokens):

npx shadcn-vue@latest add @vuelor/color-picker

See the shadcn-vue CLI guide for the full list of pickers and AI/MCP usage.

Import the parts

This isn't a "drop-in" color picker. Instead, it's a collection of building blocks that let you craft exactly what you want.

<script setup>
import { ref } from 'vue'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  ColorPickerSliderAlpha,
  ColorPickerInputHex
} from '@vuelor/picker'

const color = ref(null)
</script>

<template>
  <ColorPickerRoot v-model="color">
    <ColorPickerCanvas />
    <ColorPickerSliderHue />
    <ColorPickerSliderAlpha />
    <ColorPickerInputHex />
  </ColorPickerRoot>
</template>

For TailwindCSS 4

Update the index.css file:

@import "tailwindcss";
@source "../../node_modules/@vuelor/picker";

@theme {
  --color-vuelor-primary: #0d99ff;
  --color-vuelor-surface: #ffffff;
  --color-vuelor-border: #e6e6e6;
  --color-vuelor-input: #f5f5f5;

  --shadow-vuelor-card: 0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 .5px 0 #0000001f;
  --shadow-vuelor-thumb: 0px 0px .5px #0000002e, 0px 3px 8px #0000001a, 0px 1px 3px #0000001a;
  --shadow-vuelor-inner: inset 0 0 0 1px #0000001a;

  /* Gradient editor only */
  --drop-shadow-vuelor-thumb: 0px 0px .5px #00000054, 0px 1px 3px #00000026;
}

For TailwindCSS 3

Update the tailwind.config.js file:

export default {
  content: [
    './src/**/*.{vue,js,ts}',
    './node_modules/@vuelor/picker/dist/index.js'
  ],
  theme: {
    extend: {
      colors: {
        'vuelor-primary': '#0d99ff',
        'vuelor-surface': '#ffffff',
        'vuelor-border': '#e6e6e6',
        'vuelor-input': '#f5f5f5',
      },
      boxShadow: {
        'vuelor-card': '0 2px 5px 0 #00000026, 0 10px 16px 0 #0000001f, 0 0 .5px 0 #0000001f',
        'vuelor-thumb': '0px 0px .5px #0000002e, 0px 3px 8px #0000001a, 0px 1px 3px #0000001a',
        'vuelor-inner': 'inset 0 0 0 1px #0000001a'
      },
      // Gradient editor only
      dropShadow: {
        'vuelor-thumb': ['0px 0px .5px #00000054', '0px 1px 3px #00000026']
      }
    },
  }
}

For non-tailwind projects

Import the CSS bundle and set styling="vanillacss" on the root component.

<script setup>
import '@vuelor/picker/style.css'

import { ref } from 'vue'
import {
  ColorPickerRoot,
  ColorPickerCanvas,
  ColorPickerSliderHue,
  ColorPickerSliderAlpha,
  ColorPickerInputHex
} from '@vuelor/picker'

const color = ref(null)
</script>

<template>
  <ColorPickerRoot
    v-model="color"
    styling="vanillacss"
  >
    <ColorPickerCanvas />
    <ColorPickerSliderHue />
    <ColorPickerSliderAlpha />
    <ColorPickerInputHex />
  </ColorPickerRoot>
</template>

Set styling="unstyled" instead to strip all built-in classes and start from a blank slate.

Available components

| Name | Description | | --------------------------------- | ------------------------------------------------------------------------ | | ColorPickerRoot | Root wrapper that manages color state and provides context to all children. | | ColorPickerCanvas | 2D gradient area for picking saturation and brightness/lightness. | | ColorPickerEyeDropper | Button that opens the native browser eye dropper (Chrome/Edge only). | | ColorPickerInputHex | Text input for editing the color as a hex string, with optional opacity. | | ColorPickerInputHSB | Text inputs for Hue, Saturation, and Brightness channels. | | ColorPickerInputHSL | Text inputs for Hue, Saturation, and Lightness channels. | | ColorPickerInputRGB | Text inputs for Red, Green, and Blue channels (0–255). | | ColorPickerSliderAlpha | Slider for controlling the opacity of the current color. | | ColorPickerSliderRed | Slider for controlling the Red channel (0–255). | | ColorPickerSliderGreen | Slider for controlling the Green channel (0–255). | | ColorPickerSliderBlue | Slider for controlling the Blue channel (0–255). | | ColorPickerSliderHue | Slider for selecting the hue across the full color spectrum (0–360°). | | ColorPickerSliderSaturation | Slider for controlling the HSL saturation. | | ColorPickerSliderLightness | Slider for controlling the HSL lightness. | | ColorPickerSwatch | Color chip that displays a preset — clicking it automatically applies the color. |