Shadcn.io is not affiliated with official shadcn/ui
React Split Image Hero Block
A React and Next.js split-layout hero section with full-height image column, floating navigation, dual CTAs, and logo strip built with shadcn/ui and Tailwind CSS.
Maximize above-the-fold impact with this React split image hero block for Next.js. Built with TypeScript, it features a full-viewport-height CSS Grid layout, a floating navigation bar using shadcn/ui Button components, dual CTA buttons (primary and outline variants), and a grayscale client logo strip for social proof. Styled entirely with Tailwind CSS utility classes for responsive breakpoints that stack vertically on mobile, this block is perfect for agency landing pages, SaaS product sites, and portfolio homepages.
React Split Image Hero Block preview
Installation
Related Components
React Split Video Hero Block
Split-layout hero with looping video panel built with React and shadcn/ui
React Split Testimonial Hero Block
Split-layout hero with customer testimonial card using shadcn/ui Avatar and Card
React Split Signup Hero Block
Split-layout hero with inline registration form using shadcn/ui Input and Label
React Two Columns Hero Block
Two-column hero layout with flexible content areas built with Tailwind CSS
React Floating Cards Hero Block
Hero section with floating UI cards and depth effects using Framer Motion
React Product Screenshot Hero Block
Hero with browser frame mockup for showcasing product interfaces
FAQ
Was this page helpful?
Sign in to leave feedback.
React Social Proof Bar Hero Block
A React and Next.js hero block with a social proof bar combining avatar stack, customer logos, star rating, and user count. Built with shadcn/ui Button and Badge styled via Tailwind CSS.
React Split Signup Hero Block
A React and Next.js split-layout hero with inline signup form, social login buttons, and marketing content built with shadcn/ui Input, Label, Button, and Tailwind CSS.