Comparison Slider

Drag between two images to compare before and after. Works well for photo editing results, design changes, or anything where you want to show a transformation. Touch support is built in for mobile. You can use images, videos, or any other content. Good for portfolios, case studies, or letting clients see the difference for themselves.

Comparison Slider preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/comparison.json

npx shadcn@latest add https://www.shadcn.io/r/comparison.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/comparison.json

bunx shadcn@latest add https://www.shadcn.io/r/comparison.json

Related Components

FAQ