shadcn.io is not affiliated with official shadcn/ui
Customer Impact Changelog Block for Ark UI
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 Ark 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.