shadcn.io is not affiliated with official shadcn/ui
Hotfix Log Changelog Block for React
A hotfix log on one shared version axis: each row has an urgency as an icon and a word, a bracket over the affected versions and a flag at the fix, with a toggle that dims by urgency.
Installation
Overview
A hotfix log for React with Base UI, written for Mendline, a fictional release-management tool. A start-aligned header carries a title worked out from the log (how many hotfixes since the first version on the axis, and how many are critical) and a toggle that picks an urgency. Under it a ruled list runs rail to rail on one shared version axis, v4.1.0 to v4.3.2, with a row for each hotfix: its urgency as an icon and a word, a title, the release and day that fixed it, and on the axis a bracket over the versions that had the bug and a flag at the version that fixed it. It's built from Toggle Group, Badge and Guides, with CSS transitions and your theme's tokens for every colour. For release notes with patch releases, security-adjacent changelogs and release dashboards. The hotfixes are example data.
FAQ
How do I change the hotfixes and the versions?
Edit VERSIONS (the axis, oldest first, each with its date) and HOTFIXES. A hotfix has a title, an urgency and the index of the first and last version that had the bug; the version that fixed it is always the next one on the axis, so it is worked out and cannot disagree with the bracket. Keep the list newest fix first.
How is urgency told without colour?
By an icon and a word on every row: Critical, High or Medium, each in an outline badge with its own icon. The bracket and flag are the same weight for every urgency, so nothing depends on colour.
What does the toggle do?
It dims the rows that do not match and a polite line says how many do. No row is removed or moved, so the page's height never changes and the axis stays comparable. All shows every row at full strength. The choice stays local.
How does a screen reader get the brackets?
The drawing on the axis is hidden. Each row says it in words: the affected versions as a range, then which version fixed it and on which day.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the bracket sits under the title and the axis names only its first and last version. The axis and the brackets always run left to right, oldest version first. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.
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
Rollback History Changelog
Deploys and rolloutsA table of rollbacks that runs rail to rail and ends the block: the day, the version it came from and the one restored, a reason badge, a sortable time to revert and how each ended, with a summary counted from the rows.
- 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
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Feature Sunset Changelog
Roadmap and customersFour retiring features as ruled Collapsible rows with a four-square phase meter; each opens to its four phases, who is affected and its replacement, and a toggle group filters by area.
- Pro
Impact Badges Changelog
Lists and timelinesSeven fixes with an impact meter of one to four rising bars and a word, a band that counts each level, and a Sort by Select that reorders the rows by impact or by date.