The ComparisonSlider component stacks two layers and reveals one against the other with a divider the reader drags, clipping the top layer rather than resizing it so neither side reflows as the divider moves.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/comparison-slider.jsonEverything Comparison Slider accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| before (required) | React.ReactNode | No default | The layer revealed on the leading side of the divider |
| after (required) | React.ReactNode | No default | The layer underneath, revealed as the divider moves across it |
| defaultPosition | number | 50 | Where the divider starts, 0 to 100 |
| orientation | 'horizontal' | 'vertical' | horizontal | Which way the divider travels |
| label | string | Compare before and after | Accessible name for the divider |
| className | string | '' | Additional CSS classes. Set the frame's size here |
Required.