Shadcn.io is not affiliated with official shadcn/ui
Hero Steps
A centered how-it-works hero for React and Next.js with a horizontal numbered three-step process and connector lines featuring a headline, subtitle, and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS
Build a centered how-it-works hero with a horizontal numbered three-step process using this React and Next.js block. Features a bold centered headline and subtitle, followed by three step cards with numbered circles, titles, and descriptions connected by subtle horizontal lines on desktop and a vertical line on mobile, and dual ShadcnioButton CTAs with trust microcopy. Built with TypeScript, ShadcnioButton, motion/react staggered entrance animations, Lucide React icons, and Tailwind CSS. Perfect for onboarding flows, how-it-works sections, getting-started guides, and product explanation pages.
Related Components
Feature Cards Hero
Hero with feature card grid using shadcn/ui Card
Checklist Hero
Hero with benefits checklist and check icons
Tabs Hero
Hero with tabbed content using shadcn/ui Tabs
Timeline Hero
Hero with timeline layout and event nodes
Progress Hero
Hero with progress indicators and step tracking
Feature List Hero
Hero with vertical feature list and descriptions
FAQ
Was this page helpful?
Sign in to leave feedback.
Stacked Cards
A centered hero with three overlapping fanned-out cards for React and Next.js featuring an announcement pill, dual ShadcnioButton CTAs, and crosshair placeholders built with shadcn/ui and Tailwind CSS
Tabbed Product Views
A tabbed product views hero for React and Next.js featuring a PillTabs segmented control with three swappable mockup panels for chat, code, and docs and dual ShadcnioButton CTAs built with shadcn/ui and Tailwind CSS