---
name: "@flightcn"
slug: "flightcn"
description: "Flightcn is a specialized shadcn registry component set for rendering flight-route and satellite-orbit visualizations on MapLibre-powered maps via the mapcn ecosystem. It provides FlightAirport (single airport marker from IATA code), FlightRoute (great-circle arc between two airports), FlightRoutes (multiple independent routes), FlightMultileg (connected multi-leg journeys), and SatelliteOrbit (globe-based orbital ground tracks with animated markers and custom SVG support). Includes a built-in airport registry with IATA code, name, city, country, and coordinates. Handles antimeridian, hover states, animated paths, and optional airport labels. Use for: adding interactive great-circle flight maps or satellite orbit overlays to a Next.js/MapLibre project that already uses mapcn, with minimal custom geographic math."
category: "Maps"
tags: ["3d", "aesthetic", "ai", "animation", "charts", "dashboard", "maps"]
framework: "react"
license: "MIT"
author: "ridemountainpig"
website: "https://flightcn.yencheng.dev"
github: "https://github.com/ridemountainpig/flightcn"
registry: "https://flightcn.yencheng.dev/r/registry.json"
pro: false
pro_url: null
github_stars: 129
component_count: 13
generated_at: "2026-09-21T01:50:16.753Z"
---

# @flightcn

Flightcn is a specialized shadcn registry component set for rendering flight-route and satellite-orbit visualizations on MapLibre-powered maps via the mapcn ecosystem. It provides FlightAirport (single airport marker from IATA code), FlightRoute (great-circle arc between two airports), FlightRoutes (multiple independent routes), FlightMultileg (connected multi-leg journeys), and SatelliteOrbit (globe-based orbital ground tracks with animated markers and custom SVG support). Includes a built-in airport registry with IATA code, name, city, country, and coordinates. Handles antimeridian, hover states, animated paths, and optional airport labels. Use for: adding interactive great-circle flight maps or satellite orbit overlays to a Next.js/MapLibre project that already uses mapcn, with minimal custom geographic math.

## Links

- Website: https://flightcn.yencheng.dev
- GitHub: https://github.com/ridemountainpig/flightcn
- Registry JSON: https://flightcn.yencheng.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/flightcn
- This file: https://sh4dcn.vercel.app/md/flightcn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://flightcn.yencheng.dev/r/registry.json
pnpm dlx shadcn@latest add https://flightcn.yencheng.dev/r/registry.json
bunx shadcn@latest add https://flightcn.yencheng.dev/r/registry.json
# clone the source repo
git clone https://github.com/ridemountainpig/flightcn.git
# fetch the raw registry index
curl -s https://flightcn.yencheng.dev/r/registry.json
```

## Components (13)

| name | type | description | install |
| --- | --- | --- | --- |
| flight | registry:ui | Composable flight map components for routes, live tracking, weighted networks, geodesic ranges, aircraft trails, traffic flow, and a built-in 515-airport datab… | `npx shadcn@latest add https://flightcn.yencheng.dev/r/flight.json` |
| satellite | registry:ui | A globe-based satellite orbit overlay with animated motion, ground tracks, and custom SVG marker support. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/satellite.json` |
| flight-route-picker | registry:block | Search airports, explore featured routes, and arrange multiple stopovers to compare flight legs, distance and estimated time in the air. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/flight-route-picker.json` |
| flight-tracker-dashboard | registry:block | Live flight progress on the map beside an operations card with altitude, speed, remaining distance, and a playback scrubber. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/flight-tracker-dashboard.json` |
| airline-network-dashboard | registry:block | Weighted hub-and-spoke route network with a ranked destination sidebar and two-way airport highlighting. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/airline-network-dashboard.json` |
| airport-search-map | registry:block | Searchable panel over the built-in 500+ airport database with fly-to markers on selection. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/airport-search-map.json` |
| aircraft-trail-replay | registry:block | Recorded flight track replay with an altitude-graded trail, dashed planned continuation, and a playback scrubber. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/aircraft-trail-replay.json` |
| flight-ops-overview | registry:block | Operations dashboard with live KPI cards, a multi-flight tracking map, and an en-route sidebar that focuses flights on selection. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/flight-ops-overview.json` |
| live-traffic-flow | registry:block | Animated aircraft flowing along weighted global corridors with density presets and toggleable route guides. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/live-traffic-flow.json` |
| departures-board | registry:block | Status-filterable departure list that draws the selected flight on the map — live progress for airborne flights, dashed routes for the rest. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/departures-board.json` |
| aircraft-range-explorer | registry:block | Compare aircraft reach from a departure airport, with labeled 75% and maximum-range boundaries and a live destination count. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/aircraft-range-explorer.json` |
| network-coverage-grid | registry:block | Region-filtered airport coverage map above a stats card grid with two-way selection between cards and markers. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/network-coverage-grid.json` |
| satellite-orbit-tracker | registry:block | Multi-satellite orbit constellation on a globe with per-satellite visibility toggles and orbital metadata. | `npx shadcn@latest add https://flightcn.yencheng.dev/r/satellite-orbit-tracker.json` |

## For AI agents

```text
You are adding components from @flightcn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/flightcn.md) for the component list.
2. Fetch the machine-readable index: https://flightcn.yencheng.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: flightcn).
```