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"
/>

More Travel pieces

View all Travel
Turkish Airlines
$312
09:40IST
4h 40m · Direct
12:20LHR

Flight Card

travel1

Flight result with airline, price, two airport codes, and a dotted route arc connecting times.

09:40IST
12:20CDG
3h 40m
2h 30m layover in Paris
14:50CDG
17:05LHR
1h 15m

Trip Segments

travel6

Multi-leg journey card with stacked segment rows and an amber layover strip between them.

Kyoto
Culture
KyotoJapan
Trending this month64.1K saves

Destination Card

travel12

Poster-style destination tile with a warm gradient, corner save heart, category tag, and city label.

Drive · 42 min58 km · Tolls €3.20
Start · Hotel Alma Soho0 km
Merge onto A1 North4 km
Exit 24 · Alcochete36 km
Arrive · Casa da Vinha58 km

Driving Directions

travel30

Step-by-step driving panel with emerald start, sky turn, and rose end markers linked by a vertical rail.

Andrea P.
Andrea P.Solo trip · Jun 2026

Staff remembered our names by day two. The rooftop at sunset alone is worth the trip — would book again in a heartbeat.

Stayed 4 nights

Trip Review

travel19

Traveler review card with avatar initials, star rating, a clipped body paragraph, and a trip-type footer.

ISTDepart
DOH2h
BKK4 days
SIN3 days
TYOReturn
11-day multi-city itinerary

Multi-City Route

travel23

Minimal multi-stop route with airport codes joined by thin connectors and a caption beneath each hop.