shadcn.io is not affiliated with official shadcn/ui
Security Patch Tracker Changelog Block for React Aria
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.
Installation
Overview
A security patch tracker for React with React Aria, written for Patchwell, a fictional patch-management tool. The header states how many advisories are closed ("5 of 6 advisories are closed in Patchwell 3.8") and ends on the patch rate, counted up once as the block scrolls into view. A toggle group (All, Patched, Mitigated, Open, each with its count) filters a table that runs from rail to rail and ends the block. Each row gives the advisory id in mono, its title and day, the severity as a four-bar glyph and a word, the versions it affects and the one that fixes them as inline code, and the state as a shape and a word: a filled square for patched, a half-filled square for mitigated, a ring for open. The one open critical advisory carries the block's only status dot. It's built from Guides, Toggle Group, Counting Number, Status and CSS for the glyphs, with your theme's tokens for every colour. For security pages, release notes and trust centres. The advisories are example data with made-up ids, not real CVE numbers.
FAQ
How do I change the advisories?
Edit ADVISORIES at the top of the file. An advisory is an id, a title, a level (Critical, High, Medium or Low), an affected range, the fixed version (empty while there is no fix), a stage (Patched, Mitigated or Open) and a date as an ISO day. The headline count, the patch rate, the filter counts and the rows are all computed from that list. The ids use a made-up PWSA- prefix so they can't be mistaken for real CVE numbers.
How is the patch rate worked out?
It is the advisories that are patched or mitigated, divided by all of them and rounded: five of six is 83%. The number counts up once when it scrolls into view and shows its final value at once with reduced motion. Change a stage in the data and the rate, the headline and the counts follow.
Is severity shown by colour?
No. Severity is a glyph of four rising bars, filled up to the level, and its word beside it. The state is a shape and a word too. The only status colour in the block is the dot on the open critical advisory, and the word "Open" sits right beside it.
Does the table jump when I filter?
No. An unseen copy of every row sits in the same grid cell as the visible table, so the band keeps the height of the full list whichever state is chosen. A polite status line announces how many advisories are showing. Pressing the chosen item again does nothing, so the table is never empty.
What changes on a phone and in a right-to-left layout?
Below lg the affected range is dropped; below sm the severity and the fixed version move under the title, so a row keeps its title, severity, fix and state without scrolling sideways at 320 pixels. In a right-to-left layout the table mirrors while ids, versions and counts keep their reading order, and the half-filled square flips with it.