Zostel
Trips & places Itinerary Timeline

Itinerary Timeline

Day by day, stop by stop.

Preview

1
Arrive in Manali

Check in at Zostel Manali

Drop the bag. Meet the room.

Stay

Walk to Hadimba Temple

Through the deodar woods.

Walk

Old Manali by night

Cafés, music, new friends.

Meet
2
Go higher

Jogini Falls

An easy morning climb to the water.

Climb

Solang Valley

Snow in winter, meadows in summer.

Gaze
Rise

Back to the common room

Stories, chai, tomorrow's plan.

Usage

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

<ItineraryTimeline
  days={[
    {
      day: 1,
      title: "Arrive in Manali",
      stops: [
        { title: "Check in at Zostel Manali", description: "Drop the bag. Meet the room.", tags: ["Stay"] },
        { title: "Walk to Hadimba Temple", description: "Through the deodar woods." },
      ],
    },
  ]}
/>

ItineraryTimeline

days
Type: ItineraryDay[]
Default: —

The days, in order.

className
Type: string
Default: —

More classes, merged with the component’s own (tailwind-merge).

ItineraryDay / ItineraryStop

day
Type: number
Default: —

The number in the circle.

title
Type: string
Default: —

The day’s name / the stop’s name.

stops
Type: ItineraryStop[]
Default: —

Each with title, description?, tags?.