shadcn.io is not affiliated with official shadcn/ui
Tabbed Window Uptime History Block for Ark UI
A 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.
Installation
Overview
An uptime history for React with Ark UI, in one tabbed window. The header states the whole fleet's uptime, computed from every service's downtime. Under it, an inset window sits on the page's lines with a tab list across its top: API, Dashboard and Webhooks, each tab showing its own uptime. Choosing a tab rolls the large uptime figure to the new service and swaps the strip under it, ninety thin bars (a foreground tone for a day with no downtime, an outlined bar for a day that had some), and a table of the service's three incidents with the date, what happened and the minutes it took to resolve. The uptime is 1 - minutes down / minutes in 90 days, from the minutes typed per incident, so the figure, the strip and the table always agree. It's built from Tabs, Sliding Number and Guides, with CSS only for the entrance and your theme's tokens for every colour. On a phone the strip shows the last 45 days.
FAQ
How do I change the services and incidents?
Edit SERVICES at the top of the file: each service has an id, a name and a list of incidents with an ISO date between Jul 3 and Sep 30, 2026, the minutes lost and what happened. The strip, the uptime on each tab, the large figure, the table and the fleet figure in the title are all computed from that list. The numbers in the block are example data.
How does a screen reader read the strip?
The strip is an image with a text alternative that states the service, its uptime, the days with downtime and the minutes lost in all, so nothing depends on seeing the bars. The same incidents are in the table under it, a real table with a caption, and a polite status line announces the new service's figures when you change tab.
How do the tabs work with the keyboard?
The tab list is a single tab stop; the arrow keys move between services, Home and End jump to the first and last, and the open panel follows. Arrow keys move focus and select the tab together.
Does the block move when I switch tabs?
No. Every service's panel is also rendered once, unseen and inert, in the same grid cell as the open panel, so the cell is always as tall as the tallest panel. The large figure uses Sliding Number, which rolls only the digits that changed (and swaps them in place with reduced motion).