Multi-City Route

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

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

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

Import & use
import { Travel23 } from "@/components/beste/piece/travel23";

<Travel23
  hops={[
    {
      "code": "IST",
      "caption": "Depart"
    },
    {
      "code": "DOH",
      "caption": "2h"
    },
    {
      "code": "BKK",
      "caption": "4 days"
    },
    {
      "code": "SIN",
      "caption": "3 days"
    },
    {
      "code": "TYO",
      "caption": "Return"
    }
  ]}
  summary="11-day multi-city itinerary"
/>

More Travel pieces

View all Travel
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.

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.

ISTIstanbul
HNDTokyo
11h 05m · Nonstop

Route Arc

travel5

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

Next tripLisbon · Jun 14
12days to go
Boarding in 4h 37m · 09:40 local

Departure Countdown

travel10

Pre-trip card with a focal day count, a thin progress line toward departure, and a boarding-detail caption.

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.