Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Milestone Markers Changelog Block for React

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.

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 milestone markers changelog for React with Base UI, written for Embermoor, a fictional build service. A centred header carries the title and one sentence; under it a two-way toggle, Milestones only or All releases, a legend for the two marks and a count of how many releases show. Then a single hairline rail runs down the middle of the block and meets the band's rule at a + mark. From lg the releases alternate sides of the rail: a milestone is a filled diamond, with its version, day and kind (an icon and a word: Major or Minor) on one side and its title and a line on the other; a patch is a small dot with one compact line holding its version, day and what it fixed. Milestones only hides the patches. Both lists share one grid cell, the full one unseen, so the block never changes height and the rail keeps its length. On a phone the rail moves to the start edge and every release is one column, with the version, day and kind above the title. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Toggle Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For product histories and release pages that want the big releases to stand out from the patches. The releases are example data.

FAQ

How do I change the releases?

Edit RELEASES at the top of the file, newest first. Each release has a version, a date as an ISO day ("2026-09-09"), a title, a milestone flag and a kind (MAJOR, MINOR or PATCH); a milestone also has a one-line summary. The date on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Sides come from each release's place in the full list, so keep milestones at alternating positions and the diamonds alternate in both views.

What does the toggle do, and does the block jump?

It chooses which list is shown: only the milestones, or every release. The full list always sits unseen in the same grid cell as the live one, so the block's height and the rail's length do not change when patches hide, and nothing below moves. A release keeps its side of the rail in both views.

How are milestones and patches told apart without colour?

By shape and by words: a milestone is a filled diamond with a kind badge (an icon and Major or Minor) and a title in a heading; a patch is a small round dot with one line of plain text. The legend under the toggle shows both marks, and the marks themselves are decoration, hidden from assistive technology.

How does it work with a keyboard and a screen reader?

The toggle is a group with a name ("Which releases to show"); Tab moves into it, the arrow keys move between the two options and the pressed one is announced. A status line, present from load, says "Showing the 3 milestones" or "Showing all 8 releases" after each change. Milestones are articles with an h3 each; patches are plain list items.

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

Below lg the rail moves to the start edge, the releases stack in one column and the version, day and kind sit above each title. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the rail and its marks mirror with the page, the alternating sides swap, and version numbers stay left to right.

What moves, and what happens with reduced motion?

The header, the controls and the rail fade up once on load, with CSS transitions. With reduced motion the entrance is off and the block simply appears. Nothing loops.

  • 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

    Release Scrubber Timeline

    Lists and timelines

    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.

  • 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

    Year in Review Changelog

    Metrics and charts

    A year of releases behind a split divider: the total in large digits with a Changes or Releases switch, and four quarter rows with their headline release and a bar scaled to the busiest.

  • Pro

    Horizontal Track Timeline About

    Timelines

    A company timeline drawn as one horizontal track: six milestones in relative time, each a cell of a ruled band with a dot on the rule, turning into a vertical rail on phones.

  • 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.

All 200 changelog blocks