Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Design System Changelog Block for React

A framed table of design-token changes where each old and new value is drawn as its kind (a corner, a gap, a shadow, a type sample) with the value as text, a New, Updated or Deprecated word, and a filter that dims instead of hiding.

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 design system changelog for React with Base UI, written for Tokenwell, a fictional design-system manager. A header with a Toggle Group filter (All, New, Updated, Deprecated, each with a count) sits over a framed table. Each row is a token's name in mono, what it looked like before and after drawn as its own kind of preview (a rounded square for a radius, a bar of the spacing step, a card with its shadow, the letters Aa at the type's size and weight; never a colour swatch), the values as struck old and bold new text, and a change word with an icon. It's built from Guides, Badge and Toggle Group, with CSS transitions for the entrance. For release notes that show what a token change looks like. The tokens are example data.

FAQ

How is each preview drawn?

From the typed numbers of the token: a radius sets the corner of a square, a spacing step sets the width of a bar, a shadow sets a card's offset and blur from the foreground colour, and type sets the size and weight of the letters Aa. The text value beside it comes from the same numbers.

How does a token get its New, Updated or Deprecated word?

From the data: a token with no before value is New, one with no after value is Deprecated, and the rest are Updated. The filter's counts are worked out the same way.

Why does the filter dim rows instead of removing them?

So the table never changes height or jumps. The rows that do not match take a solid five per cent tint and softer text, and a status line says how many are shown. One filter choice is always on, and the arrow keys move between them.

Why are there no colour swatches?

The previews follow your theme: foreground and background tones only, so the table works in any theme and in greyscale. Colour tokens are a different block.

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

On a phone the value text and the change word move under the token's name and the two previews stay. The table scrolls sideways in a focusable region if it must, and values keep their left-to-right order in a right-to-left page.

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

  • Pro

    Config Changes Ledger Changelog

    Data and config

    A change ledger of settings with the old value struck through and the new one after an arrow, an environment Select, and a Copy button for each row's rollback command.

  • Pro

    Environment Config Diff Changelog

    Data and config

    A staging against production table in a fixed-height scroll region with grouped settings, masked secrets, a result as a shape and a word, and a Mismatches only switch.

  • Pro

    Filterable Changelog

    Filters and browsing

    The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.

  • Pro

    Theme Preview Changelog

    Spotlights and media

    Three design-token releases beside a framed preview panel: a Light / Dark switch changes only the panel, showing a drawn invoice card and its three tokens by lightness.

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

All 200 changelog blocks