shadcn.io is not affiliated with official shadcn/ui
Flight Tracker Timeline Block for Radix UI
Three flights across four invented airports as a rail whose layover rows are as tall as the wait, with local times from each airport's offset, a total door to door, and a minimum connection select that flags every layover that is too short.
Installation
Overview
Show a trip as flights and waits, and say which waits are too short, with this flight tracker timeline for React with Radix UI. It is written for Layoverly, a fictional trip planner. A hairline frame with a plus mark on each corner holds three Skyhollow Air flights on Tuesday 20 October across four invented airports, as a vertical rail of airports joined by the flights and the layovers. A flight is a solid line with its number, flight time, terminal and gate; a layover is a dashed line in a row as tall as the wait, so 85 minutes looks longer than 38. Times are local at each airport, worked out from its offset from UTC, and the band above the rail gives the total, "9 h 25 min" door to door, the time spent waiting and how many layovers are tight. A "Minimum connection time" select, 30, 45, 60 or 90 min, flags every layover shorter than it in words, such as "Tight: 38 min, you need 45". On a phone the gate and terminal fold under the flight. It is built from NativeSelect, Badge and Guides, with an entrance only. For trip planners, travel itineraries, relay and shift schedules and any journey with waiting between legs. The airports, flights and times are example data.
FAQ
How do I change the flights and airports?
Edit AIRPORTS and LEGS. An airport has a code, a name and its offset from UTC in minutes; a flight has a number, the two airport ids, a departure time in UTC, a flight time in minutes, a terminal and a gate. Local times, layovers, the total and the tight count are all worked out from those.
How are the layovers drawn in proportion?
Each layover row has a minimum height that grows with its minutes, set from a CSS variable. The flights keep a fixed height because they hold text, so the proportion is between the layovers; the minutes are always written beside the row.
What does the minimum connection time do?
It only changes which layovers are flagged and the count in the band. The default is 45 minutes. Real airports publish their own minimums per terminal change, so in your own page take the number from the airport pair rather than from a select.
What stays in the page, and how do I wire real flights?
The chosen minimum is local state and nothing is fetched or booked. For real flights, load the legs from your booking record, keep every time in UTC and convert with the airport's time zone, not a fixed offset, because offsets change with daylight saving.
Is it accessible, and does it work in a right-to-left page?
The trip is an ordered list, the select has a visible label, and a tight layover says so in words next to a warning icon, never by colour alone. A polite status line says how many layovers are tight. The rail follows the page direction, while times and codes stay left to right.