Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

API Usage Dashboard Block for Ark UI

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.

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

See who is burning the quota and when it runs out, with this API usage panel for React with Ark UI. A hairline frame with a plus mark on each corner opens with a segmented bar of the month's 10M calls by consumer (Web app, Mobile app, Partner feed, Nightly sync and Others) in foreground weights, then a running-total chart against a straight pace line, a dashed projection and a diamond on the day the quota is reached. Each consumer row has a Number Input for a monthly cap that reads "No cap" until you set one: a cap stops that consumer's projection at its limit and moves the date. A Native Select in the header switches between October, which is open, and September, which is closed and only reads, and a Shine Button saves the caps. It's built from Number Input, Native Select, Button, Shine Button and Guides. For developer consoles and metering pages.

FAQ

How do I fill it with my usage?

Edit CONSUMERS and the periods. Each period has daily: calls made by each consumer on each elapsed day, the number of days in the month, a month and whether it is open. The bar, the chart, the shares, the projection and the header sentence are all worked out from those, and QUOTA is the plan's allowance.

How is the run-out day projected?

For each consumer, the mean of its last seven days is held flat for every remaining day. A consumer with a cap stops adding calls once it reaches the cap. The projection sums them day by day and reports the first day the total reaches the quota, or says the quota holds to month end. The note under the chart says the same thing.

Do the caps do anything?

They change the projection and nothing else: set a cap on the Partner feed and the dashed line bends, the month-end figure for that row drops and the run-out day moves later. Save caps keeps them in this page and says so; nothing is enforced. Caps are typed as whole calls, and anything else is tidied when the field loses focus.

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

Everything: the daily totals are typed and no cap is stored or applied. To make it real, load the daily series from your metering, send saved caps to the gateway that enforces them, and decide whether a cap blocks, throttles or bills the consumer.

How does it look on a phone?

The bar and the chart come first, the consumers become two-line rows with the cap field under them, and the action foot stays pinned to the bottom of the screen.

All 200 dashboard blocks