Shadcn How It Works Sections

How it works section components built with shadcn/ui to guide visitors through a process or set of steps. These blocks use numbered steps, icons, and short descriptions to reduce friction, build confidence, and help users understand the journey before signing up or purchasing.

How It Works 1 Pro

Centered badge, heading and subtitle above three steps with icons in dashed circles joined by dashed curved connectors on desktop. On phones the steps become a vertical timeline with a dashed line.

How It Works 2 Pro

Three column layout with a heading and text on the left, a tall rounded building photo in the middle and four numbered steps with titles and descriptions on the right.

How It Works 3 Pro

Two column section with a rounded product image on one side and a How it works badge, heading and three numbered steps separated by dividers on the other.

How It Works 4 Pro

Narrow centered column with a heading and subtitle above three steps separated by dividers, each with a small #1 style number tag, a bold title and a longer paragraph.

How It Works 5 Pro

Three column grid where a muted card holds the heading and subtitle and five bordered cards show numbered steps with a small number badge, title and description.

How It Works 6 Pro

Two tone How we Work heading above four steps in a divided list, each with a rounded Step 01 style pill, a large title and a short description.

How It Works 7 Pro

Centered badge, heading and text above three bordered cards with oversized faded step numbers, a title and a description. The number brightens slightly when a card is hovered.

How It Works 8 Pro

Image panel next to three clickable steps that auto advance every three seconds. The active step expands its description, shows a progress bar and fades in its matching image.

How It Works 9 Free

Two column grid of four steps without a section heading, each showing a step number, a title, a short description and a bordered image below the text.

How It Works 10 Pro

Small uppercase label and centered heading above three bordered cards, each with a top image, a title, a short description and a Learn more link with an arrow.

How It Works 11 Pro

Centered heading and paragraph above three step cards, each with a step label, a large fading number in the corner, a title and a short description.

PreviousContact Us
NextStats

About Shadcn UI How It Works Blocks

A how it works section walks visitors through the process behind a product or service in a few numbered steps, so they know exactly what happens after they sign up or get in touch. These ten shadcn how it works blocks include icon timelines, numbered lists, step cards, image led layouts and an auto playing step switcher.

Like the rest of our shadcn blocks, every layout is built with React, TypeScript and Tailwind CSS and uses shadcn ui components such as Badge where a label is needed. The steps live in a simple array, the interactive block needs no extra packages, and all of these shadcn components adapt to your light and dark theme.

Key Elements of a How It Works Section

  • A short heading: something like “Get started in minutes” that promises an easy process.
  • Ordered steps: three to five steps, each with a number or icon so the order is obvious.
  • Action titles: step titles that start with a verb, such as Connect, Create or Launch.
  • One line of detail: a sentence per step that explains what the visitor or your team does.
  • Supporting visuals: an image or icon per step when the process benefits from showing the product.

Where and Why to Use How It Works Blocks

Visitors rarely act when they cannot picture what comes next. A how it works block turns an abstract offer into a concrete sequence and makes the first step feel small. It is useful for SaaS onboarding as much as for services such as construction, consulting or claims handling. Because these blocks use shadcn ui and Tailwind CSS tokens, they sit naturally between your hero, features and pricing sections.

  • SaaS landing pages: show the path from sign-up to first result in three steps.
  • Agencies and studios: explain your design or delivery process before a visitor requests a quote.
  • Fintech and lending: list the steps of an application or payment plan to build confidence.
  • Real estate and construction: describe the journey from consultation to handover.
  • Service and claims businesses: show who does what at every stage of a case.
  • Creator and community platforms: explain how new members grow their reach over time.

How It Works Blocks in This Collection

  • How It Works 1: A good fit for website builders and template products that want a quick three stage story with icons linked by dashed curves.
  • How It Works 2: Suits property developers and builders, giving a large photo the center stage between the pitch and a four stage timeline.
  • How It Works 3: Pairs a product screenshot with a short numbered list, ideal for apps that can be set up in a few minutes.
  • How It Works 4: A narrow, reading friendly column for processes that need a few sentences of explanation per step.
  • How It Works 5: Handles longer flows with five stages, for example a loan or installment application, in a compact card grid.
  • How It Works 6: Shows a creative agency’s working method as a calm, typographic list with step pills.
  • How It Works 7: Three cards with oversized numbers that work well for registration or account setup in fintech and banking apps.
  • How It Works 8: The most engaging option for product homepages, where each step comes with its own visual and the section plays itself.
  • How It Works 9: A free layout for service providers that want to illustrate every stage with a photo or screenshot.
  • How It Works 10: Presents stages as linked cards, useful when each step has its own page, such as accelerator or investment programs.

Similar Block Categories

  • Feature Sections: describe what the product does before showing how to start.
  • Onboarding Screens: turn the steps into an actual in-app onboarding flow.
  • Integrations: show the tools behind a “connect your tools” step.
  • Call to Action: follow the steps with a clear button to take the first one.
  • FAQs: answer the questions that remain after visitors read the process.

Accessibility

Every block uses a heading for each step title (h3, or a bold paragraph in the interactive block), and How It Works 1 hides its decorative connector lines from screen readers with aria-hidden. Images in How It Works 8, How It Works 9 and How It Works 10 use the step title as alt text. The screenshot in How It Works 3 has no alt attribute, so add a short description or an empty alt if it is purely decorative.

How It Works 8 renders each step as a real button, so it can be reached and activated with the keyboard. It advances automatically and does not check for reduced motion, so consider pausing the cycle when the visitor prefers reduced motion or while a step has focus, and marking the active step with aria-current.

How It Works FAQ

A how it works section explains the path from sign-up to result as a short sequence of numbered steps, each with a title and one or two sentences. It shows visitors that getting started is simple and tells them what will happen next.

They are ready-made step sections built with React and Tailwind CSS, using shadcn ui components such as Badge where a label is needed. Each block reads its steps from a steps array, so you change the text and the layout updates on its own.

Uncertainty about the process is a common reason people do not sign up or book. Breaking the process into three to five clear steps lowers that uncertainty, sets expectations and makes the next action feel small.

Three or four steps work best. Fewer can feel vague, and more than five starts to look like work. The blocks here use three steps in most layouts, four in the service and agency layouts and five in How It Works 5.

On landing pages right after the hero or features, on service pages before pricing or a contact form, and on onboarding or signup pages. It works best just before the call to action it explains.

Every block declares a steps array at the top of the file. Each item has a title and description, plus a number, an icon or an image depending on the layout. Edit, add or remove items and the grid or list renders the new count.

How It Works 8. It cycles through three steps automatically, every three seconds by default, with a progress bar under the active step and a matching image that fades in on the left. Visitors can click any step to jump to it. Change STEP_DURATION to make it faster or slower.

No. How It Works 8 drives its progress bar with requestAnimationFrame and React state, and the fades use Tailwind transition classes. None of the how it works blocks import motion or another animation package.

How It Works 9 places an image under each of its four steps in a two column grid, How It Works 10 puts an image on top of each of three cards with a Learn more link, and How It Works 8 swaps one large image as the active step changes.

How It Works 1. Each step has a lucide icon inside a dashed circle, and on desktop dashed curved lines connect the circles. On phones the steps stack vertically with a dashed line running between the icons.

How It Works 4, How It Works 5, How It Works 6 and How It Works 7 use no images. They suit pages that already have a lot of visuals or products where the steps are easier to explain in words.

The multi column layouts stack into one column. How It Works 1 switches to a dedicated vertical timeline, How It Works 2 keeps its steps in two columns under the image and How It Works 8 places the image above the step list.

Yes. How It Works 9 is free. Install it with npx shadcn@latest add @shadcnuikit/how-it-works9. The other nine blocks are part of All Access.
shadcn how it works sections
Unlock Premium Blocks & Sections
Premium blocks are part of All Access. One license unlocks the whole Shadcn UI Kit, so you can build complete pages and products instead of single sections.
  • 550+ blocks for landing pages, stores, dashboards and apps
  • 16 admin dashboards and 17 ready-made apps
  • 5 premium Next.js website templates
  • 560+ component variants and 70+ examples
  • Install with the shadcn CLI or from your AI editor through the MCP server
  • Lifetime updates, including every new block we release
Unlock Now

One-time payment, no subscription.