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.
Install
pnpm dlx shadcn@latest add "https://componentry.harshjdhv.com/r/flight-status-card.json"
Examples
Default
TorontoMON, 6:14 PM
TokyoTUE, 7:14 AM
ETA 2:15 PM
Tokyo TimeDINNER IN 2:34H-7H 01M
TorontoMON, 6:14 PM
TokyoTUE, 7:14 AM
ETA 2:15 PM
Tokyo TimeDINNER IN 2:34H-7H 01M
import { FlightStatusCardAdaptive } from "@/components/ui/flight-status-card"
<FlightStatusCardAdaptive />Custom Route
San FranciscoFRI, 10:30 AM
LondonSAT, 6:45 AM
ETA 6:45 AM
London TimeLANDING IN 4:15H-4H 15M
San FranciscoFRI, 10:30 AM
LondonSAT, 6:45 AM
ETA 6:45 AM
London TimeLANDING IN 4:15H-4H 15M
import { FlightStatusCardAdaptive } from "@/components/ui/flight-status-card"
<FlightStatusCardAdaptive
departureCode="SFO"
arrivalCode="LHR"
departureCity="San Francisco"
arrivalCity="London"
departureTime="FRI, 10:30 AM"
arrivalTime="SAT, 6:45 AM"
eta="ETA 6:45 AM"
timezone="London Time"
nextEvent="LANDING IN"
nextEventTime="4:15H"
progress={65}
remainingTime="-4H 15M"
/>Features
Dot Matrix Display
LED-style airport code rendering with individual dot animations
Halftone Pattern
Subtle gradient dot pattern for visual depth
Progress Tracking
Animated progress bar with glowing plane icon
ETA Panel
Real-time arrival estimates with timezone and event countdown
Theme Support
Separate dark and light mode variants with adaptive option