Components
Loading preview...
Renders a single route with built-in hover details, animation options, and route style controls.
npx shadcn@latest add https://21st.dev/r/ridemountainpig/flightcn-flight-routeimport { FlightRoute, Map } from "@/components/ui/flightcn-flight-route";
const noopViewportChange = () => {};
export default function DefaultFlightRouteDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="h-[520px] w-full max-w-[920px] overflow-hidden rounded-2xl border border-black/10 bg-[#ececeb] shadow-sm dark:border-white/10 dark:bg-[#1d1d1b]">
<Map
className="h-full w-full"
viewport={{ center: [122, 26], zoom: 2.15 }}
onViewportChange={noopViewportChange}
>
<FlightRoute
from="TPE"
to="HND"
showAirports={true}
showLabel={true}
hoverEffect={true}
tripType="round-trip"
lineStyle="solid"
animate={{ duration: 5000 }}
/>
</Map>
</div>
</div>
);
}
export { DefaultFlightRouteDemo };