Trip Progress

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/trip-progress

Usage

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

Also exported: TripProgressBar.

Examples

Multi-stop

A ride with two stops on the way.

Parcel

A shipment's milestones.

Ride

The in-trip sheet.

API reference

TripProgress

Prop Type Default
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 Default
progress* number

Overall progress 0..1.

 —
stops number[]

Stop positions 0..1 — drawn as ticks.

 []
className string —