shadcn.io is not affiliated with official shadcn/ui
Horizontal Rail Timeline Block for React
A car's service history on a thick ruler measured in kilometres, not time, with nine service records at their distance, the odometer marked as you are here, the next service as a dashed ring, a derived kilometres-to-go sentence and a strip for the chosen record.
Installation
Overview
Plan the next service from where the odometer is, with this horizontal rail timeline for React with Base UI. It is written for Garagebook, a fictional vehicle upkeep log. A hairline frame with a plus mark on each corner holds a thick ruler from 0 to 60,000 km with a notch every 5,000. Nine service records sit on it at their kilometres as solid dots, the odometer reads 47,800 and is marked "You are here", and the next service at 50,000 is a dashed ring. A summary above it says how far there is to go and, from the typed pace of 420 km a week, about how many weeks that is. Each record is a button; pressing one opens its title, date and work done in a strip under the ruler, with the distance and days since the service before it. The ruler scrolls sideways in a named region and starts with the odometer in view, so on a phone you land on what matters. It is built from Guides with a hand-drawn ruler, with an entrance only. For vehicles, machines, flights and any record measured in something other than time. The records are example data.
FAQ
How do I change the records or the ruler?
Edit RECORDS (an id, an ISO date, a kilometre reading, a title and a list of work) and the constants ODOMETER, NEXT_DUE, PACE, RULER_KM and NOTCH_KM. Positions are percentages of the ruler, and the summary and the strip are derived.
How is
It is the kilometres to the next service divided by the typed weekly pace and rounded to whole weeks: 2,200 km at 420 km a week is a little over five. It is an estimate from one number, so say so in your own copy if you wire it to a measured pace.
Why does the ruler start scrolled?
So the odometer is in view when it loads. After the first frame it sets the scroll position of the region itself, never the page, and the visitor is free to scroll back to the first service.
What stays in the page, and how do I use real records?
The chosen record is local state and nothing is saved or sent. For a real log, pass the records in the same shape and set the current odometer; the date shown above the odometer comes from AS_OF.
Is it accessible, and does it work in a right-to-left page?
The records are an ordered list of native buttons named with their title, kilometres and date and marked with aria-pressed, the notches are decoration beside the written summary, and the region has a name. A polite status line says what was chosen. The distance axis does not mirror in Arabic or Hebrew, so zero stays at the start.