# Trip Itinerary

A trip planner by day whose times work themselves out: add, edit, delete or drag a stop, delay a flight or lengthen lunch, and every later time rolls to its new value.

- Page and source: https://uibrik.com/components/trip-itinerary
- Install (Pro, needs a license key, see https://uibrik.com/docs/pro): `npx shadcn@latest add @uibrik-pro/trip-itinerary`
- Packages: none beyond React
- Import: `import { TripItinerary } from "@/components/uibrik/trip-itinerary/trip-itinerary"`

Where to use the Trip Itinerary React component:

- **Travel apps**: Stops open in place with booking codes and routes, and a delay ripples down the rest of the day on its own.
- **Event and conference schedules**: Fixed sessions stay put while flexible ones flow around them, and clashes are flagged as soon as they happen. Pairs with [Meeting Planner](https://uibrik.com/components/meeting-planner).
- **Field service and delivery routes**: Dragging jobs into a new order recounts every arrival time while you drag. Pairs with [Kanban Board](https://uibrik.com/components/kanban-board).

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| buffer | `number` | `15` | Minutes left between one stop ending and the next flexible one starting. |
| step | `number` | `15` | Minutes each tap of the delay or length buttons changes. |
| clock | `"24h" \| "12h"` | `"24h"` | Show times as 24-hour or 12-hour. |
| reorderable | `boolean` | `true` | Let stops be reordered by their grip. |
| multiple | `boolean` | `false` | Let several stops be open at once. Off, opening one closes the last. |
| showClashes | `boolean` | `true` | Flag stops that start before the one above them ends. |
| editable | `boolean` | `true` | Let stops be added, edited and deleted. |
| addDays | `boolean` | `true` | Show + after the day tabs to add the next day. |
| showSummary | `boolean` | `true` | Show the stop count and the day's first and last time under the tabs. |
| defaultOpen | `"" \| "s1" \| "s7"` | `"s1"` | Id of a stop open on mount. |
| days | `{ id: string; date: string; start: string; stops: Stop[] }[]` |  | Days (controlled). `date` is an ISO date the tabs and heading are formatted from; `start` is when the first flexible stop begins. |
| Stop | `{ id: string; kind: "flight" \| "stay" \| "food" \| "activity" \| "transit"; title: string; subtitle?: string; duration: number; fixed?: string; details?: { label: string; value: string }[]; code?: string; route?: [string, string] }` |  | A stop. `fixed` ("HH:MM") pins its start; without it the stop starts after the one above. `route` draws a from–to line. |
| defaultDays | `TripDay[]` | `SAMPLE_TRIP` | Days on mount (uncontrolled). |
| onDaysChange | `(days: TripDay[]) => void` |  | Called with every day after anything changes: order, times, stops added, edited or deleted, days added or removed. |
| defaultDay | `number` | `0` | Index of the day shown on mount. |
| onDayChange | `(index: number) => void` |  | Called when a different day is picked. |
| icons | `Partial<Record<StopKind, ReactNode>>` |  | Icon for each kind of stop, replacing the built-in filled icons. |
| locale | `string` | `"en-US"` | Locale for the dates on the tabs and heading. |
| className | `string` |  | Classes for the card. |