Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

React App Screenshots Hero Block

A React and Next.js hero section with staggered overlapping app screenshots built with shadcn/ui Card, Badge, and Button components and Tailwind CSS

Show your product in action with this React and Next.js hero block that displays multiple app screenshots in a staggered arrangement. Built with TypeScript and shadcn/ui Card, Badge, and Button components, the overlapping screenshot layout uses Tailwind CSS absolute positioning to create depth and showcase multiple features at once. Includes a feature bullet list, dual call-to-action buttons, and a responsive two-column grid that stacks cleanly on mobile. Perfect for SaaS products, mobile apps, or any software landing page where the UI is a key selling point.

React App Screenshots Hero Block preview

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.