Driving Directions

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

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

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

Import & use
import { Travel30 } from "@/components/beste/piece/travel30";

<Travel30
  heading="Drive · 42 min"
  total="58 km · Tolls €3.20"
  steps={[
    {
      "label": "Start · Hotel Alma Soho",
      "distance": "0 km",
      "type": "start"
    },
    {
      "label": "Merge onto A1 North",
      "distance": "4 km",
      "type": "turn"
    },
    {
      "label": "Exit 24 · Alcochete",
      "distance": "36 km",
      "type": "turn"
    },
    {
      "label": "Arrive · Casa da Vinha",
      "distance": "58 km",
      "type": "end"
    }
  ]}
/>