shadcn.io is not affiliated with official shadcn/ui
Cell Grid Security Updates Changelog Block for React
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 Base 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.
Related
- Pro
Security Patch Tracker Changelog
Security and auditsA 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.
- Pro
Vulnerability Disclosure Changelog
Security and auditsOne coordinated disclosure as a split: the severity score on a 0 to 10 ruler with its band named, the eight base metrics spelled out, a copyable vector string, a report-to-advisory timeline with elapsed days, the versions affected and a credit to the researcher.
- $Pro
Breaking Changes Changelog
APIs and integrationsA framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.
- Pro
Deprecation Notices Changelog
APIs and integrationsFour deprecation notices, each a window bar from the day it was announced to the day it sunsets, filled to an as-of day with a tick, with the days counted and the replacement named.
- Pro
Release Banner Changelog
Spotlights and mediaOne release of a documentation platform on one screen: the version large with its day and highlight beside the command that upgrades to it with a Copy button, and a three-cell band of the changes in it, each with a type tag.
- Pro
Permission Changes Changelog
Security and auditsAn audit of permission changes as diffs in an inset frame: each role with who changed it and when, inserted and struck-out permission rows with a sign and a word, how many people it reaches, and a toggle group that keeps only granted or revoked rows.