Shadcn.io is not affiliated with official shadcn/ui
Image Comparison Slider
An interactive before/after image comparison slider built with React, Next.js, shadcn/ui, and Tailwind CSS. Features draggable divider, labeled sides, center grab handle, and real-time progress percentage display.
Showcase image transformations with an intuitive comparison slider. Users can drag the divider to reveal before/after states, perfect for demonstrating edits, filters, or design changes with precise visual feedback.
Image Comparison Slider preview
Installation
Related Components
Lightbox Gallery
Lightbox gallery layout
Grid Gallery
Grid gallery layout
Masonry Gallery
Masonry gallery layout
Filter Gallery
Filter gallery layout
Sortable Gallery
Sortable gallery layout
Upload Gallery
Upload gallery layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Icon Showcase Gallery
An icon and illustration showcase gallery component with search and category filtering built with React, Next.js, shadcn/ui, and Tailwind CSS. Perfect for design systems and icon libraries.
Image Grid with Hover Details
A simple image grid gallery where hovering reveals full image details including title, description, and camera settings built with React, Next.js, shadcn/ui, Tailwind CSS, and Framer Motion