Itinerary Timeline

A day-by-day vertical timeline displaying trip itinerary stops with circle markers, connecting lines, titles, and descriptions.

Preview

1
Arrival in Manali

Check-in at Zostel Manali

Settle in and meet fellow travellers

Check-in

Old Manali Walk

Explore cafes and shops in Old Manali

Culture

Bonfire Night

Share stories around the campfire

Social
2
Adventure Day

Solang Valley Trek

5-hour trek through pine forests

Trek
Adventure

Lunch at Local Dhaba

Traditional Himachali cuisine

Sunset Point

Watch the sunset over the Himalayas

Usage

tsx
import { ItineraryTimeline } from "zostel-ui";

<ItineraryTimeline
  days={[
    { day: "Day 1", title: "Arrival in Manali", description: "Check in and evening bonfire.", tag: "Manali" },
    { day: "Day 2", title: "Manali to Jispa", description: "Drive through Atal Tunnel.", tag: "Jispa" },
    { day: "Day 3", title: "Jispa to Kaza", description: "Cross Kunzum La pass.", tag: "Kaza" },
  ]}
/>

Props

days
Type: TimelineDay[]
Default: —

Array of day objects with day label, title, description, and optional tag

activeDay
Type: number
Default: 0

Index of the currently active/highlighted day

orientation
Type: "vertical" | "horizontal"
Default: "vertical"

Timeline direction
Previous App Download Banner Next Search Bar