Getting Started

Install

Install Huey with your favorite package manager:

pnpm

pnpm i @hueycolor/vue

npm

npm i @hueycolor/vue

bun

bun add @hueycolor/vue

Quick Start

Wrap your picker components in HueyRoot and bind a color with v-model:

<script setup>
import { ref } from 'vue'
import {
  HueyRoot,
  HueSlider,
  SaturationArea,
  AlphaSlider,
  HexInput,
  ColorPreview,
  hueyColor
} from '@hueycolor/vue'

const color = ref(hueyColor('#ff6b35'))
</script>

<template>
  <HueyRoot v-model="color">
    <SaturationArea />
    <HueSlider />
    <AlphaSlider />
    <HexInput />
    <ColorPreview />
  </HueyRoot>
</template>

That’s it! A fully functional color picker. Every component inside HueyRoot automatically shares and updates the same color state.

Core Concepts

HueyRoot as Context Provider

HueyRoot is the entry point for every Huey picker. It accepts a v-model of type HueyColor and provides shared color state to all child components through Vue’s provide/inject pattern.

All Huey components must be descendants of a HueyRoot.

Color Formats

HueyRoot accepts any color format that @hueycolor/core supports:

hueyColor('#ff6b35')                  // Hex
hueyColor('rgb(255, 107, 53)')        // RGB
hueyColor('hsl(18, 100%, 60%)')       // HSL
hueyColor('oklch(72% 0.19 45)')       // OKLCH

Minimally Styled Components

Huey components ship with lightweight baseline styles. Just enough to be functional (positioning, gradients, sizing). Visual details like colors, borders, spacing, and layout are left to you. Customize them through CSS custom properties and attribute selectors. See the Styling guide for details.

Composable Components

Pick only the components you need. A minimal picker might use just SaturationArea and HueSlider, while a full-featured one could include sliders, inputs, an area picker, swatches, and a preview. All composed freely within a single HueyRoot.

Using Core Standalone

The core package works independently of any framework. If you only need color parsing, conversion, and manipulation without UI components, see the @hueycolor/core docs.