## Ride Tracker (S—291)

A ride on its way: a schematic route with the car moving along it, ETA, driver and plate, and share or cancel actions.

- URL: https://sundaeui.dev/components/ride-tracker
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/ride-tracker.json`
- Tags: taxi, eta, ride, map, delivery, tracking

The route is an SVG path; the car marker travels along it using the path length, and the ETA counts down with it. Stages go from arriving to on trip to arrived.
Driver details carry the plate in large type, since that is what people look for at the kerb. Cancel asks first.

### Usage

```tsx
import { RideTracker } from '@/components/sundae/ride-tracker'

<RideTracker />
```

### Props

- `driver` (`{ name: string; car: string; plate: string; rating: number }`, required): Driver.
- `minutes` (`number`, default `6`): Starting ETA.
- `speed` (`number`, default `1`): Demo speed multiplier.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Ride-hailing, deliveries, field-service arrivals.

### When not to use

- Real maps with turn-by-turn: use a map SDK.

### Accessibility

- ETA and stage are announced politely; the map is decorative.
- Cancel needs confirmation.
- Reduced motion removes the movement and keeps every state change.