shadcn.io is not affiliated with official shadcn/ui
Tabbed Feed Infrastructure Changes Block for React
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 Base UI, 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 as they go.
Related
- Pro
Infrastructure Cost Changelog
Metrics and chartsA cost table per service with a signed delta against the previous release, a share bar and a total row, a budget progress bar with a tick, and a Monthly or Yearly toggle that multiplies the figures.
- Pro
Deployment Log Tabs Changelog
Deploys and rolloutsTabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Microservice Versions Changelog
Deploys and rolloutsA version matrix of six services by Dev, Staging and Production, rail to rail with hairlines between cells, a heavier Production column, a down arrow and a count for a service that trails, and a toggle group that narrows it to the services that drifted.
- 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
Tabbed Window Uptime History
Incidents and uptimeA tabbed window of ninety-day uptime for an uptime monitor: one tab per service, a large uptime figure that rolls to the new service, a strip of ninety daily bars and a three-row table of incidents.