Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Timeline blocks

Pro

Travel Itinerary Timeline Block for React Aria

Three days in a city, four stops a day on a rail, where Move up and Move down on a stop reorder its day and the transit legs, start times and day totals are worked out again, with the day of most transit marked.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let someone plan a day by moving its stops and see what the moves cost, with this travel itinerary timeline for React with React Aria. It is written for Stopover, a fictional trip planner. A hairline frame with a plus mark on each corner holds three days in the made-up city of Velden, Monday 19 to Wednesday 21 October, with four stops a day on a vertical rail. Each stop has a start time and a visit time, and between two stops is a transit leg in words, such as "Tram, 20 min", taken from a typed table of travel times for that day. "Move up" and "Move down" on a stop reorder its day, and the legs, the start times and the day's totals are worked out again: transit, visiting and free time under each day's head, with the leftover shown as a dashed row, and a badge on the day with the most transit. The status line says what a move did, for example "Day 2: transit up 35 min". On a large screen the days sit side by side; on a phone they stack. It is built from Button, Badge and Guides, with an entrance only. For trip planners, tour schedules, delivery rounds and any day where the order changes the travel. The city and its times are example data.

FAQ

How do I change the stops and the travel times?

Edit TRIP. A day has a date, its stops with visit minutes, and a travel table of minutes between each pair of the day's stops. Legs, start times, totals and the badge are worked out from the current order and those tables.

What do Move up and Move down do at the ends of a day?

They stay in place and answer in the status line, for example that a stop is already first. After a move, focus stays on the same stop's button, or on the other direction when the stop has reached an end, so you can keep going with the keyboard.

What is the free time?

Each day is planned from 09:00 to 18:00. Free time is that length less the visits and the transit. If an order goes over, the dashed row says by how much instead of showing a negative number.

What stays in the page, and how do I wire a real itinerary?

The order of each day is local state, and Reset order puts it back. Nothing is saved or sent. For a real planner, store the order per trip and ask a routing service for the minutes between stops instead of a typed table.

Is it accessible, and does it work in a right-to-left page?

Each day is a labelled region with an ordered list, each button names the stop it moves, and a polite status line says what happened. The rails follow the page direction and the times stay left to right.

All 100 timeline blocks