A detailed flight status widget with dot-matrix airport codes, progress tracking, and ETA information. Pixel-perfect recreation of a premium travel app design.
| Prop | Type | Default |
|---|---|---|
departureCodeThree-letter IATA code for departure airport. | string | YYZ |
arrivalCodeThree-letter IATA code for arrival airport. | string | HND |
departureCityName of the departure city. | string | Toronto |
arrivalCityName of the arrival city. | string | Tokyo |
departureTimeFormatted string for departure time. | string | MON, 6:14 PM |
arrivalTimeFormatted string for arrival time. | string | TUE, 7:14 AM |
etaEstimated time of arrival label. | string | ETA 2:15 PM |
timezoneTimezone information text. | string | Tokyo Time |
nextEventLabel for the next scheduled event. | string | DINNER IN |
nextEventTimeTime remaining until the next event. | string | 2:34H |
progressPercentage of flight completed (0-100). | number | 45 |
remainingTimeFormatted string for total remaining flight time. | string | -7H 01M |
classNameAdditional CSS classes for styling. | string | — |
Click on the icon in the top right of the example preview to view the source code for specific variants.
This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.
import { FlightStatusCardAdaptive } from "@/components/ui/flight-status-card"
<FlightStatusCardAdaptive />