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.

Preview

TorontoMON, 6:14 PM

TokyoTUE, 7:14 AM

ETA 2:15 PM

Tokyo TimeDINNER IN 2:34H

-7H 01M

Automatically adapts to light and dark mode. Toggle the theme to see it in action.

Custom

San FranciscoFRI, 10:30 AM

LondonSAT, 6:45 AM

ETA 6:45 AM

London TimeLANDING IN 4:15H

-4H 15M

Fully customizable with any route, times, and progress state.

Install

pnpm dlx shadcn@latest add "https://lab.harshjdhv.com/r/flight-status-card.json"

Requires shadcn CLI. Run npx shadcn@latest init first if not set up.

Code

import { FlightStatusCardAdaptive } from "components/ui/flight-status-card"

// Auto-switches between dark and light mode
<FlightStatusCardAdaptive />

// With custom props
<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"
/>

Import and use directly. All props are optional with sensible defaults.

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