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 (RGB Sliders)
vuelor/color-picker-sliders-rgbRemovedBlock
RGB color picker built from individual red, green, blue and alpha sliders.
Install it
npx shadcn@latest add https://vuelor.dev/r/color-picker-sliders-rgb.jsonSource
1<script lang="ts" setup>2import { useForwardPropsEmits } from 'reka-ui'3import {4 ColorPickerRoot,5 ColorPickerInputRGB,6 ColorPickerSliderRed,7 ColorPickerSliderGreen,8 ColorPickerSliderBlue,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 pl-2"25 :ui="{ shared: { thumb: 'border-2' } }"26 v-bind="forwarded"27 >28 <div class="flex gap-2">29 <ColorPickerInputRGB30 :ui="{31 group: 'flex-col w-12',32 item: 'bg-transparent last:flex-row-reverse',33 label: 'w-5'34 }"35 />36 <div class="flex flex-col justify-around flex-1">37 <ColorPickerSliderRed />38 <ColorPickerSliderGreen />39 <ColorPickerSliderBlue />40 <ColorPickerSliderAlpha />41 </div>42 </div>43 </ColorPickerRoot>44</template>
What it pulls in
npm packages
Other registry items
