# Trip Progress

Trip and delivery timeline from pickup through stops to dropoff, with times, status and room for extra details. A glowing marker rides the current leg and lights up each arrival.

> Composed · Pro · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/trip-progress
```

## Import

```tsx
import { TripProgressBar, TripProgress } from "@/components/ui/trip-progress/trip-progress";
```

## Variants

- `multi-stop` — Multi-stop: `npx @lumioui/cli add pro/trip-progress-multi-stop`
- `parcel` — Parcel: `npx @lumioui/cli add pro/trip-progress-parcel`
- `ride` — Ride: `npx @lumioui/cli add pro/trip-progress-ride`

## Props

### TripProgress

| Prop | Type | Notes |
| --- | --- | --- |
| `stops` | `TripStop[]` | — |
| `reached?` | `number` | Index of the last stop reached. -1 = not started. Default 0. |
| `legProgress?` | `number` | 0..1 fill of the leg after `reached`. Default 0. |
| `live?` | `boolean` | Live tracking — the head of the leg in progress breathes. Default false. |
| `title?` | `string` | Header title — "Arriving at 6:42". |
| `subtitle?` | `string` | Header subtitle — "12 min · 3.1 mi". |
| `eta?` | `string` | ETA chip beside the title — "12 min". |
| `showBar?` | `boolean` | Show the horizontal overall-progress bar under the header. Default false. |
| `className?` | `string` | — |

### TripProgressBar

| Prop | Type | Notes |
| --- | --- | --- |
| `progress` | `number` | Overall progress 0..1. |
| `stops?` | `number[]` | Stop positions 0..1 — drawn as ticks. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/trip-progress