Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Dependency Graph Dashboard Block for React

A node graph of 15 packages in four columns joined by curves, where pressing a node lights every path from the app and lists each chain with the update available, an All or Outdated switch, and a table of updates.

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

Answer "why is this installed?" with this dependency graph for React with Base UI. A hairline frame with a plus mark on each corner holds a Graftwell graph of fifteen invented packages drawn as nodes in four columns (your app, direct, transitive, deeper) joined by curves. A package with an update is drawn by shape and word, never by color alone: a dashed outline and an arrow for outdated, a heavy outline and a shield for vulnerable. Pressing a node lights every path from the app to it and lists each chain in the side cell, such as "app, formweave, tokenpress, leafdate", with the kind of update available. A Toggle Group in the header switches between All and Outdated and dims the packages that are current. A Table of updates ends the frame. It's built from Toggle Group, Badge and Guides, with the graph laid out in code. For security reviews, upgrade planning and onboarding.

FAQ

How do I draw my own graph?

Edit PACKS: each package has an id, a version, a column (0 for the app, 1 direct, 2 and 3 deeper), a y position in percent, a list of parents and a state of stable, outdated or vulnerable, with an update when there is one. The curves, the chains and the table are worked out from the parents. Compute the columns from your lockfile's depth.

How are the paths found?

By walking the parents upward from the pressed package to the app, collecting every chain. A package pulled in by two direct packages has two chains, and both light up. The side cell counts the paths.

What does Outdated do?

It dims every package that is up to date, and the edges to them, so what needs work stands out; the pressed package's chain stays lit. The count in the graph's heading says how many are shown, and the table always lists every update.

What stays local, and how do I wire it for real?

Everything: the packages and advisories are invented and nothing is installed or audited. To make it real, build the graph from your lockfile and fill state and update from your registry and advisory feed.

How does it look on a phone?

The graph is wider than the screen, so it sits in a named, focusable scroll region of its own while the page stays still; the chains and the table stack under it.

All 200 dashboard blocks