shadcn.io is not affiliated with official shadcn/ui
Timeline Carousel Block for Radix UI
Eight company milestones on a true-distance axis with a Now marker, tick buttons and a sliding ring above a one-up track of slides, each with the date, a title, two lines, a figure and how long before now it was.
Installation
Overview
Tell a company's history with gaps that are as long as they were, with this timeline carousel for React with Radix UI. Milestone Mill, a product-history site, places eight milestones on an axis by their dates, from 2016 to the end of 2026, so 2019 and 2020 sit close together and 2020 and 2022 do not. A "Now" marker is placed from one fixed date, never the clock. Each tick is a button that goes to its slide; a ring slides along the axis to the milestone shown, and on a phone the axis scrolls inside its band and keeps the ring in view. Below it a one-up track holds the slides: the year and date, a title, two lines, one figure and how long before now it was ("4 months before now"). A foot band holds the status ("2022: Opened the Lisbon office, 5 of 8") and Previous and Next Buttons. The ruled bands come from Guides. It's built from Carousel, Button and Guides, with CSS transitions only. The company, the milestones and the figures are made up for the example.
FAQ
How do I use my own milestones?
Edit MILESTONES: an id, an ISO date, a title, a body, a figure and its figureLabel. Set AXIS_START and AXIS_END to the span you want drawn and AS_OF to the day "now" means. The positions are computed from the dates by one helper (percentOf), and the "before now" counts from AS_OF, so nothing is typed twice.
How are the ticks placed?
Each tick sits at its date's share of the axis, as a CSS variable (--at) on the button, and the axis box is left-to-right in any language so time always runs the same way. The ring and the Now marker use the same helper.
The page is read from Embla's select event; a tick press calls scrollTo.
How does it work with a keyboard?
Tab reaches each tick, then Previous and Next. With focus in the track, the arrow keys move the slides (mirrored in a right-to-left layout) and Home and End jump to the first and last. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled. Slides out of view are hidden from the tab order and from screen readers, and each tick is named with its year and title.