shadcn.io is not affiliated with official shadcn/ui
Horizontal Scroll Timeline Block for Radix UI
A club's twelve league fixtures along one horizontal line in a snap scroller, home games above it and away games below, with W, D and L nodes, a dashed node for the next match, derived form and points, and a button that scrolls to the next fixture.
Installation
Overview
Read a season at a glance, home against away, with this horizontal scroll timeline for React with Radix UI. It is written for Fixtureline, a fictional club season tracker. A hairline frame with a plus mark on each corner holds one horizontal line with twelve Saturday fixtures of Rothwick Town: home games sit above the line and away games below it, each in a small card with the date, the opponent and the score. A node on the line holds W, D or L, a filled node is a win, a ringed one a draw and a plain one a loss, and the next match after today is a dashed node with the days to go. A summary above the line gives the form ("Last 5"), the points from the games played and the record, all worked out from the scores. A "Next fixture" button scrolls the region to the next match and moves focus to it. The line is a named, focusable region that snaps card by card and shows the next card on a phone. It is built from Button and Guides, with an entrance only. For fixtures, tournaments, release trains and any sequence with two sides. The results are example data.
FAQ
How do I change the fixtures?
Edit FIXTURES. Each has an id, an ISO at, an opponent, a venue of home or away and, once played, club and against goals. A fixture without goals is unplayed; the first one after AS_OF becomes the dashed next node. Results, form, points and record are derived.
How are the points and form worked out?
A win is 3 points, a draw 1 and a loss 0, summed over the played fixtures, and "Last 5" lists the results of the last five played in order. Change the scores and every figure on the page follows; nothing is typed twice.
What does the Next fixture button do?
It scrolls the region itself, not the page, so the next node is centred, and then focuses the card so a keyboard or screen reader user lands on it. It scrolls instantly when the visitor prefers reduced motion.
What stays in the page, and how do I use real fixtures?
Nothing is saved; the scroll position is the only state. For a real season, pass your fixtures in the same shape from your data source and keep AS_OF as the date of that data.
Is it accessible, and does it work in a right-to-left page?
The line is an ordered list in a region with a name that can be focused and scrolled with the arrow keys, each card states the date, the venue ("vs" or "at"), the opponent and the result in words, and the W, D and L letters are not the only signal. The time axis does not mirror in Arabic or Hebrew, so August stays at the start.