Flight Progress Card
Track a journey with dot-matrix codes, a swappable ETA panel and a glowing progress pill that counts the remaining time down.
- Dependencies
- No extra packages
- Size
- 367 lines
- Controls
- 9 controls
Installation
CLI · shadcn registry
npx shadcn@latest add https://ui.onycx.dev/r/flight-progress-card.json1 · Dependencies
None beyond React and Tailwind.
2 · Copy the source
components/onycx/flight-progress-card.tsx
Requires React 19 and Tailwind CSS v4. Copy the source from the flight-progress-card.tsx tab after tweaking: your values are baked in as the new defaults. Exported image examples use portable sample artwork. Replace it with your own media as needed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| fromCode / toCode | string | "YYZ" / "HND" | Up to four letters or digits, drawn as a bold 5 x 7 dot matrix. |
| fromCity / toCity | string | "Toronto" / "Tokyo" | City names under the codes. |
| fromTime / toTime | string | "Mon, 6:14 PM" / "Tue, 7:14 AM" | Departure and arrival lines, set in uppercase. |
| eta / etaZone | string | "2:15 PM" / "Tokyo Time" | Arrival in destination time. |
| etaAlt / etaAltZone | string | "1:15 AM" / "Toronto Time" | Arrival in origin time; the swap button toggles between the two. |
| notice | string | "Dinner in 2:34h" | Highlighted line in the ETA panel. Empty hides it. |
| progress | number | 46 | 0–100; the pill never shrinks below its own height so the plane stays visible. |
| totalMinutes | number | 780 | Flight length; the remaining label is totalMinutes x (1 - progress). |
| accent / highlight | string | "#b8f02a" / "#ff8a1a" | Fill and glow colour; arrow and notice colour. |
| duration | number | 1800 | Fill time in ms on first view (ease-out). |
| width | number | 760 | Maximum width in px. |