## Flight Status (S—309)

A flight card: route with a progress plane, gate and seat in large type, live delay or gate changes, and alerts.

- URL: https://sundaeui.dev/components/flight-status
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/flight-status.json`
- Tags: boarding, status, flight, airline, travel, gate

The header shows the route as airport codes with local times. The status line moves through scheduled, boarding, departed and landed; delays show the new time beside the old one struck out.
Gate and seat are the biggest text on the card because that is what people look for in a terminal. Alerts can be toggled per flight.

### Usage

```tsx
import { FlightStatus } from '@/components/sundae/flight-status'

<FlightStatus />
```

### Props

- `flight` (`{ code: string; from: string; to: string; dep: string; arr: string; gate: string; seat: string }`, required): Flight.
- `events` (`{ at: number; kind: string; value?: string }[]`): Status changes for the demo.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Travel apps, booking confirmations, day-of-travel screens.

### When not to use

- Multi-leg itineraries: list each leg.

### Accessibility

- Status changes are announced politely; the route graphic is decorative.
- The alerts switch is labelled.
- Reduced motion removes the movement and keeps every state change.