Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Changelog Timeline Carousel Block for React Aria

Nine releases with a rail of equally spaced version ticks over one release per slide, each with a date, a kind and four notes, and a newest or oldest first switch.

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 readers move through releases without a long page, with this changelog timeline carousel for React with React Aria. Notesmith, a release-notes tool, shows nine releases one to a slide, each with its version in mono, a fixed date, a kind word as a Badge and four notes. Above the track a rail of nine equally spaced ticks names each version: the current tick is ringed, a press goes to that release and the rail scrolls itself to keep the current tick in view without moving the page. A Segment Group in the header switches between newest first and oldest first and keeps the release you were reading. The foot holds "Release 4 of 9" with the version and Previous and Next Buttons; the ends are named "Latest release" and "Oldest release". The ruled bands come from Guides. The product and releases are made up.

FAQ

How do I use my own releases?

Edit RELEASES, newest first. Each has an id, a version, an ISO date, a kind and four notes. The rail, the slides and the status line are built from the same list.

What does the order switch do?

It reverses the rail and the slides and lands on the release you were reading, so the current tick does not change. The ends swap names to match.

How does it work with a keyboard?

Tab reaches the controls, Previous, the dots and Next. With focus inside the track, the arrow keys move it (mirrored in a right-to-left layout) and Home and End jump to the first and last position. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled, so focus never disappears. Slides out of view are hidden from the tab order and from screen readers.

How do the rail and the track stay together?

They share one index; the rail is a plain list of buttons next to the track, not a second carousel. The track is an Embla carousel; the block listens for its select event and re-counts the snaps when the layout changes.

What stays local in the demo?

All of it: the releases are typed example data. To wire it for real, read your releases from your changelog source into RELEASES.

How does it look on a phone?

One release shows at a time, and the rail scrolls sideways with 56 px ticks, keeping the current one in view.

All 100 carousel blocks