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.
React Image Gallery Hero Block preview
Installation
Related Components
React Split Image Hero Block
A React hero with split layout and single image, built with Next.js and Tailwind CSS
React Product Screenshot Hero Block
A React hero with browser mockup screenshot, built with shadcn/ui and Tailwind CSS
React Bento Grid Hero Block
A React hero with bento grid layout, built with Next.js and shadcn/ui components
React Before After Hero Block
A React hero with before-after comparison slider, built with Tailwind CSS
React App Screenshots Hero Block
A React hero showcasing app screenshots, built with Next.js and Tailwind CSS
React Floating Cards Hero Block
A React hero with floating UI cards, built with shadcn/ui and Framer Motion
FAQ
Was this page helpful?
Sign in to leave feedback.
React Gradient Text Hero Block
A React and Next.js gradient text hero block with CSS bg-clip-text headline effect, shadcn/ui Badge and Button components, and Tailwind CSS responsive styling.
React Integration Grid Hero Block
A React hero section showcasing integration partner logos in a responsive grid layout. Built with Next.js, shadcn/ui Badge and Button components, and Tailwind CSS.