Components
Loading preview...
Renders multiple routes in batch with shared defaults and per-route overrides.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-flight-routes"use client";
import { FlightRoutes, Map } from "@/components/ui/flightcn-flight-routes";
export default function DefaultFlightRoutesDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[420px] w-full max-w-4xl overflow-hidden rounded-lg border bg-background shadow-sm">
<Map center={[118, 18]} zoom={2.05}>
<FlightRoutes
routes={[
{ from: "TPE", to: "HND" },
{ from: "TPE", to: "SIN" },
{ from: "TPE", to: "BKK" },
]}
showAirports={true}
showLabel={true}
hoverEffect={true}
tripType="round-trip"
lineStyle="solid"
animate={{ duration: 7000 }}
/>
</Map>
</div>
</div>
);
}
export { DefaultFlightRoutesDemo };