shadcn.io is not affiliated with official shadcn/ui
Post-Mortem Changelog Block for Vue
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 Vue with Ark 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. The arrow keys move between questions.
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.