shadcn.io is not affiliated with official shadcn/ui
Account Limits Account Block for Ark UI
A bento of six hairline cells counting passkeys, access tokens, linked sign-ins, trusted devices, delegates and connected apps against their caps, with near-full cells larger and ringed and a headline that follows the counts.
Installation
Overview
Show how close an account is to each of its caps with this account limits panel for React with Ark UI. A compact header holds the title and one sentence with the as-of day. Inside a hairline frame a headline says which credentials are nearly full and what to do, then a grid of six hairline cells counts passkeys, access tokens, linked sign-ins, trusted devices, delegates and connected apps. A cell at 80% of its cap or more is larger, carries a Circular Progress ring and a count of what is spare; the others carry a thin bar. Manage names the credential it would open. The order, the sizes and the headline are worked out from the counts. It is built from Circular Progress, Badge and Guides, with a CSS entrance only. For the security or developer settings of any product that caps credentials.
FAQ
How do I connect it to real counts?
Edit LIMITS: each has the number held, the limit, a title, a noun and where Manage would go. Replace it with a call to your API. NEAR (80) is the percentage at which a cell becomes large; the headline, the order and the sizes all follow from it.
What makes a cell near-full?
Held divided by the limit, rounded, at or above NEAR. Those cells come first, span two columns from the small breakpoint, show a ring with the percentage and a Badge with how many are spare. The rest keep a thin bar and a plain count. With nothing near full, the headline says every credential has room.
What does Manage do here?
It writes a sentence in the status line saying where it would go, because nothing opens in this demo. In your app make it a link to the page for that credential.