Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Semantic Versioning Changelog Block for React

The anatomy of v3.8.2 split into Major, Minor and Patch with leaders to what each means, a toggle that previews the next version with a rolling number, and the latest release of each kind.

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 versioning guide for React with Base UI, written for Dotwright, a fictional versioning guide. A centred header sits over one framed figure with three parts. First the anatomy of v3.8.2: the number split into Major, Minor and Patch, each with a hairline leader down to what it means. Then a toggle group (Major, Minor, Patch) that picks the kind of the next release: the next version rolls into place with Sliding Number, the segment that moves is drawn heavier in the anatomy above, and one sentence says what to expect. Last, three cells show the latest release of each kind with the segment that changed underlined. It's built from Toggle Group, Sliding Number and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For libraries, APIs and apps that want users to understand what a version bump promises. The versions and dates are fictional.

FAQ

How do I change the version and the sentences?

Edit CURRENT (major, minor, patch), the meanings in SEGMENTS, the sentences in BUMPS and the three entries of RELEASES, each with an ISO date, the segment that changed and its version. Dates are fixed, never computed from today.

How is the next version worked out?

By nextOf: a Major bump adds one to the first number and resets the other two to zero, a Minor bump adds one to the second and resets the patch, and a Patch bump adds one to the third. The preview, the heavier segment above and the sentence all follow the one choice.

Is the rolling number accessible?

The rolling digits are decoration and hidden from assistive technology. A polite status line says "Next version v3.9.0" and then the sentence, so a screen reader hears the result once, and the toggle is a single-choice group that is never empty.

How is the segment that moves shown without colour?

By weight: the number is underlined and its leader line goes from a hairline to a heavier rule, while the other segments stay light. Nothing uses a hue.

Is this exactly semantic versioning?

It shows the common convention: Major for changes that break users, Minor for features that keep old code working, Patch for fixes. It does not cover versions before 1.0 or pre-release tags, which have their own rules.

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

The three segments keep one row on a phone, with smaller numbers, and the release cells stack in one column. Numbers and versions stay left to right in a right-to-left layout, while the text around them mirrors.

  • Pro

    API Versioning Matrix Changelog

    APIs and integrations

    A framed table of API versions with a status badge (Current, Supported, Deprecated, End of life), release and support-end days and a check or minus per capability, with a toggle group that rings one capability's column and says which versions have it.

  • Pro

    Breaking Changes Changelog

    APIs and integrations

    A framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.

  • Pro

    Release Notes Changelog

    Spotlights and media

    One release written as a long article behind a split divider, with a sticky contents list that marks the section on screen and turns into a row of chips on a phone.

  • Pro

    Deprecation Notices Changelog

    APIs and integrations

    Four deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.

  • 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

    Component Library Changelog

    Packages and versions

    Six components of a React library as rows with a version ladder of chips (solid for a major step, outlined for minor and patch, each with a word), a Breaking mark, and a collapsible list of the changes.

All 200 changelog blocks