Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
Hero Block Two Columns
Hero block with two equal columns for comparison or dual messaging
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
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.
Built for everyone, from solo to scale
Whether you're an individual creator or a growing team, we have the perfect solution for you.
- Up to 5 projects
- Basic analytics
- Community support
- Standard templates
- Unlimited projects
- Advanced analytics
- Priority support
- Custom branding
- Team collaboration
All plans include a 14-day free trial. No credit card required.
Installation
Related blocks you will also like
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