shadcn.io is not affiliated with official shadcn/ui
Cell Grid Security Updates Changelog Block for Radix UI
Three security advisories in cells on shared hairlines, each with its severity as an icon and a word, id, plain-language summary, affected and fixed versions as inline code and an upgrade command with a working Copy button.
Installation
Overview
A security-updates block for React with Radix UI, written for Bulwarkly, a fictional API server. A centred header names the newest fix and the version that carries it. Under it, three advisories sit in cells on shared hairlines inside one inset frame whose lines run a little past its corners, newest first. Each cell reads from the top: the severity as an icon and a word (Critical, High, Moderate) with the day, the advisory id in mono, the flaw as a title with a one-sentence summary, the versions it affects and the one that fixes it as inline code, and at the foot the upgrade command with a Copy button that really copies it. It's built from Guides, Badge and Copy Button, with your theme's tokens for every colour. For release notes, security pages and email digests. The advisories are example data with made-up ids.
FAQ
How do I change the advisories?
Edit ADVISORIES at the top of the file. Each is an id, a level (an icon and a word), a title, a summary, an affected range, the fixed version and a date as an ISO day. The upgrade command is built from the fixed version by upgradeOf, and the header names the first advisory in the list, so keep it newest first. The ids use a made-up BWSA- prefix, not real CVE numbers.
Does the Copy button really copy?
Yes. It writes the command to the clipboard and a polite status line says "Copied the upgrade command for BWSA-2026-0207"; if the browser refuses (no permission, or a page not served over HTTPS) the line says it couldn't. The button has a name that includes the advisory id, so each of the three is distinct to a screen reader.
Is severity shown by colour?
No. Each advisory has an icon (an octagon, a triangle or a circle) and the word, in the same foreground tone. There is no status colour in the block, because every advisory here already has a fix.