shadcn.io is not affiliated with official shadcn/ui
Dependency Updates Monitoring Block for React
A table of eight packages with the gap to the latest version as Patch, Minor or Major and security advisories, a tick on each row, and an update-plan dialog shown open that orders the ticked updates by risk with a real Copy commands.
Installation
Overview
Turn a list of outdated packages into an ordered plan with this dependency updates panel for React with Base UI. It is Bumpwell, a dependency watchlist, and it is shown with its update-plan dialog open on load, drawn in place over the table so nothing is trapped or focused. The table lists eight packages with their current and latest versions in mono, the gap worked out from the two versions (Patch, Minor or Major), whether it is a dependency or a dev dependency, and whether the latest release fixes a security advisory. Each row has a tick and the header has a mixed select-all. The header's outline button, Generate update plan, is disabled in spirit (aria-disabled, with an explanation when pressed) until a row is ticked. The dialog orders the ticked updates by risk: patches together, minors together, then each major on its own with "read the release notes first", with the commands in mono. Shine Button Copy commands is the one coloured control and puts the commands on the real clipboard. Dialog is the real overlay once you press the header button.
FAQ
How do I load my own packages?
Edit PKG_LINES: name, current version, latest version, dep or dev, and yes when the latest fixes an advisory. The gap, the plan and the commands are worked out from those. In your app build the same list from your package manager's outdated report and advisory data.
How is the plan ordered?
Patches go first and together, then minors together, then each major as its own step. Dependencies and dev dependencies get their own command line inside a group because the flags differ. stepsOf is the one place that decides the order.
What stays local, and what is real?
Nothing is installed and nothing is looked up; the versions are typed examples. Copy commands is real: it writes the commands to the clipboard, closes the dialog and says how many packages it covered.
Why is the dialog already open, and what do I keep?
The preview draws the dialog in place so the poster and the docs page show it. Pressing the header button opens the real Dialog with a focus trap, Escape and focus back to the button, and the in-place copy stays closed until a reload. In your app keep the Dialog and delete the in-place copy: the in-place state, the scrim and its dialog, and the Escape effect.