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

Dependencies: framer-motion clsx tailwind-merge

Usage

API Reference

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

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