This component no longer exists. It was in diceui/base’s manifest when we first indexed it and is not there now — the registry served its inventory on 2026-08-13 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.
compare-slider-vertical-demo
diceui-base/compare-slider-vertical-demoRemovedExample
diceui/base publishes no description for this item.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/sadmann7/diceui/HEAD/docs/public/r/styles/base-vega/compare-slider-vertical-demo.jsonSource
1import {2 CompareSlider,3 CompareSliderAfter,4 CompareSliderBefore,5 CompareSliderHandle,6} from "@/registry/bases/base/ui/compare-slider";78export default function CompareSliderVerticalDemo() {9 return (10 <CompareSlider11 defaultValue={50}12 orientation="vertical"13 className="h-[400px] w-full overflow-hidden rounded-lg border"14 >15 <CompareSliderBefore>16 {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}17 <img18 src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80"19 alt="Before"20 className="size-full object-cover"21 />22 </CompareSliderBefore>23 <CompareSliderAfter>24 {/* biome-ignore lint/performance/noImgElement: Demo image for comparison slider */}25 <img26 src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1920&h=1080&fit=crop&auto=format&fm=webp&q=80&sat=-100"27 alt="After"28 className="size-full object-cover grayscale"29 />30 </CompareSliderAfter>31 <CompareSliderHandle />32 </CompareSlider>33 );34}
What it pulls in
Other registry items
