This component no longer exists. It was in vuelor’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-12 and this item was not on it. The install command below will fail. It is kept here because a tutorial somewhere still tells people to run it.
Color Picker (HSL Sliders)
vuelor/color-picker-sliders-hslRemovedBlock
HSL color picker built from individual hue, saturation, lightness and alpha sliders.
Install it
npx shadcn@latest add https://vuelor.dev/r/color-picker-sliders-hsl.jsonSource
1<script lang="ts" setup>2import { useForwardPropsEmits } from 'reka-ui'3import {4 ColorPickerRoot,5 ColorPickerInputHSL,6 ColorPickerSliderHue,7 ColorPickerSliderSaturation,8 ColorPickerSliderLightness,9 ColorPickerSliderAlpha,10 type ColorPickerRootProps,11 type ColorPickerRootEmits12} from '@vuelor/picker'1314type ColorPickerProps = Omit<ColorPickerRootProps, 'styling' | 'ui'>1516const props = defineProps<ColorPickerProps>()17const emits = defineEmits<ColorPickerRootEmits>()1819const forwarded = useForwardPropsEmits(props, emits)20</script>2122<template>23 <ColorPickerRoot24 class="p-3"25 :ui="{ shared: { thumb: 'border-2' } }"26 v-bind="forwarded"27 >28 <ColorPickerSliderHue />29 <ColorPickerSliderSaturation />30 <ColorPickerSliderLightness />31 <ColorPickerSliderAlpha />32 <ColorPickerInputHSL :ui="{ item: 'bg-transparent' }" />33 </ColorPickerRoot>34</template>
What it pulls in
npm packages
Other registry items
