Shadcn.io is not affiliated with official shadcn/ui
Hero Block Steps
Hero block with visual step-by-step process or how it works section
Show users exactly how it works. This React hero block displays a clear step-by-step process with numbered steps, descriptions, and connecting visual elements. Built with shadcn/ui Button, Badge, and Card components. Each step has a number indicator, title, and brief description. The horizontal layout on desktop becomes vertical on mobile with clear visual hierarchy. Perfect for onboarding flows, product explanations, or any service where you need to communicate a simple process. Great for SaaS, apps, or service-based businesses.
Hero Block Steps preview
Installation
Related Components
Hero Block Feature Cards
Hero with feature grid
Hero Block Checklist
Hero with benefits checklist
Hero Block Feature Badges
Hero with feature badges
Hero Block Tabs
Hero with tabbed content