shadcn.io is not affiliated with official shadcn/ui
Tabbed Feed Infrastructure Changes Block for React Aria
An infrastructure change feed with tabs (All, Compute, Storage, Network): each row a change tag with an icon and a word, the service in mono, a struck-through from value, an arrow and the new value, and the day, in an inset frame.
Installation
Overview
An infrastructure change feed for React with React Aria, written for Substrata, a fictional cloud host. The header counts the quarter's changes from the data and ends with a tab list (All, Compute, Storage, Network, each with its count). Under it, an inset framed feed with + marks on its corners: one row per change with a type tag (an icon and a word: New region, Scaled, Resized, Retired), the service in mono with a line on what changed, a from-to pair (the old value struck through in a del, an arrow, the new value in an ins) and the day. A caption at the foot says every change is audited. Each tab shows only its own rows, and an unseen copy of the All panel sits in the same grid cell so the block keeps its height and nothing moves when you switch. On a phone the tab list scrolls sideways and each row stacks its tag and date, service and from-to pair. It's built from Tabs, Badge and Guides, with CSS only for the entrance and your theme's tokens for every colour. The services and changes are fictional example data.
FAQ
How do I add a change or an area?
Add an object to CHANGES (an id, an area, a kind, the service, what changed, the from and to values and an ISO date) and, for a new area, one more entry in AREAS. The counts on the tabs and the title come from the list, and the dates are written from the ISO day by a small helper so they read the same on the server and in every browser.
How is a before and after told apart?
With the elements that mean it: del for the old value and ins for the new one, plus an arrow between them and the words "Changed from" and "to" for screen readers. The old value is struck through and the new one is heavier, so it reads without colour.
How do the tabs work with the keyboard?
The tab list is one tab stop; the arrow keys move between All, Compute, Storage and Network and Home and End jump to the first and last. Arrow keys move focus and select the tab together, as React Aria's tabs do.