Route Arc

Visual route card with origin and destination framing an SVG dashed great-circle arc in a selectable tone.

ISTIstanbul

HNDTokyo

11h 05m · Nonstop

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Travel5 } from "@/components/beste/piece/travel5";

<Travel5
  from="Istanbul"
  fromCode="IST"
  to="Tokyo"
  toCode="HND"
  duration="11h 05m · Nonstop"
  tone="primary"
/>