Route Card

Vertical origin to destination route with emerald and rose dots joined by a connector, plus distance and duration.

Office · 5th Ave

Beste HQ · Brooklyn

4.2 mi12 minby car

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

Import & use

import { Location5 } from "@/components/beste/piece/location5";

<Location5
  origin="Office · 5th Ave"
  destination="Beste HQ · Brooklyn"
  distance="4.2 mi"
  duration="12 min"
  mode="by car"
/>