Docs·Flight Status Card

Flight Status Card

A detailed flight status widget with dot-matrix airport codes, progress tracking, and ETA information. Pixel-perfect recreation of a premium travel app design.

Installation

pnpm dlx shadcn@latest add @componentry/flight-status-card

Usage

API Reference

Property	Type	Default
`departureCode` Three-letter IATA code for departure airport.	`string`	`YYZ`
`arrivalCode` Three-letter IATA code for arrival airport.	`string`	`HND`
`departureCity` Name of the departure city.	`string`	`Toronto`
`arrivalCity` Name of the arrival city.	`string`	`Tokyo`
`departureTime` Formatted string for departure time.	`string`	`MON, 6:14 PM`
`arrivalTime` Formatted string for arrival time.	`string`	`TUE, 7:14 AM`
`eta` Estimated time of arrival label.	`string`	`ETA 2:15 PM`
`timezone` Timezone information text.	`string`	`Tokyo Time`
`nextEvent` Label for the next scheduled event.	`string`	`DINNER IN`
`nextEventTime` Time remaining until the next event.	`string`	`2:34H`
`progress` Percentage of flight completed (0-100).	`number`	`45`
`remainingTime` Formatted string for total remaining flight time.	`string`	`-7H 01M`
`className` Additional CSS classes for styling.	`string`	—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X

TorontoMON, 6:14 PM

TokyoTUE, 7:14 AM

ETA 2:15 PM

Tokyo TimeDINNER IN 2:34H

-7H 01M