shadcn.io is not affiliated with official shadcn/ui
Customer Impact Changelog Block for React
Three customer-facing issues as tabs; each panel shows the issue's reach on four plan tiers as text and a bar, how it ended, and a total counted from the data.
Installation
Overview
A customer-impact changelog for React with Base UI, written for Ripplenote, a fictional status-communication tool. A header sits over a framed set of tabs, one for each customer-facing issue, the newest first with its day. Each panel names the issue, says how it ended ("Resolved in 42 min", or the block's one status dot and "Still open" for the one that is) and lists four plan tiers (Free, Pro, Team, Enterprise): "4,200 of 61,000 (6.9%)" as text with a foreground bar for the share, and a total under them. Every figure is computed from the typed counts, so the text, the bars and the total always agree. An unseen copy of every panel holds the frame's height, so switching tabs never moves the page. It's built from Guides, Tabs, Progress and Status, with CSS transitions for the entrance and your theme's tokens for every colour. For status pages, incident write-ups and release notes that say who was affected. The issues and counts are example data.
FAQ
How do I change the issues and the counts?
Edit ISSUES at the top of the file. An issue has a title, a short label for its tab, an ISO date, a summary and four tiers, each with the affected and total account counts. A resolution line ("Resolved in 42 min") marks it closed; leave it empty and give it a status to show it as open. The shares, the formatted counts and the total are computed from the numbers.
Are the bars accessible?
The bar only repeats the text beside it ("4,200 of 61,000 (6.9%)"), so assistive technology skips it and reads the text. The bar's length is the tier's own share, not a share of the total, which is why a tier with a few accounts can have a long bar.
Why is there only one status dot?
A status colour should mean a real alert, so only an issue that is still open gets one, with the words "Still open" beside it. A resolved issue gets a check and the time it took.
How do the tabs work with the keyboard?
Arrow keys move between the three tabs and the panel opens as you go, as in any tab list. Every panel is also stacked, unseen and inert, in the open panel's grid cell, so the tallest panel sets the height and nothing jumps.
How does it fit on a phone and in a right-to-left layout?
On a phone the three tabs share the width with their names wrapping onto two lines, each tier shows its name and its counts on one line with the bar under them, and the total sits at the foot. In a right-to-left layout the text mirrors, while bars and counts keep their reading order.
Related
- 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.
- Pro
Split Status Page
Incidents and uptimeA split status page for a hosted status service: the 90-day uptime and four components with their state at the start, the three most recent releases at the end, and a divider between them.
- 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
Post-Mortem Changelog
Incidents and uptimeA 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.
- Pro
Retention Impact Changelog
Metrics and chartsA reverse split with two retention curves by days since signup, this release solid and the one it is compared with dashed, a toggle that picks the comparison and the change at day 1, 7 and 30.
- Pro
Stats Summary Changelog
Metrics and chartsA year of releases as three counters (New, Improved, Fixed) and twelve month columns; focusing a column reads that month's releases into a polite status line.