Shadcn.io is not affiliated with official shadcn/ui
Waterfall Masonry Gallery
A Pinterest-style waterfall masonry layout with variable-height cards built with React, Next.js, shadcn/ui, Tailwind CSS, and Framer Motion for responsive multi-column layouts
Create a dynamic visual experience with this waterfall masonry gallery that organizes images in a natural flowing layout. Items automatically distribute across columns based on height, creating an organic Pinterest-style grid perfect for showcasing diverse content.
Waterfall Masonry Gallery preview
Installation
Related Components
Coverflow Gallery
Coverflow gallery layout
Kenburns Gallery
Kenburns gallery layout
Accordion Gallery
Accordion gallery layout
Thumbnail Strip Gallery
Thumbnail Strip gallery layout
Grid Gallery
Grid gallery layout
Justified Gallery
Justified gallery layout
FAQ
Was this page helpful?
Sign in to leave feedback.
Video Thumbnail Gallery
A video thumbnail gallery component with play button overlays and metadata built with React, Next.js, shadcn/ui, and Tailwind CSS. Perfect for video libraries and course platforms.
Gallery with Caption
A gallery grid where each image has a prominent caption below with title, photographer credit, and date in React with Next.js, shadcn/ui, and Tailwind CSS