A colour, as a hex value.
Import it from rei-kit:
import { ColorPicker } from 'rei-kit'
Open ColorPicker in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { ColorPicker, PALETTES } from 'rei-kit'
const brand = ref('#6b4de6')
/* The swatches are yours, values and names — the kit ships no colours of its
own. `PALETTES` is one ready source if you want the kit's ten. */
const swatches = PALETTES.map((palette) => ({
value: palette.swatch[0],
label: palette.name,
}))
</script>
<template>
<ColorPicker
v-model="brand"
label="Brand colour"
hex-label="Hex value"
:swatches="swatches"
hint="Used for buttons, links and the active state."
/>
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | Names the control. Already translated. |
modelValue | string | yes | The colour, as `#rrggbb`. Required: a picker with no colour shows none. |
swatches | readonly ColorSwatch[] | [] | Colours to offer beside the picker. The app's values and names. |
hexLabel | string | '' | Names the hex field. Without it, there is no hex field. |
hint | string | '' | |
error | string | '' | |
disabled | boolean | false | |
labelHidden | boolean | false | |
fieldId | string | undefined | Ties the generated id to a name you choose, so `ErrorSummary` can link to this field. Its links point at nothing without it, and the kit's own `FormField` has taken one since 2.22.0 while the fields built on it did not — which left building a form out of these and summarising its errors impossible without hand-writing the control. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.