Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

HTTP Status Codes Dashboard Block for React

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 Base 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.

  • Pro

    Error Rate Dashboard

    Errors per hour as a row of 24 selectable columns with a line at 60 an hour, the chosen hour's six error groups ranked by count with a Mute and Undo for each, and a sample stack trace for the group you pick.

  • Pro

    API Latency Dashboard

    Nine endpoints ranked by p50, p95 or p99 with a range bar on one 0 to 1,000 ms scale, an SLO slider that marks the ones over it, and a histogram of the chosen endpoint's requests.

  • Pro

    Endpoint Latency Dashboard

    A heatmap of eight endpoints by the last 12 hours in a five-step ramp with the average ms in each cell, an SLA slider that rings the cells over it, and a list of the slow endpoints with their trend.

  • Pro

    API Usage Dashboard

    A month's 10M-call quota as a segmented bar by consumer and a running total against an even pace, with the projected run-out day and a cap field per consumer that moves it.

  • Pro

    API Health Dashboard

    Eight endpoints against six probe locations as a matrix of pass, slow and fail cells, with a slider for how many locations must fail before an endpoint counts as down, and a reading for the chosen one.

  • Pro

    API Versioning Dashboard

    A sunset readiness panel for an old API version: a countdown bar, a three-condition gate worked out from the data, the consumers still calling v1 with a Migrated switch each, and a Confirm sunset button that stays inert until the gate passes.

All 7 dashboard blocks