shadcn.io is not affiliated with official shadcn/ui
Live Request Rate Navbar Block for Solid
A developer navbar for a payments API: a requests-per-second counter, an error rate taken from four endpoints, and a table of their health.
Installation
Overview
A developer navbar for Solid with Ark UI, the bar across Rivetworks, a payments API. Endpoints, Logs and Webhooks sit after the wordmark, Endpoints marked as the current page. The other end is a readout: a status dot, a requests-per-second counter that walks a typed sample every two seconds, and an error rate computed from four endpoints. The dot uses the warning token only when one of those endpoints is degraded; the text stays the foreground colour. The readout opens a table of the endpoints, each with its path, p95 and state. Below the md breakpoint the readout stays and the links move into a sheet from the top. The popup and the sheet open over the page, so the block stays one bar high (56 pixels). The page's rails and top rule come from the Guides spine and the bar draws no bottom border: the next block's top rule is its bottom edge. It's built from Sliding Number, Status, Popover, Table, Button, Sheet and Guides, with your theme's tokens for every colour. For API products whose header should show traffic without turning into a status page.
FAQ
How do I change the endpoints, the sample and the links?
Edit ENDPOINTS (a name, a path, a p95, requests, errors and a state of operational or degraded) and RATES for the requests-per-second samples. The error text is errors over requests across the list, rounded to a tenth of a percent, and the dot is a warning only when some row is degraded. Edit PAGES for the links. Mark the page you're on with current: true: that link gets aria-current="page" and a stroke on the bar's bottom edge. Every link points at #.
When does the counter move, and when does it stop?
It starts at the first sample and advances one step every two seconds. It does not tick while the document is hidden, and it does not start at all when the visitor prefers reduced motion. It does not announce each tick: the number is visual, and the button is not named with the live value.
What is in the endpoint table?
Charges, Refunds, Payouts and Customers, with the path, the p95 and a state. Refunds is the degraded row in the sample, so the bar's dot is a warning and the row says Degraded. The caption under the table restates the error rate against the request total. The table is a native table named Endpoint health.
How does it work with a keyboard and a screen reader?
The wordmark is a link home. The links sit in a nav landmark named Main. The readout is a button. Its popup is named Endpoint health.
The popup is not modal: Tab can leave it, and Escape closes it.
The status dot is hidden from assistive tech; the state word in the table is the name a screen reader gets.
How does it work on a phone?
The readout stays. Below md the links hide and a menu button opens a sheet from the top with the same three links. Choosing a link closes the sheet. At 320 pixels the error rate is visually hidden and stays in the button for assistive tech, so the bar is the wordmark, the dot, the counter and the menu button.
What moves, and what happens with reduced motion?
Nothing moves on load. The counter steps every two seconds unless reduced motion is set, in which case it stays on the first sample. The popup uses its own open transition, and the sheet slides down from the top. With reduced motion the sheet appears without sliding.