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.
Installation
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.
Related
- Pro
Dependency Graph Changelog
Packages and versionsAn 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 versionsA 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 versionsOne 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 versionsThe 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
Service Dependency Map Changelog
Incidents and uptimeA 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 rolloutsA 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.