Steps
Step blocks guide users through multi-step workflows and processes. They are useful for onboarding, setup flows, and complex actions where progress tracking and clarity are essential.
Step Tabs with Status Indicators
Step-based tab navigation displaying active, completed, and upcoming states. Built for guided workflows where users need clear visibility into progress, completion status, and next required actions.
Progress Bar with Step Counter
Horizontal progress bar paired with step count indicator. Optimized for long workflows, form completion tracking, and onboarding flows requiring clear percentage-based progress feedback and reduced user drop-off.
Step Timeline with Labels
Timeline-style step component featuring labeled milestones and directional flow. Designed for sequential processes, setup pipelines, and task-driven journeys that benefit from clear start-to-finish visualization.
Vertical Numbered Stepper
Vertical stepper with numbered markers, active state highlighting, and connecting lines. Built for sequential workflows, onboarding flows, and multi-step configuration processes requiring clear linear progression.
Circular Progress Step Indicator
Circular progress component displaying completion percentage with surrounding stroke and centered metric. Designed for onboarding summaries, setup checkpoints, and high-level progress awareness in dashboards.
Icon-Based Vertical Step Timeline
Vertical step timeline using icons, titles, and supporting descriptions aligned along a central axis. Optimized for guided onboarding, profile setup, and permission-based flows with a clear hierarchy.