Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Dependency Updates Changelog Block for React

A table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.

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

An update list for React with Base UI, written for Bumpwise, a fictional dependency bot. A start-aligned header counts the pull requests the bot opened and how many are major; under it one table sits in a framed region with two groups of rows, Production and Dev. Each row is a package in mono, its move as a struck old version and a bold new one, the kind of bump as an icon and a word (Patch, Minor, Major) and a risk of three pips (filled squares against hollow ones) with the word beside them. The Package, Bump and Risk heads are buttons that sort the rows inside each group; the active head has aria-sort and a line spoken to screen readers says how the rows are ordered. The set of rows never changes, so the table never changes height. It's built from Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For dependency-bot digests and upgrade checklists. The packages are example data.

FAQ

How do I change the updates?

Edit GROUPS at the top of the file. A group has an id, a label and its updates; an update has a name, the from and to versions, a bump (PATCH, MINOR or MAJOR) and a risk from 1 to 3. The headline counts and the rows come from that list.

How does sorting work?

Each sortable head is a button. The first press puts the riskiest or biggest rows on top (package names run A to Z); pressing it again turns the order round, and another head starts at its own first order. Ties fall back to the package name. Rows are sorted inside their group, so Production and Dev never mix. A polite status line says "Sorted by risk, highest first".

How are the bump and risk shown without colour?

The bump is an icon and a word: a dot and "Patch", a chevron and "Minor", a double chevron and "Major". Risk is three squares, filled or hollow, with "Low", "Medium" or "High" beside them. The old version is struck through and the new one is bold, so a move reads without the strike colour.

How does the table work with a screen reader and a keyboard?

It is a native table with a caption, column headers, the package name as the row header and each group heading as a row group header. Tab reaches the sort buttons; Enter or Space presses one. When the table is wider than its frame the frame is a focusable, labelled region you can scroll with the arrow keys.

What changes on a phone?

The Bump column drops, and the package, the versions and the risk (pips and word) stay. The group heading rows keep their count.

What moves, and what happens with reduced motion?

The header and the table fade up once on load, with CSS transitions; sorting swaps the rows at once. With reduced motion the entrance is off and the block simply appears.

  • Pro

    Dependency Graph Changelog

    Packages and versions

    An app's dependency tree with a three-way filter (All, Outdated, Vulnerable): each row shows a package, the version it has and the one it could have, an Update available badge or a vulnerability count, and a band of three counts sits above.

  • Pro

    Monorepo Packages Changelog

    Packages and versions

    One release as a workspace tree: the facts at the start, and past a divider a tree of packages with each version bump, its kind as an icon and a word, and the packages that were bumped only because something they depend on changed.

  • Pro

    Package Changelog

    Packages and versions

    One package's changelog behind a version select: its semver bump, release day, weekly downloads that count on to each version's figure, a Migration guide link, the install command with a Copy button and the changes in an accordion of groups.

  • Pro

    Semantic Versioning Changelog

    Packages and versions

    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.

  • Pro

    Security Patch Tracker Changelog

    Security and audits

    A rail-to-rail table of security advisories with a four-bar severity glyph and word, the affected and fixed versions as inline code, a state as a shape and a word, a patch rate that counts up and a toggle group that filters by state.

  • Pro

    Bundle Size Changelog

    Metrics and charts

    Five releases as stacked horizontal bars split into four chunks, told apart by weight and pattern, with a budget tick, each release's total and change, and a toggle that rolls the sizes between gzip, brotli and raw.

All 200 changelog blocks