Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Scrubber Timeline Block for React Aria

A stepped slider across five releases with a dot and a version under each stop; moving it changes the framed panel below to that release's date, tags, title and three changes.

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

A release scrubber for React with React Aria, written for Tickline, a fictional version-history tool. A centred header sits over one framed panel. Its top half is a stepped slider across the latest five releases, oldest at the start, with a dot and a version under each stop (a stop fills once the thumb has reached it); its bottom half shows the chosen release: date, type tags, title, a sentence and three changes. Moving the thumb by pointer or arrow keys changes the panel, and the thumb is named "v3.8.0, 4 of 5" for assistive technology. It's built from Guides, Badge and Slider, with CSS transitions for the entrance and your theme's tokens for every colour. For version histories, release hubs and changelogs where readers jump between a handful of versions. The releases are example data.

FAQ

How do I use it with a keyboard?

Tab to the slider and use the arrow keys, Home and End. Each step selects the next release. The versions under the track are a pointer shortcut and aren't tab stops, because the slider already does the same.

What does a screen reader hear?

The thumb is named "Release" and its value reads as "v3.8.0, 4 of 5". The panel below is real text in order after the slider: a date, tags, a heading and a list. React Aria words a slider's value only through number formatting, so the block writes the text onto the thumb's range input after each change.

Why doesn't the frame change height?

Every release's panel sits in one grid cell; the ones not chosen are invisible, inert and hidden from assistive technology, so the frame is as tall as the longest. Only the chosen one is visible.

How do I change the releases?

Edit RELEASES, oldest first (the order of the stops). Each has a version, an ISO date, kinds, a title, a summary and a list of changes. The stops, the thumb's range and the panels follow the list's length. Dates are fixed, never computed from today.

How does it fit on a phone and in a right-to-left layout?

On a phone the labels under the even stops keep only their dot (the version stays in the accessible name). In a right-to-left layout the slider runs from the right and the stops follow.

What moves?

The header and frame fade up once on load, and the panel fades in after each change, with CSS transitions. With reduced motion they are off.

All 200 changelog blocks