With Steps
A page title with a numbered step indicator that shows progress. Use it across multi screen flows like onboarding, checkout, or a setup wizard.
A page title with a numbered step indicator that shows progress. Use it across multi screen flows like onboarding, checkout, or a setup wizard.
Search blocks by description or jump to a page.
With Steps is a centered page heading paired with a horizontal step indicator. A large bold title sits above a supporting description, and below that a row of numbered circles walks the user through each stage of a flow. Completed steps show a check icon inside a filled circle. Active and upcoming steps show a plain number, with the upcoming step rendered in a muted outline style so the progression is clear at a glance. Chevron separators between steps appear on wider screens and collapse on mobile, where the indicators stack vertically.
The heading copy, description, and step labels are all independent text you can swap freely. You can add or remove steps to match the actual number of stages in your flow, and the check or number inside each circle is controlled by which step you treat as complete or current.
Reach for this block at the top of any screen that is one stop inside a longer sequence. It works well on product analytics SaaS flows where users configure a new data source, connect an integration, or set up a dashboard in several discrete stages. It tells the user exactly where they are without making them leave the current view to check a sidebar or breadcrumb trail. Compared to a plain page title or one with action buttons, this layout earns its space only when there really is a sequence to communicate.
A natural flow around it on an Application page:
Before
After
The block has three main swappable parts:
Tip: keep the step count to five or fewer so the row fits comfortably on a phone screen without the labels truncating or crowding.