# Order Card

Order history and tracking card with a status pill, item thumbnails and a step bar that fills as the order moves along. Once delivered, the bar turns into a proof-of-delivery line.

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

## Install

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

## Import

```tsx
import { OrderStatusPill, OrderThumbStack, OrderCard } from "@/components/ui/order-card/order-card";
```

## Variants

- `booking` — Booking: `npx @lumioui/cli add pro/order-card-booking`
- `ecommerce` — Retail order: `npx @lumioui/cli add pro/order-card-ecommerce`
- `food` — Food delivery: `npx @lumioui/cli add pro/order-card-food`
- `ride` — Ride receipt: `npx @lumioui/cli add pro/order-card-ride`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `status` | `{ label: string` | — |
| `tone?` | `OrderStatusTone }` | — |
| `meta?` | `string` | Right side of the status row — "Mar 3", "#4821". |
| `title` | `string` | — |
| `subtitle?` | `string` | — |
| `items?` | `readonly OrderItem[]` | — |
| `thumbnails?` | `"stack" | "strip"` | "stack" overlaps up to three thumbnails beside the title; "strip" lays them out in a row below. Default "stack". |
| `leading?` | `React.ReactNode` | Replaces the thumbnail stack beside the title — a restaurant photo, a date block, a driver avatar. |
| `steps?` | `readonly string[]` | Step names for the progress bar; omit for no progress. |
| `step?` | `number` | Index of the current step in `steps`. |
| `live?` | `boolean` | The current step is happening now (a courier on the road): its segment  breathes slowly in place, paused off screen. Default false. |
| `proof?` | `string` | Proof-of-delivery line ("Left at front door · 6:42 pm"). Shown in place  of the step bar once the status tone is "success". |
| `eta?` | `string` | Delivery or arrival line — "Arriving today by 8 pm". |
| `total?` | `string` | Pre-formatted total — "$184.20". |
| `totalLabel?` | `string` | Label before the total. Default "Total". |
| `actions?` | `readonly OrderAction[]` | — |
| `onPress?` | `() => void` | Makes the whole card open the order detail. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | Custom content between the header and footer — a route, check-in times. |

## Icons rendered

- `check` — /icons.html?i=check
- `chevron-right` — /icons.html?i=chevron-right
- `clock` — /icons.html?i=clock

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