Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
Hero Block Image Gallery
Hero block with interactive image gallery, lightbox preview, and bento-style grid layout
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
A picture is worth a thousand words—so show many. This React hero block combines a compelling headline with a bento-style image gallery that showcases your work or product from multiple angles. Features a large primary image with smaller supporting images in an asymmetric grid. Built with shadcn/ui Button, Badge, and Dialog components. The gallery uses CSS Grid for a responsive masonry-like layout that adapts beautifully from mobile to desktop. Images have subtle hover animations and can open in a lightbox dialog. Perfect for portfolios, real estate, e-commerce, or any product where visual storytelling drives conversion.
Crafting digital
experiences
We design and build beautiful digital products that help brands connect with their audience. From concept to launch, we bring visions to life.
200+
Projects
50+
Clients
15+
Awards
Installation
Related blocks you will also like
Hero Block Split with Image
Split layout with single image
Hero Block Product Screenshot
Hero with browser mockup
Hero Block Dark with App Download
Dark hero with image
Hero Block Video Background
Hero with video background