shadcn.io is not affiliated with official shadcn/ui
Split Layout Phone Frame Mockup Hero Block for React
A reverse split hero for a mobile app: two phones rise from the foot of a tinted panel on the start side, with a Shine Button to the App Store, an outline link to Google Play and a rider count at the end.
Installation
Overview
A reverse split-layout hero with two phones, for React with Base UI, shown for Paceline, a cycling app. A tinted panel runs flush to the page column's start rail and its foot, and two phones drawn in CSS stagger on it, rising from the bottom edge and fading out under a mask: the front one on a finished ride, with a route map whose line draws itself once, the distance, time, average speed and climb, an elevation chart and the club riders who came along; the one behind on nearby routes, with a search field, filter chips, four routes with their outlines and a tab bar. A solid divider separates the panel from the copy, and + marks sit where it meets the top rule. At the end sit an announcement link, a headline, a ShineButton link to the App Store, an outline Button link to Google Play and an avatar stack with the rider count. On phones the copy comes first and the panel follows under a ruled line, with the front phone alone. It's built from Announcement, Status, Shine Button, Button, Avatar and Guides with Lucide icons and Tailwind CSS, and settles in with CSS transitions that stay still under reduced motion. Made for mobile app landing pages, fitness, travel and navigation apps, and any product with a mobile-first experience.
FAQ
How do I put my app's screenshots in the phones?
Replace the contents of a phone's screen, from the status bar to the tab bar, with an img (or your framework's image component) with className="size-full object-cover object-top"; the screen already clips to its rounded corners. The phones are 17.5rem wide and 38rem tall, a 1:2.2 portrait close to a modern phone, so a full-screen capture such as 1170 by 2532 fits with a sliver cropped at the bottom, which the panel hides anyway. If the screenshots matter to the visitor, take aria-hidden and inert off the panel and give each image an alt.
How do I connect the store buttons to my listings?
Replace each href="#" with your App Store and Google Play URLs; add UTM parameters if you want to know which page sent the download. The App Store link is the block's one filled button, a Shine Button, and Google Play is an outline button, and a visually hidden prefix gives screen readers the full names: Download on the App Store, Get it on Google Play.
On Base UI, each button renders its link with render={<a href="…" />} and nativeButton={false}.
How do screen readers read the hero?
The headline is the block's one h1, the pill and both store buttons are links with full names, and the rider count is plain text beside an avatar stack that's hidden, since the count says what it means. The phone panel is aria-hidden and inert, so screen readers skip the mockups and nothing in them takes focus.
How does the split layout adapt to phones?
The two columns stack below the lg breakpoint, with the copy first and the panel under it, separated by a ruled line with + marks on the rails. The panel is 22rem tall, then 28rem from sm, and it shows the front phone centred and cut off at the bottom; the second phone appears from sm. The store buttons wrap when the row runs out of room, down to 320px, and the headline balances its lines.
How is the route on the map drawn?
The map is an SVG path with pathLength set to 1 and a dash as long as the path, so a CSS transition on stroke-dashoffset draws the line from its start once, on first paint. With reduced motion on, the transition is off and the line is simply there. The map's grid is a CSS gradient, and the map keeps dir="ltr" in a right-to-left page, since a route doesn't mirror.
Related
- Pro
Split Phone Frame Hero
Mobile and mediaA split hero for a mobile app: copy, store links and social proof beside a phone frame that slides out of a hairline frame, cut off at its foot.
- Pro
Phone Trio App Download Hero
Mobile and mediaA centered showcase hero for a mobile app: a headline, a Shine Button to the App Store with Google Play beside it and a proof line over a hairline band of three phones that run off the bottom.
- Pro
Phone Frame Mockup Hero
Mobile and mediaA centred showcase hero for a mobile app on solid rails: store links with a Shine Button, a phone showing the app between two cards, fading out over a ruled band of three stats.
- Pro
Split Layout Overlapping Browser Frames Hero
Product windowsA split hero for a design tool: a headline, a Shine Button, a second action and three short feature ticks beside two overlapping browser windows that run off the edge of the column: a projects list behind an editor.
- Pro
Split Layout Image Hero
Product windowsA reverse split hero for an AI code assistant: an editor drawn from UI runs edge to edge to the start rail, with a file tree, code, a ghost suggestion and an assistant panel; a divider and the copy sit at the end.
- Pro
Centered Browser Frame Hero
Product windowsA centered showcase hero over a full-width browser window showing the product, a logs explorer with a request histogram and a log, held by a hairline frame and faded below the fold.