For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
When to use
- A travel operator's home page: order KPIs, recent package orders, upcoming events and the team's tasks
- One booked package's itinerary day by day: reorderable stops, timing checks and margin by stop and day
When not to use
- Appointments booked by time slot and staff member, or hotel stays on a room board: use the Bookings blocks
- Stock, warehouse and shipping fulfillment for physical goods: use the Inventory blocks
Agent notes
- Each block keeps the Larkspur demo world in its own data.ts with
REFERENCE_DATEas the frozen today; swap the records, keep the rules
Third-party API docs
- Sonner v2: API reference, docs, used by 2 of 2 blocks
- TanStack Table v9: API reference, docs, used by 1 of 2 blocks
- dnd kit v6: API reference, docs, used by 1 of 2 blocks (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
Markdown
https://reui.io/blocks/solutions/travel.mdMCP
search({ query: "travel", type: "block", category: "travel" })Travel Operator Blocks for React: Package Orders and Itineraries
Both blocks share a demo operator, Larkspur Event Travel, which sells ticket, hotel and transfer packages for sports events in 3 tiers, with a hospitality lounge on VIP. The operator home opens on 4 KPIs for the last 30 days against the prior 30 (orders, revenue, fulfillment and at risk orders), a grid of 24 package orders, 5 upcoming events with a readiness bar each and the team's tasks. An open order counts as at risk when its event starts in 14 days or less with items still open. The itinerary builder plans a single booked package, a VIP Grand Prix weekend in Austin for 2 travelers, across 4 days and 21 stops, and treats the flights as the travelers' own bookings that time the transfers but never count toward margin.
The operator home is a ReUI Data Grid in Frame panels, with a Stepper through the 4 steps of a new order, Number Field inputs for travelers and rooms, and an Alert on an order that awaits its deposit or is at risk. The itinerary builder moves stops into new slots with Sortable, by pointer or keyboard, and its traveler preview walks the day on a vertical Stepper. Both use shadcn Sheet, Tabs, Select, DropdownMenu, AlertDialog and Progress, keep every record in local state and confirm each write in a Sonner toast, most with an Undo.
All Travel Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Travel Operator Home Event Travel Operator Home with Order KPIs, Recent Orders and Upcoming Events
- Itinerary Builder Travel Itinerary Builder with Day Tabs, Reorderable Stops, Timing Checks and Stop Margins
What the Travel Blocks Cover
- Order KPIs Orders, revenue, fulfillment and at risk orders for the last 30 days, each with its change on the prior 30. Fulfillment moves in points, and a falling at risk count reads as good.
- Recent orders grid Search by customer, order or event, filter by status or at risk only, sort and resize the columns, page 5, 10 or 20 rows at a time, and export the filtered orders as CSV.
- Order and new order sheets An order sheet records the 30% deposit that unlocks a Pending order, then ticks off its ticket, hotel, transfer and VIP lounge lines as issued. New Order takes event, package and party, lead traveler and review in 4 steps.
- Events and tasks Each upcoming event shows a readiness bar and opens a sheet with its orders and tasks, where Show Orders filters the grid to that event. Tasks tick off, and a new one is due today.
- Day tabs and stop timeline 4 day tabs over a rail of stops whose nodes show each supplier's confirmation. A stop dragged or moved by keyboard takes the slot after the one above, or opens the form when that slot breaks a rule.
- Timing checks and fixes 5 rules check pickups after landing, drop-offs before check-in, shuttles before gates close, stops between flights and cross-venue overlaps. A blocker with a clear slot gets a Fix, and Fix All applies every fix at once.
- Margin, confirmations and publishing Margin runs against a 22% target for the trip, by day and by stop. A counter tracks confirmed supplier stops, Chase marks the open suppliers as reminded, and Publish stays off while a timing conflict remains.
- Traveler preview A vertical stepper walks the picked day stop by stop, with each stop's photo or the route of a flight or transfer, its times and a To be confirmed badge until the supplier confirms.
Related Shadcn Block Categories
- Bookings Appointment, reservation and service-business admin pages for consultants, clinics, salons, hotels, and local services.
- Digital Twin Interactive 3D scenes of physical places on React Three Fiber, a stadium sector picker and a live kart race, each synced with a 2D plan.
- Dashboard Dashboard components and layouts that combine stats, charts, and tables into a complete overview screen.
- Schedule Calendar and scheduling components with day, week, and month views for event management.
- Wizard Multi-step form flows with progress indicators, validation, and step navigation.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (305) Browse 305 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (48) Browse 48 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (81) Browse 81 Shadcn Solutions blocks across 12 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Do the blocks take payments, send itineraries or book suppliers?
No. Orders, tasks, stops and the publish state live in local state, and each write ends in a toast. Record Deposit marks an order Confirmed without taking a payment, Publish switches the itinerary to Published and names the travelers in its toast without sending them anything, and Chase only marks the open suppliers as reminded. Both blocks report every change through callback props, so you can save it to your own booking system. The toasts, and the Undo they carry, show only where your app already mounts a Sonner toaster.
How are order totals, deposits and at risk orders worked out?
Each order's lines come from the event's price book: a ticket per traveler at the tier's price, the hotel per room for the whole stay, a flat transfer charge and, on VIP, the hospitality lounge per traveler. A new order holds 1 to 12 travelers at 1 or 2 per room. The deposit is 30% of the total, and a Pending order's items stay locked until it is recorded. Ticking the last item marks the order Fulfilled, and reopening an item sets it back to Confirmed. Fulfillment is the share of items issued across every order not cancelled, and an open order is at risk when its event starts in 14 days or less with items still open.
What do the itinerary timing checks enforce?
Stops at different venues may not overlap, a pickup leaves after its flight lands, a drop-off reaches the airport before check-in closes 90 minutes ahead of the flight, and a shuttle to a gated session arrives before the gates close. On the first day nothing else starts before the arrival flight lands, and on the last day nothing ends after check-in closes for the flight home. Flights and gated sessions keep their times, so a clash moves the stop beside them. Any timing conflict blocks Publish, while a supplier stop still unconfirmed within 7 days of travel only warns.
Can a published itinerary still change?
Publishing makes the plan read only: no stop can be added, moved, edited or deleted, and Fix is no longer offered, until Unpublish returns it to draft after a confirm. A supplier's answer can still be recorded with Mark Confirmed or Mark Requested. The confirm before publishing names how many stops still await supplier confirmation and any gap between the margin and the 22% target.
How do I load my own orders or itinerary?
Each block keeps its demo world in its own data file with a frozen today, so swap the records and keep the rules. For the operator home, replace the events, the price book that prices every order, the orders, the tasks and the prior 30 day figures behind the KPI changes; the 14 day at risk window and the 30% deposit rate sit there as constants. For the itinerary, replace the package, its days, the suppliers and the stops, next to the 22% margin target, the 7 day confirmation window and the 90 minute check-in close. The avatars and photos load from Unsplash and the flags from a flag CDN, so point them at your own assets.
What do the blocks install?
The shadcn CLI adds each block with Sonner, the ReUI Frame, Badge, Alert and Icon Stack both blocks share, and the shadcn components behind its sheets, menus, selects and dialogs. The operator home also brings TanStack Table for the ReUI Data Grid, plus ReUI Stepper and Number Field for the new order flow. The itinerary builder brings ReUI Sortable for moving stops, Stepper for the traveler preview and Icon Tile for the checks.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.