Components

Every Huey picker starts with HueyRoot, the context provider that holds the shared color state.

All other components must be descendants of a HueyRoot and automatically read from and write to its color state.

Saturation Area Hue Slider Saturation Slider Lightness Slider Alpha Slider Hex Input Hue Input Saturation Input Lightness Input Alpha Input Red Input Green Input Blue Input Color Preview Color Swatch Color Dropper

Typing Wrapper Components

Every component’s prop type is exported alongside the component, so you can build typed wrappers without redeclaring its props. Each interface is named <Component>Props (e.g. HueSliderProps, ColorSwatchProps).

Vue

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

defineProps<HueSliderProps>()
</script>

<template>
  <div class="my-hue-slider">
    <HueSlider v-bind="$props" />
  </div>
</template>

Svelte

<script lang="ts">
import type { HueSliderProps } from '@hueycolor/svelte'
import { HueSlider } from '@hueycolor/svelte'

let props: HueSliderProps = $props()
</script>

<div class="my-hue-slider">
  <HueSlider {...props} />
</div>