shadcn.io is not affiliated with official shadcn/ui
Usage Cards Sidebar Block for Radix UI
A backend-as-a-service in a fixed-height window whose sidebar footer holds mini cards for team seats, API calls and storage, with Simulate 500 calls moving the meter to Near the limit and then Limit reached.
Installation
Overview
Show a plan's limits where people already look with this mini cards sidebar for React with Radix UI. A window framed by a hairline with a plus mark on each corner holds a Sidebar with five project sections and, in its footer, three small cards for the Starter plan: team seats, API calls (8,420 of 10,000) and storage (4.2 of 10 GB). Each card is a thin Progress bar with its figures and its state in words. Simulate 500 calls in the top bar adds to the API meter; from 90% the card says Near the limit with a warning Status dot and an Upgrade link, and at 100% it says Limit reached, the meter stops and the button reads Reset usage. The page is the open section, and Usage lists the same meters as text. Folded to icons the cards give way to the section icons, and on a phone the rail is a sheet. It's built from Sidebar, Progress, Status, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For SaaS dashboards, developer consoles and any product with plan limits.
FAQ
When does a card change?
A meter is ok below 90%, near the limit from 90% and at the limit from 100%. The words line is always there, so a card keeps its height: it reads "84% used", then Near the limit or Limit reached with a dot beside it. The Upgrade link is in the same line and is hidden, and out of the tab order, until the card needs it.
What does Simulate 500 calls do?
It adds 500 to the API calls figure, stopping at the limit of 10,000, and the card, the Usage page and the status line all follow. It meters nothing; the numbers are typed. At the limit the same button reads Reset usage and returns the meter to 8,420.
Why is only a dot coloured?
Status colours are for dots and icons only. The state is also a word, and the bar is foreground-toned in every state, so the cards read the same for people who cannot tell the colours apart and in every theme.
How are the sections wired?
The sections are links to # whose handler shows the page instead of navigating. They are SidebarMenuButtons with asChild around an a element. Point them at your routes and mark the current one with isActive and aria-current.
What stays in the page, and how do I connect it?
Everything, and Upgrade is not connected: it only says so. The sections, meters and limits are typed in this file. The block sets persist={false} and shortcut={false}, so it writes no cookie and leaves Ctrl and Command with B to the page it sits on. To connect it, load the period's usage and limits from your billing system and send Upgrade to your checkout; the percentages, words and labels are worked out from those numbers.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button in the top bar opens from the start edge, the right in a right-to-left layout. The usage cards are at the foot of it. Choosing a page closes the sheet and puts focus back on the button, and the status line under the page says what changed.