shadcn.io is not affiliated with official shadcn/ui
Dependency Graph Changelog Block for Ark UI
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.
Installation
Overview
A dependency report for React with Ark UI, written for Rootwise, a fictional dependency-management tool. A header states how many of the app's packages are behind, with a three-way filter at its end (All, Outdated, Vulnerable); under it a band of three counts (packages, outdated, vulnerable) sits on the page's lines, and then the tree itself in a framed, fixed-height region. Each row is a package in mono, the version in the lockfile and, when one exists, the newer one ("2.3.4 → 2.4.0"), then what is wrong in words and icons: an "Update available" badge with an arrow, or a vulnerability count with a mark. The filter keeps the packages that match and the ones that lead to them, with every branch open, and the frame never changes height. A line under the tree counts what is shown and, when you choose a package, says how it is reached. It's built from Tree View, Toggle Group, Data List, Badge, Status and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For dependency dashboards and audit notes. The packages are example data.
FAQ
How do I change the packages?
Edit PACKAGES at the top of the file. A package has an id, a name, the current version, the latest one, a count of vulnerabilities and its children. A package is outdated when the two versions differ. The counts in the band, the filter and the headline are computed from the tree.
What does the filter keep?
The packages that match, and the packages that lead to them, so you can still see why a package is there. "Outdated" keeps the five packages with a newer version and their parents; "Vulnerable" keeps the one with a known vulnerability and the package that brings it in. The line under the tree counts what is shown ("Showing 7 of 16 packages") and is a polite status region.
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) and Enter or Space picks a row. A visually hidden label names the tree. Choosing a package adds how it is reached ("Reached through queryhurst › retrywick") to the status line. In a right-to-left layout the chevrons mirror.
How are problems shown without colour?
Each one has an icon and a word: an upward arrow and "Update available", a warning mark and "1 vulnerability". The vulnerability mark is the block's one status token, and its word is beside it.