Stepper

Design a stepper component for a multi-step flow like checkout, onboarding, or account setup. The component should show where the user is, what is complete, and what comes next. Keep the structure simple: step number, step label, and a connector that shows sequence.

Build the full state set: default, current, completed, upcoming, and disabled. Completed steps should be clickable when the flow allows revisiting them. The current step needs stronger emphasis than the rest, and upcoming steps should read as inactive without looking broken.

Show how the stepper behaves at different widths. On desktop, use the full labeled version. On smaller screens, switch to a compact treatment that still preserves order and the active step. Include focus, hover, and keyboard navigation states so the component works as a real control, not just a visual indicator.

Use a visual system that fits a product UI: clear contrast, concise labels, and spacing that keeps the whole sequence readable at a glance. If a step can be skipped or locked, make that state explicit instead of hiding it.

Encapsulate each step with microinteractions, like a subtle animation or a tick mark, to reward progress and keep users engaged!