Shadcn.io is not affiliated with official shadcn/ui
Hero Block Two Columns
Hero block with two equal columns for comparison or dual messaging
Two paths, one hero. This React hero block uses a two-column layout to present two options, audiences, or product tiers side by side. Built with shadcn/ui Button, Badge, and Card components. Each column has its own headline, description, and CTA—perfect for comparing plans, addressing different user personas, or showing before/after scenarios. Columns stack vertically on mobile with clear visual separation. Perfect for pricing comparisons, audience segmentation (individuals vs teams), or product variants.
Hero Block Two Columns preview
Loading...
Scroll to load preview
Installation
Install
Pro block
Related Components
Hero Block Split Image
Split layout with image
Hero Block Pricing
Hero with pricing
Hero Block Tabs
Hero with tabbed content
Hero Block Comparison
Hero with before/after