Shadcn.io is not affiliated with official shadcn/ui
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
Create a professional photography gallery with hover interactions that reveal detailed image metadata. Perfect for portfolios, photo collections, and visual content showcases.
Image Grid with Hover Details preview
Installation
Related Components
Staggered Reveal Gallery
Staggered Reveal gallery layout
Hexagonal Gallery
Hexagonal gallery layout
Ribbon Gallery
Ribbon gallery layout
Carousel 3d Gallery
Carousel 3d gallery layout
Masonry Gallery
Masonry gallery layout
Lightbox Gallery
Lightbox gallery layout
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
Infinite Marquee Gallery
A horizontally scrolling infinite marquee gallery with dual opposite-direction rows built with React, Next.js, shadcn/ui, and Tailwind CSS. Features continuous CSS animation and smooth looping for logos and images.