shadcn.io is not affiliated with official shadcn/ui
Travel Booking Sidebar Block for Radix UI
A trip planner in a fixed-height window whose wide sidebar folds two trips open into legs on a connected timeline, marks the next leg, and shows the chosen leg's details as a data list.
Installation
Overview
Follow a trip leg by leg with this travel booking sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a wide Sidebar for Voyagebench, a trip planner, with two trips, Lisbon and Osaka, that fold open into their legs on a vertical list joined by a connector line. Each leg has an icon for flight, hotel, car or rail, a place, a day and a time, and the first leg that has not started yet carries the word Next. Choosing a leg shows its start, place, reference and notes on the page as a Data List. Built from Sidebar, Data List, Badge and Guides, with a CSS entrance only. For trip planners, itineraries and any rail that is a timeline.
FAQ
How does it know which leg is next?
From a typed now. The block has one AS_OF date and time, and the next leg of a trip is the first one that starts at or after it. Nothing reads the clock, so the page looks the same on every load.
How do the trips fold?
Each trip heading is a button with aria-expanded and aria-controls pointing at its list of legs. A folded list is inert and hidden from the tab order. Opening a leg from anywhere, including the folded rail, opens its trip too.
What does the page show for a leg?
A title with the trip and the leg's position, then a data list with Starts, Where, Reference and Notes. The time is a time element with its ISO value, and the reference is set in a monospaced span that always reads in one direction, so it is the same in a right-to-left layout.
What happens when the sidebar folds to icons?
Folded, the rail is two trip icons with tooltips giving the trip, its legs and its dates. Choosing one opens the trip's next leg. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
What stays in the page, and how do I connect it?
Everything. The trips and legs are typed at the top of the file and nothing is booked. Load the trips from your booking service and keep nextIdOf, which only needs each leg's start. The rail links are SidebarMenuButtons with asChild around an a element.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. Choosing a leg closes the sheet and shows its details; the trip folds keep their state for the next time you open it. The status line under the page says what happened, and the sheet carries its own copy of it while it is open.