# Driver Card

Driver or courier card with licence plate, a drawn car in its real colour, photo, rating, ride PIN and message or call buttons. On arrival it highlights the plate and tells riders what to look for.

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

## Install

```bash
npx @lumioui/cli add pro/driver-card
```

## Import

```tsx
import { DriverCard } from "@/components/ui/driver-card/driver-card";
```

## Variants

- `arriving` — Arriving: `npx @lumioui/cli add pro/driver-card-arriving`
- `courier` — Courier: `npx @lumioui/cli add pro/driver-card-courier`
- `in-trip` — In trip: `npx @lumioui/cli add pro/driver-card-in-trip`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `name` | `string` | Driver / courier first name. |
| `photo?` | `ImageSourcePropType | string` | Photo — a source or a URL string. |
| `rating?` | `number` | 0–5, shown with one decimal or two (4.92). |
| `trips?` | `number` | Completed trips — "3,814 trips". |
| `vehicle?` | `DriverVehicle` | — |
| `plate?` | `string` | Licence plate — the thing riders actually look for. |
| `status?` | `string` | Header line. Default "Arriving in" with a countdown, else omitted. |
| `eta?` | `string` | Static ETA label ("4 min") — wins over the countdown. |
| `arrivesAt?` | `number` | Epoch ms of arrival — drives a live countdown. |
| `arrivalWindow?` | `number` | Seconds out at which the closeness light starts to brighten. Default 300. |
| `pin?` | `string` | Ride PIN the rider reads out to the driver. |
| `badge?` | `string` | Small credential line — "Gold courier", "Top-rated driver". |
| `layout?` | `"full" | "compact"` | full (pickup sheet) or compact (in-trip strip). Default "full". |
| `onCall?` | `(e: GestureResponderEvent) => void` | — |
| `onMessage?` | `(e: GestureResponderEvent) => void` | — |
| `onShare?` | `(e: GestureResponderEvent) => void` | — |
| `messagePlaceholder?` | `string` | Message pill text. Default "Message {name}". |
| `className?` | `string` | — |

## Icons rendered

- `message-circle` — /icons.html?i=message-circle
- `star` — /icons.html?i=star
- `phone` — /icons.html?i=phone
- `share` — /icons.html?i=share

Source: https://lumioui.com/components/driver-card