@hueycolor/vue

@hueycolor/vue

Composable, customizable color picker components for Vue 3.

Installation

npm install @hueycolor/vue

Usage

Wrap your components in HueyRoot with a v-model bound to a HueyColor value. All child components automatically share the color state.

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

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

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

Components

Root

Sliders

Inputs

Display

Accessing color state

Use useHueyContext inside any component rendered within HueyRoot to read or set the current color.

<script setup lang="ts">
import { useHueyContext } from '@hueycolor/vue'

const { hue, saturation, lightness, alpha, colorValue, setColor } = useHueyContext()
</script>

License

MIT