Shadcn.io is not affiliated with official shadcn/ui
Hero Split Phone Frame
A split-layout hero section for React and Next.js with headline, dual ShadcnioButton CTAs, and avatar social proof on the left and a portrait phone frame mockup with notch and home indicator on the right built with shadcn/ui and Tailwind CSS
Pair a bold left-side pitch with a portrait phone frame mockup using this split phone frame hero block for React and Next.js. Features an availability pill, headline, descriptive subtitle, dual ShadcnioButton call-to-action buttons with fixed widths, and an avatar stack with rating text on the left, with a standalone portrait phone frame on the right that includes a rounded bezel, top notch, home indicator, and a crosshair image placeholder signaling where to drop your app screenshot. Built with TypeScript, the ShadcnioButton component, motion/react entrance animations, and Tailwind CSS. Perfect for mobile app landing pages, phone-centric product hero sections, iOS and Android app launches, and any Next.js page where a device mockup should anchor the visual side of a split hero.
Related Components
React App Showcase Hero Block
React hero with phone mockup and app store buttons built with shadcn/ui
React App Screenshots Hero Block
React hero with staggered app screenshots using shadcn/ui Card components
React Rating Hero Block
React hero with star ratings display styled with Tailwind CSS
React Stats Hero Block
React hero with key metrics and counters using shadcn/ui Badge
React Avatar Group Hero Block
React hero with overlapping user avatars using shadcn/ui Avatar
React Product Screenshot Hero Block
React hero with browser mockup and product screenshot
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Org Chart
A split-layout hero with an organizational chart tree mockup for React and Next.js featuring a three-level node hierarchy, SVG connection lines, emerald checklist, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Split Phone Mockup
A split-layout hero with a phone frame mockup for React and Next.js featuring a dynamic island notch, crosshair placeholder, dual app store ShadcnioButton CTAs, and avatar stack social proof built with shadcn/ui and Tailwind CSS