shadcn.io is not affiliated with official shadcn/ui
Hotfix Tracker Changelog Block for React
A strip of four stage cells (Pending, In progress, Testing, Deployed, each with a derived count) that is also the filter, over rows of hotfixes with an urgency icon and word, a title, time open and the owner.
Installation
Overview
A hotfix tracker changelog for React with Base UI, written for Patchlark, a fictional on-call release tool. A start-aligned header sits over a strip of four cells on shared hairlines: Pending, In progress, Testing and Deployed, each with a count worked out from the nine hotfixes below. The cells are a single-choice Toggle Group, so one is always on and choosing one shows that stage's hotfixes in rows: an urgency as an icon and a word, the title, how long it has been open or took to ship, and the owner's initials. A line says which stage is showing. It's built from Guides, Toggle Group, Avatar and Button, with CSS transitions for the entrance. For on-call dashboards and release notes that follow patches. The hotfixes are example data.
FAQ
Where do the counts in the cells come from?
They are counted from the typed hotfixes, so a cell and its list can never disagree. Move a hotfix to another stage in the data and both counts change.
Does the list jump when I choose a stage?
No. The four lists share one grid cell and the three not chosen are unseen, so the tallest sets the height and the block stays the same size. A status line in a polite live region says which stage is showing.
What does the time on each row mean?
How long the hotfix has been open, in typed minutes shown as hours and minutes. For a deployed hotfix it says Fixed in, and the time from first report to deploy. Nothing reads the clock, so the figures never change.
How is urgency shown without colour?
As an icon and a word: Critical, High or Normal. Nothing depends on a hue, so it reads in greyscale and in any theme.
Related
- Pro
Hotfix Log Changelog
Incidents and uptimeA 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.
- 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
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
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
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- 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.