shadcn.io is not affiliated with official shadcn/ui
Usage Meters Billing Block for Svelte
Usage meters for an app's settings: one row per quota with its count, a bar that turns to a warning tone at 80% and an over-limit tone past 100%, and a plain line on what happens next.
Installation
Overview
Show customers where they stand against every quota, inside your app, with this usage meters section for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a summary band and one row per quota (log volume, retention storage, seats and API requests). The summary band lays out plan, period and reset date as a Data List, beside a Shine Button to upgrade, the only colored control, and an outline "Export usage" Button. Each row gives the count against the limit, a Progress bar and a line on what happens next. A bar keeps your foreground color until 80%, where it takes the warning tone and a "Nearly full" Badge; past 100% it fills in the destructive tone and the badge reads "Over limit". A tick marks 80% on every bar, and a footer note says when the limits reset. Each row's top rule is drawn with Guides, with a plus where it meets the frame. It's a server component with a CSS entrance only. For SaaS billing settings, usage pages and admin consoles.
FAQ
How do I fill the meters from my own metering?
Everything comes from two constants at the top of the file. ACCOUNT holds the plan's name and three ISO dates: the first and last day of the period and the day it resets. METERS lists each quota's label, used, limit, the unit written after a count ("GB", or empty for plain counts), the noun a screen reader hears, and the next line that says what happens at the limit. Replace them with your own usage data, and pass them in as props if the page fetches them.
How does a meter pick its tone?
toneOf compares used with limit. Below 80% the bar is your foreground color and there is no badge. From 80% up to the limit the bar takes the warning tone and the row gets a "Nearly full" badge. Over the limit the bar fills completely in the destructive tone and the badge says "Over limit"; the count still shows the real number, so 1.08M of 1M reads as it is. Change WARN_AT to move the threshold, and the tick on each bar sits at 80%, so move it with start-[80%] too.
Why does every row say what happens next?
A bar alone doesn't tell anyone whether to worry. The line under each one says what the limit does in your product: new logs are dropped after a day, the oldest logs roll off, extra seats cost a set price, requests are rate limited. It is plain text on the page, not a tooltip, so a phone, a keyboard and a screen reader all get it. Keep your own lines true to what your product does at each limit.
What does a screen reader hear?
The section is headed by an h2 and each quota by an h3. A row reads as its label, any state badge, then its count and limit, for example "API requests, Over limit, 1.08M of 1M requests, 108%", then the line on what happens next. The bars only repeat what the numbers say, so they're hidden from assistive technology rather than announced twice. Dates sit in time elements and are written in UTC, so the reset day is the same on the server and in every time zone.