Comparison Slider

Comparison Slider preview

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.

Install with AI

If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this component for you — no copy-paste, no CLI:

use shadcnio to install the comparison component into my project

Related Components

FAQ