Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Release Scrubber Timeline Block for React

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 Base UI, 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.

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.

  • Pro

    Compact Timeline Changelog

    Lists and timelines

    The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.

  • Pro

    Version Tabs Changelog

    Filters and browsing

    An app platform's last four versions as compact monospace chip tabs on a window's top edge, each panel listing its changes with type tags in two columns of cells, on a height that never changes.

  • Pro

    Milestone Markers Changelog

    Lists and timelines

    A centred rail for a build service: milestones are filled diamonds with their version, day and kind on one side and their title on the other, patches are small dots in a compact line, and a toggle shows milestones only or every release.

  • Pro

    Version Scrubber Product Evolution About

    Timelines

    A product's history as a version scrubber: a stepped slider from v1 to v6 grows a drawing of the app panel by panel while two notes say what changed and who it helped.

  • Pro

    Timeline Evolution Story Features

    Timelines and steps

    A features section that tells five years of an edge runtime as year tabs on one rail: what shipped, a cold start before and after in rolling digits, and a five-bar history of regions.

All 200 changelog blocks