Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Monorepo Packages Changelog Block for React

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A monorepo release for React with Base UI, written for Packbay, a fictional monorepo release tool. It is a split: at the start the headline ("One change to core bumped 4 packages"), a sentence and four facts (the day it shipped, the one change, how many packages bumped by cascade, how many stayed as they were); past a divider, a working tree of the workspace. Each row is a package name in mono, a kind badge with an icon and a word (minor, patch), and under it the bump as a version arrow ("1.4.0 → 1.5.0"); a package bumped only because something it depends on changed says "bumped by core". Arrow keys walk the tree and the side arrows open and close a branch; the tree scrolls inside a fixed frame, so opening or closing never moves the page. Choosing a package fills the band that ends the block with why it was bumped. It's built from Guides, Tree View, Data List and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For release notes of a workspace, a cascade explainer or an internal release dashboard. The packages and versions are example data.

FAQ

How do I change the workspace?

Edit WORKSPACE at the top of the file. A package has an id, a name, its version was and to, a kind (leave it out for a package that stays put), from (the package that made Packbay bump it, empty for the change itself), a why sentence and its dependents, the packages that depend on it. The tree, the facts and the counts are all computed from that list.

What does bumped by mean?

A package that depends on a changed package is published again so it picks up the new version, even though none of its own code changed. Packbay says which package caused it ("bumped by core") with an arrow icon beside the words, and the band under the tree explains it in a sentence when you choose the row. The docs package says "bumped by ui" because it follows ui, one step after core.

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

It is Ark's tree view on every base: Tab enters it, the up and down arrows move between rows, the end arrow opens a branch (and the start arrow closes it), Home and End jump to the ends and Enter or Space picks a row. A visually hidden label names the tree, and the band under it is a polite live region, so the explanation is read when the pick changes. In a right-to-left layout the chevrons mirror.

Why does the tree sit in a fixed frame?

So the page never moves. All five packages fit when every branch is open; closing a branch leaves empty space in the frame rather than pulling the band up. If you add packages, the frame scrolls.

How does it fit on a phone?

The split stacks: the headline and the four facts come first, then the tree under a rule with + marks, then the band. The tree's indents are tighter, and long package names break rather than scrolling sideways at 320 pixels.

What moves, and what happens with reduced motion?

The header, the facts and the tree fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Opening and closing a branch uses the tree view's own animation, which follows your reduced-motion setting.

  • 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

    Dependency Updates Changelog

    Packages and versions

    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.

  • 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

    A three-column graph of one service's blast radius: what it depends on, the chosen service in the middle, what uses it, joined by curves in one SVG, with a warning glyph on each edge a release breaks and a toggle group to pick the service.

  • Pro

    Lanes With Gates Release Train

    Deploys and rollouts

    A release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.