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-customization-demo
diceui-base/compare-slider-customization-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-customization-demo.jsonSource
1"use client";23import {4 CompareSlider,5 CompareSliderAfter,6 CompareSliderBefore,7 CompareSliderHandle,8} from "@/registry/bases/base/ui/compare-slider";910export default function CompareSliderCustomDemo() {11 return (12 <CompareSlider13 defaultValue={50}14 className="h-[300px] overflow-hidden rounded-lg border"15 >16 <CompareSliderBefore className="flex size-full items-center justify-center bg-muted text-center">17 <div className="font-bold text-2xl">Kickflip</div>18 </CompareSliderBefore>19 <CompareSliderAfter className="flex size-full items-center justify-center bg-primary text-center text-primary-foreground">20 <div className="font-bold text-2xl">Heelflip</div>21 </CompareSliderAfter>22 <CompareSliderHandle>23 <div className="flex size-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg">24 <span className="font-bold text-xs">VS</span>25 </div>26 </CompareSliderHandle>27 </CompareSlider>28 );29}
What it pulls in
Other registry items
