shadcn.io is not affiliated with official shadcn/ui
Post-Mortem Changelog Block for React
A 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.
Installation
Overview
A post-mortem for React with Base UI, written for Hindsworth, fictional deploy-safety software for small teams. A start-aligned header carries the title and one sentence, and under it a single report sits in a card with + marks on its corners and a hairline between its parts. It opens on three impact cells (users affected, peak error rate, downtime), then the five whys: an accordion of five questions that walks from the symptom down to the root cause, one answer open at a time, the first open on load and the last tagged "Root cause". Under it the action items are a table with the action, its owner (initials in an avatar), the day it is due and its state as a shape and a word (a filled square for done, a half square for in progress, a ring for to do), beside a bar that says how many are done. The count and the bar are computed from the rows. On a phone the Owner and Due columns are dropped and the owner's name sits under the action. It's built from Guides, Accordion, Avatar, Badge and Progress, with CSS transitions for the entrance and your theme's tokens for every colour. For engineering blogs, status pages and handbooks that publish what they learned from an outage. The review is example data.
FAQ
How do I write my own review?
Edit IMPACT, WHYS and ACTIONS at the top of the file. A why is an id, a question and an answer; mark the last one root. An action is a title, an owner with initials, a due as an ISO day ("2026-07-15"), and a state with its shape classes. The "3 of 5 actions done" line and the bar count the rows whose state is "Done", and the day on screen ("Jul 15, 2026") is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.
How does the accordion behave?
It opens one answer at a time and the first is open on load, so the page shows what an answer looks like. Each question is a heading with a button inside, so a screen reader can jump between them. Pressing the open question closes it. Tab moves between questions; the arrow keys do not.
How are the states told apart without colour?
Each action's state is a shape and a word: a filled square and "Done", a half-filled square and "In progress", a ring and "To do". The shapes are decoration and are hidden from assistive technology, because the word carries the meaning. The progress bar is foreground-toned and has its own name ("3 of 5 actions done").
Is the action list a real table?
Yes: a native table with a caption, column headers with scope, and the action as the row header, so a screen reader announces the action with each cell. The caption is visually hidden because the heading above already introduces it.
How does it fit on a phone and in a right-to-left layout?
The three impact cells stay in one row with smaller figures, the table drops its Owner and Due columns (the owner's name moves under the action), and nothing scrolls sideways at 320 pixels. In a right-to-left layout the table, the accordion and the rail of marks mirror, and figures stay in reading order.
Related
- 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
Incident Severity Changelog
Incidents and uptimeAn incident log grouped under P0 to P4 headings, with a toggle group that filters it, a band of five median-time-to-resolve cells and rows of id, title, users affected and state, each severity a shape and a word.
- Pro
On-Call Handoff Changelog
Incidents and uptimeA pager handoff note as a split: two responders and a band of three counts at the start, a checklist of what is still open at the end that the incoming person ticks, and a Shine Button that unlocks when every box is ticked.
- 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
Principles Rail About
Principles and processA split about section for a release-management tool: a sticky title at the start, and six principles as stations on a hairline rail, each opening to what it means and how it shows up.