shadcn.io is not affiliated with official shadcn/ui
Hotfix Log Changelog Block for Solid
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 Solid with Ark 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.