# Timeline Horizontal Milestones — React Stepper Component

> A draggable horizontal roadmap: the track glides to centre the chosen milestone, a ring marker slides between dots, and reached milestones fill the line.

- Category: [Steppers & Timelines](https://pixelpapa.com/components/steppers.md)
- Tags: timeline, milestones, roadmap, drag, horizontal
- Dependencies: lucide-react, motion (plus React and Tailwind CSS v4)
- Last updated: 2026-11-13
- Live preview: https://pixelpapa.com/components/steppers/timeline-horizontal-milestones

## Install (PixelPapa Pro)

This is a Pro component. With a Pro or Scale plan and the `@pixelpapa` registry set up (https://pixelpapa.com/docs/installation#pro):

```bash
npx shadcn@latest add @pixelpapa/timeline-horizontal-milestones
```

The file is written to `components/pixelpapa/timeline-horizontal-milestones.tsx`. Source code is available to Pro members on https://pixelpapa.com/components/steppers/timeline-horizontal-milestones.

## AI prompt

```text
Add the "Timeline Horizontal Milestones" component from PixelPapa UI to this project.

What it is: A draggable horizontal roadmap: the track glides to centre the chosen milestone, a ring marker slides between dots, and reached milestones fill the line.
Category: Steppers & Timelines. Depends on: lucide-react, motion.

1. Install it with the shadcn CLI. It is a PixelPapa Pro component, so components.json needs the "@pixelpapa" registry with my API key (https://pixelpapa.com/docs/installation#pro):
   npx shadcn@latest add @pixelpapa/timeline-horizontal-milestones
   (If the CLI is unavailable, fetch https://pixelpapa.com/r/timeline-horizontal-milestones.json with the header "Authorization: Bearer $PIXELPAPA_API_KEY", write files[0].content to components/pixelpapa/timeline-horizontal-milestones.tsx and install the listed dependencies.)
2. Import it from "@/components/pixelpapa/timeline-horizontal-milestones" and place it where I describe below.
3. Keep its animation timings and accessibility attributes. Replace the demo copy and data with content that fits my product, and use my existing theme tokens (bg-background, text-foreground, bg-primary, border-border) rather than hard-coded colours.

Where to use it: <describe the page and position here>
```

## More steppers & timelines

- [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 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.