Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Dependency Graph Changelog Block for React

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.

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

A dependency report for React with Base 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.

Why does the tree sit in a fixed frame?

So the page never moves when you change the filter or open and close a branch. The frame keeps its height and the tree scrolls inside it.

What happens on a phone?

The filter sits under the header, the three counts share the width, and the tree's indents are tighter. A row's version and badge drop under the package name rather than scrolling sideways.

  • 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

    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

    Service Dependency Map Changelog

    Incidents and uptime

    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

    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

    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

    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