HueyRoot

The required root wrapper for all Huey components. It holds the shared color state and provides it via context to every child component. All Huey components must be rendered inside it.

Usage

Vue

import { HueyRoot } from '@hueycolor/vue'

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

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

<template>
  <HueyRoot v-model="color">
    <HexInput />
  </HueyRoot>
</template>

Svelte

import { HueyRoot } from '@hueycolor/svelte'

<script>
import { HueyRoot, HexInput, hueyColor } from '@hueycolor/svelte'

let color = $state(hueyColor('#1A3263'))
</script>

<HueyRoot bind:color>
  <HexInput />
</HueyRoot>

Props

Prop	Type	Default	Description
color / v-model	HueyColor	—	The reactive color value. In Vue, pass as v-model. In Svelte, pass as bind:color. Required.

Notes

HueyRoot renders no DOM element of its own. It only provides context. You can wrap it in any layout element without affecting the output structure.

Passing a value that is not a HueyColor instance (created via hueyColor()) will throw an error at runtime.