shadcn.io is not affiliated with official shadcn/ui
Monorepo Packages Changelog Block for Ark UI
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 Ark 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.