121 Pro components and page blocks

Get Pro
uibrik

Updated

Trip Itinerary

Pro

Preview

Customize

Buffer15min
Step15min
24h
Flight

Installation

Pro

Trip Itinerary is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/trip-itinerary

Usage

import { TripItinerary } from "@/components/uibrik/trip-itinerary/trip-itinerary";​<TripItinerary  buffer={15}  step={15}  clock="24h"  reorderable  multiple={false}  showClashes  editable  addDays  showSummary  defaultOpen="s1"  defaultDay={0}  locale="en-US"  onDaysChange={(days) => {}}  onDayChange={(index) => {}}  // days={[{ id: "…", date: "…", start: "…", stops: […] }]}  // Stop={{ id: "…", kind: "flight", title: "…", duration: 0 }}  // defaultDays={[…]}  // icons={…}/>

Where to use Trip Itinerary

  • 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

  • Field service and delivery routes

    Dragging jobs into a new order recounts every arrival time while you drag.

    Pairs with Kanban Board

Props

TripItinerary
buffer
Type number
15
Minutes left between one stop ending and the next flexible one starting.
step
Type number
15
Minutes each tap of the delay or length buttons changes.
clock
Type "24h" | "12h"
"24h"
Show times as 24-hour or 12-hour.
reorderable
Type boolean
true
Let stops be reordered by their grip.
multiple
Type boolean
false
Let several stops be open at once. Off, opening one closes the last.
showClashes
Type boolean
true
Flag stops that start before the one above them ends.
editable
Type boolean
true
Let stops be added, edited and deleted.
addDays
Type boolean
true
Show + after the day tabs to add the next day.
showSummary
Type boolean
true
Show the stop count and the day's first and last time under the tabs.
defaultOpen
Type "" | "s1" | "s7"
"s1"
Id of a stop open on mount.
days
Type { 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
Type { 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
Type TripDay[]
SAMPLE_TRIP
Days on mount (uncontrolled).
onDaysChange
Type (days: TripDay[]) => void
–
Called with every day after anything changes: order, times, stops added, edited or deleted, days added or removed.
defaultDay
Type number
0
Index of the day shown on mount.
onDayChange
Type (index: number) => void
–
Called when a different day is picked.
icons
Type Partial<Record<StopKind, ReactNode>>
–
Icon for each kind of stop, replacing the built-in filled icons.
locale
Type string
"en-US"
Locale for the dates on the tabs and heading.
className
Type string
–
Classes for the card.