# 6 React Stepper & Timeline Components

> Progress through steps and time: horizontal and vertical steppers, wizard forms with validation, activity timelines, milestone scrubbers and shipment order tracking.

3 of 6 free (the rest with PixelPapa Pro), built with Tailwind CSS and Motion, installable with the shadcn CLI.

- [Stepper Horizontal Progress](https://pixelpapa.com/components/steppers/stepper-horizontal-progress.md): A horizontal stepper where the connector line fills toward the next step and each completed circle draws its checkmark.
- [Stepper Order Tracking](https://pixelpapa.com/components/steppers/stepper-order-tracking.md): A shipment tracker where a truck drives along a curved SVG route to the current stage, leaving a solid line behind it and lighting each stop it passes.
- [Stepper Vertical Details](https://pixelpapa.com/components/steppers/stepper-vertical-details.md) (Pro): A vertical stepper where the active step springs open to show its details while finished steps collapse to a one-line summary and the rail fills.
- [Stepper Wizard Form](https://pixelpapa.com/components/steppers/stepper-wizard-form.md) (Pro): A multi-step form that slides between steps in the direction of travel and shakes, with inline errors, when a step fails validation.
- [Timeline Horizontal Milestones](https://pixelpapa.com/components/steppers/timeline-horizontal-milestones.md) (Pro): A draggable horizontal roadmap: the track glides to centre the chosen milestone, a ring marker slides between dots, and reached milestones fill the line.
- [Timeline Vertical Activity](https://pixelpapa.com/components/steppers/timeline-vertical-activity.md): An activity feed on a vertical rail: icon nodes pop in one after another while the connecting line draws downward between them.