Shadcn.io is not affiliated with official shadcn/ui
Hero Diagonal Split Showcase
A diagonal split showcase hero for React and Next.js featuring two skewed panels divided by a CSS clip path with a dark inverted copy panel and a light stat tile panel and a single ShadcnioButton CTA built with shadcn/ui and Tailwind CSS
Build a diagonal split showcase hero with two visually skewed panels divided by a CSS clip path boundary using this React and Next.js block. Features a dark inverted left panel containing a headline, subtitle, and a single ShadcnioButton CTA with the sliding arrow effect, paired with a light right panel showing three stat tiles with values and labels separated by the diagonal seam, fully theme aware so it inverts in dark mode. Built with TypeScript, ShadcnioButton, motion/react entrance animations, Lucide React icons, and Tailwind CSS. Perfect for bold brand statements, comparison heroes, agency landing pages, and any product page that needs a memorable high contrast hero.
Related Components
React Dark Centered Concentric Rings Hero Block
Dark centered hero with ring decoration
React Split Image Hero Block
Split layout hero with image placeholder
React Two Columns Hero Block
Two column hero layout
React Dark Metric Tiles Hero Block
Dark hero with metric tiles
React Split Quote Panel Hero Block
Split hero with quote panel
React Comparison Hero Block
Hero with side by side comparison
FAQ
Was this page helpful?
Sign in to leave feedback.
Dashboard Preview
A centered hero for React and Next.js with headline and CTAs above a wide browser frame mockup containing a crosshair dashboard placeholder built with ShadcnioButton and Tailwind CSS
Email Signup
A centered conversion-focused hero for React and Next.js with large email input, ShadcnioButton submit, avatar stack social proof, and trust text built with shadcn/ui Input and Tailwind CSS