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

HueyRoot accepts either a plain string (any format hueyColor() understands, e.g. #1A3263, rgb(...), hsl(...)) or a HueyColor instance.

Vue

import { HueyRoot } from '@hueycolor/vue'

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

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

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

Svelte

import { HueyRoot } from '@hueycolor/svelte'

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

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

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

If you’d rather work with a HueyColor instance directly, wrap your value with hueyColor():

Vue

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

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

Svelte

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

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

Props

Prop	Type	Default	Description
color / v-model	string | 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.

When you pass a string, the bound value stays a string in the same format you provided. Pass a HueyColor if you want the bound value to be a HueyColor instance.