Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Quota Usage Dashboard Block for Svelte

Six quotas as ruled rows measured against the plan you pick in a segmented control, so each bar re-scales, with a count of quotas above 80% and an upgrade button that opens a dialog saying nothing was changed.

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

Find the plan that fits what you use, with this quota usage panel for Svelte with Ark UI. A hairline frame with a plus mark on each corner lists six quotas (API calls, storage, seats, projects, custom domains and webhooks) as ruled rows, each with the usage so far, the limit, a bar and a word such as "Near the limit" or "Over the limit". A Segment Group in the header picks Starter (your current plan), Team or Scale, every bar re-scales to that plan's limits, and the foot says how many quotas are above 80%. Its Shine Button reads "Upgrade to Team" and opens a Dialog that lists the new limits and says nothing was changed. It's built from Segment Group, Dialog, Shine Button and Guides. For account pages and plan-picking flows.

FAQ

How do I fill it with my own quotas?

Edit QUOTAS: each has a name, a unit word (or none for plain counts), the usage and a limit for each plan in the order of PLANS. The percentages, the words, the bars and the count above 80% are worked out from those. Set current on the plan the customer is on.

What do the words beside the bars mean?

Over the limit is above 100%, At the limit is exactly 100%, Near the limit is above 80%, and anything else is Within the limit. The word is there so the state never rests on how dark a bar is. A bar is full for anything over its limit and the percentage beside it says how far over.

What does Upgrade do?

Nothing but open the dialog: it lists the six new limits next to today's and says no billing is behind this demo. On the current plan the button is marked as disabled and says so in the status line instead of opening. In your app, replace the dialog's body with your checkout or a plan-change confirmation.

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

Everything: usage and limits are typed. To make it real, read the current usage from your metering and the limits from your plan catalogue, and send the chosen plan to your billing provider from the dialog.

How does it look on a phone?

The segmented control takes the full width, each row takes two lines with its bar across the full width, and the action foot stays pinned to the bottom of the screen.

All 200 dashboard blocks