Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React Image Gallery Hero Block

A React hero section with interactive bento-style image gallery and lightbox preview. Built with Next.js, shadcn/ui Dialog and Badge components, and Tailwind CSS.

A picture is worth a thousand words--so show many. This React and Next.js hero block combines a compelling headline with a bento-style image gallery that showcases your work or product from multiple angles. Built with TypeScript, shadcn/ui Button, Badge, and Dialog components, plus Tailwind CSS for responsive grid layouts. Features a large primary image with smaller supporting images in an asymmetric CSS Grid. Images have subtle Framer Motion hover animations and open in a lightbox Dialog. Perfect for portfolios, real estate listings, e-commerce storefronts, or any product where visual storytelling drives conversion.

Loading...
Scroll to load preview

Installation

Install
Pro block

FAQ

Last updated on March 28, 2026

Was this page helpful?

Sign in to leave feedback.