Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
Hero Block Split Image
Full-height split hero with image column, floating navigation, dual CTAs, and client logo strip
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
Acme Inc.
Elevate Your Design Excellence
Discover the comprehensive journey behind our sophisticated component architecture and the meticulous craftsmanship that powers exceptional digital experiences across modern web applications.
Installation
Related blocks you will also like
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