Shadcn.io is not affiliated with official shadcn/ui
Hero Block Split Image
Full-height split hero with image column, floating navigation, dual CTAs, and client logo strip
Need a hero that makes an impact above the fold? This React hero block uses a full-viewport-height split layout with content on the left and a large image on the right. Features a floating navigation bar, bold headline with line break, dual CTA buttons (primary and outline variants), and a grayscale client logo strip for social proof. Built with shadcn/ui Button component and Lucide React icons. The layout uses CSS Grid with responsive breakpoints—stacking vertically on mobile with the image below content. The navigation floats at the top with absolute positioning, staying out of the document flow. Perfect for agency sites, portfolios, or any landing page where you want to maximize visual impact while maintaining a clean, modern aesthetic.
Hero Block Split Image preview
Installation
Related Components
Hero Block with Email Signup
Hero with email capture form
Hero Block Dark with App Download
Dark themed hero with app store buttons
Hero Block Product Screenshot
Hero with browser frame mockup
Hero with Feature Cards
Hero with feature cards grid