Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

HTTP Status Codes Dashboard Block for Ark UI

A day of gateway calls as 24 stacked hourly columns by status family, a toggle to show any combination of 2xx, 3xx, 4xx and 5xx, totals with the change on yesterday, and the top endpoints for the families on.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a day of traffic by status family, with this gateway panel for React with Ark UI. A hairline frame with a plus mark on each corner draws 24 stacked hourly columns of Statusloom calls, 2xx at the bottom and 3xx, 4xx and 5xx above it in lighter weights of the foreground colour, a pixel apart. A multiple Toggle Group in the header picks which families are drawn, and at least one stays on. Under the chart, the totals ("4xx 2.5% of 1.8M") say how each family compares with yesterday in words, and a table lists the top endpoints for the families on with their calls, share and worst hour. Pressing a column pins that hour in a readout. It's built from Toggle Group and Guides, with hand-built columns and a CSS entrance only. For gateway log analysis and error triage.

FAQ

How do I fill it with my traffic?

Edit FAMILIES: for each one, hourly has 24 call counts, previous is yesterday's total and tone its weight. ENDPOINTS lists the top endpoints with counts per family and the hour each family peaks at. Totals, shares, the change on yesterday and every column are worked out from those.

What does the family toggle do?

It redraws the columns with only the families on, rescales them to the tallest hour, and recomputes the endpoint table. Turn 2xx off and the errors fill the chart, which is how you see a small spike that the main traffic hides. The last family on can't be switched off, so the chart is never empty.

How is the change on yesterday calculated?

As the family's share of all calls today minus its share yesterday, in points, so "up 0.3 points on yesterday" doesn't depend on a quiet or busy day. A change under 0.05 points reads "level with yesterday".

What stays local, and how do I wire it for real?

Everything: the counts are typed for one fixed day and nothing is logged. Replace them with counts from your access logs grouped by hour and status class, and pass the endpoint table from a top-N query.

Can I use it without a pointer?

Yes. The columns are one tab stop: left and right arrows, Home and End move between hours and Enter or Space pins one. Each column is named with its hour and its call count, and a polite status line reads the pinned hour's counts for every family on.

All 200 dashboard blocks