shadcn.io is not affiliated with official shadcn/ui
Vulnerability Disclosure Changelog Block for React
One 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.
Installation
Overview
A vulnerability disclosure for React with Base UI, written for Crosshurst, a fictional web application framework. The split puts the facts about the flaw at the start and the story at the end, on a divider that reaches the top rule. At the start: a header that counts the days from the report to the fix, the severity score as a large number with its band named in a word, a ruler from 0 to 10 with a tick at the score and four bands of rising weight, the eight base metrics spelled out as a list of terms and values, and the vector string with a Copy button that really copies it. At the end: the disclosure as an ordered list from the private report to the public advisory, each step with its day and how many days in, the affected versions and the one that fixes them, and a credit line for the researcher. On a phone the score comes first and a rule separates the two parts. It's built from Guides, Counting Number, Copy Button, Avatar and Button. The report, the score and the researcher are example data.
FAQ
Where does the score come from?
It is computed, not typed. METRICS lists the eight base metrics with the weight the published base formula gives each choice, and the block works out the impact and exploitability sub-scores and rounds the sum up to one decimal, so the number, the tick on the ruler, the band word and the vector string always agree. The example is a network flaw that needs a user's action and exposes data without taking the service down, which scores 8.1, High. The formula in the block assumes the scope is unchanged; for a changed scope, change the weights too.
How do I change the dates and the researcher?
Edit the four steps (REPORTED, ACKNOWLEDGED, FIXED, DISCLOSED): each is an ISO day, a label and a sentence. The "Day N" on each step and the "16 days" in the title are counted from the dates by a small helper using UTC midnights, never from today. The researcher and the advisory id are plain text near the foot; the name is fictional and so is the CXSA- id, which can't be mistaken for a real CVE number.
Is the severity shown by colour?
No. The ruler is four bands of rising weight in the foreground colour, the tick is a bar with a ring, and the band is also a word beside the number and in the legend, where the current band is bold. The legend gives each band's range, so the ruler reads without seeing the weights.
Does the Copy button really copy?
Yes. It writes the vector string (CVSS:3.1/AV:N/AC:L/…) to the clipboard and a polite line says it did, or that the browser refused.
What changes on a phone and in a right-to-left layout?
Below lg the two parts stack with a hairline rule between them, the score first, and the metrics list drops to two columns. The ruler is a scale, so it keeps its own left-to-right direction in a right-to-left layout; the days, ids and versions are isolated so they don't reorder, and the arrow in the link mirrors.
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
Cell Grid Security Updates Changelog
Security and auditsThree 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.
- Pro
Post-Mortem Changelog
Incidents and uptimeA blameless post-mortem as one framed report: three impact cells, a five-whys accordion from the symptom to the root cause, and an action-items table with owners, due days and states beside a progress bar.
- Pro
Incident Timeline Changelog
Incidents and uptimeOne incident as a split: a summary at the start and its four updates on a hairline at the end, each with a stage badge, a time in UTC, an elapsed chip counted from the first update and one sentence.
- 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.
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.