<br /> <p align="center"> <a href="https://github.com/olekspolk/vuelor"> <img src="https://vuelor.dev/poster.png?v=2" alt="Examples" width="615" /> </a> </p> <h1 align="center">Vuelor</h1> <p align="center"> Vuelor — a truly flexible, accessible, and Tailwind-ready color picker with developer experience in mind. </p> <p align="center"> <a href="https://vuelor.dev">Documentation</a> | <a href="https://vuelor.dev/guide/getting-started.html">Getting Started</a> | <a href="https://vuelor.dev/examples/">Examples</a> </p>

Installation

npm install @vuelor/picker

pnpm add @vuelor/picker

yarn add @vuelor/picker

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;
}

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'
      }
    },
  }
}

For non-tailwind projects

Import CSS styles and add styling="vanillacss" property.

<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>

Available components

| Name | | ----------------------------------| | ColorPickerRoot.vue | | ColorPickerCanvas.vue | | ColorPickerEyeDropper.vue | | ColorPickerInputHSB.vue | | ColorPickerInputHSL.vue | | ColorPickerInputRGB.vue | | ColorPickerSliderAlpha.vue | | ColorPickerSliderRed.vue | | ColorPickerSliderGreen.vue | | ColorPickerSliderBlue.vue | | ColorPickerSliderHue.vue | | ColorPickerSliderSaturation.vue | | ColorPickerSliderLightness.vue | | ColorPickerSwatch.vue |

Vuelor

Install / Use

README