Shadcn.io is not affiliated with official shadcn/ui
React Two Columns Hero Block
A React and Next.js two-column hero section built with shadcn/ui Card, Button, and Badge components plus Tailwind CSS grid. Features side-by-side comparison cards with highlighted popular option and Framer Motion animations.
Present two paths in one hero with this React two-column hero block for Next.js. Built with TypeScript, shadcn/ui Card, CardHeader, CardContent, Button, and Badge components, and Tailwind CSS grid utilities, it displays two side-by-side option cards with individual headlines, feature lists, and CTAs. The "Popular" column is highlighted with a shadcn/ui Badge and border-primary accent. Framer Motion staggers the entrance animations for each column. Perfect for SaaS pricing comparisons, audience segmentation (individuals vs teams), product tier selection, and any landing page that needs to guide users between two distinct offerings.
React Two Columns Hero Block preview
Installation
Related Components
React Comparison Hero Block
A React hero section with before-and-after comparison for product showcases
React Pricing Hero Block
A React hero block with pricing cards and plan selection for SaaS products
React Pricing Toggle Hero Block
A React hero section with monthly/yearly pricing toggle and plan cards
React Feature Cards Hero Block
A React hero block with a grid of feature cards highlighting product capabilities
React Split Image Hero Block
A React hero section with a side-by-side text and image split layout
React Tabs Hero Block
A React hero block with tabbed content sections for organizing multiple views
FAQ
Was this page helpful?
Sign in to leave feedback.
React Trusted By Hero Block
A React and Next.js trusted-by hero section built with shadcn/ui Button components and Tailwind CSS. Features grayscale company logos, trust indicators, and a bold CTA with Framer Motion animations.
React Typewriter Hero Block
A React and Next.js typewriter hero section built with shadcn/ui Button and Badge components plus Tailwind CSS. Features an animated typing effect that cycles through rotating headlines with a blinking cursor and configurable speed.