Hero Block Image Gallery

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.

Hero Block Image Gallery preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/hero-16.json

npx shadcn@latest add https://www.shadcn.io/registry/hero-16.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/hero-16.json

bunx shadcn@latest add https://www.shadcn.io/registry/hero-16.json

Related Components

FAQ