shadcn.io is not affiliated with official shadcn/ui
Dependency Updates Changelog Block for Vue
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.
Installation
Overview
An update list for Vue with Ark UI, written for Bumpwise, a fictional dependency bot. A start-aligned header counts the pull requests the bot opened and how many are major; under it one table sits in a framed region with two groups of rows, Production and Dev. Each row is a package in mono, its move as a struck old version and a bold new one, the kind of bump as an icon and a word (Patch, Minor, Major) and a risk of three pips (filled squares against hollow ones) with the word beside them. The Package, Bump and Risk heads are buttons that sort the rows inside each group; the active head has aria-sort and a line spoken to screen readers says how the rows are ordered. The set of rows never changes, so the table never changes height. It's built from Guides and a native table, with CSS transitions for the entrance and your theme's tokens for every colour. For dependency-bot digests and upgrade checklists. The packages are example data.
FAQ
How do I change the updates?
Edit GROUPS at the top of the file. A group has an id, a label and its updates; an update has a name, the from and to versions, a bump (PATCH, MINOR or MAJOR) and a risk from 1 to 3. The headline counts and the rows come from that list.
How does sorting work?
Each sortable head is a button. The first press puts the riskiest or biggest rows on top (package names run A to Z); pressing it again turns the order round, and another head starts at its own first order. Ties fall back to the package name. Rows are sorted inside their group, so Production and Dev never mix. A polite status line says "Sorted by risk, highest first".
How are the bump and risk shown without colour?
The bump is an icon and a word: a dot and "Patch", a chevron and "Minor", a double chevron and "Major". Risk is three squares, filled or hollow, with "Low", "Medium" or "High" beside them. The old version is struck through and the new one is bold, so a move reads without the strike colour.
How does the table work with a screen reader and a keyboard?
It is a native table with a caption, column headers, the package name as the row header and each group heading as a row group header. Tab reaches the sort buttons; Enter or Space presses one. When the table is wider than its frame the frame is a focusable, labelled region you can scroll with the arrow keys.