shadcn.io is not affiliated with official shadcn/ui
Multi-Tenant Dashboard Block for React Aria
Four stacked bars for API calls, storage, compute and bandwidth, each cut into seven tenants, with the picked tenant drawn dark, its quotas in words beside the tenant list and a popover that raises one limit.
Installation
Overview
See who takes what of a shared pool and who is over their quota, with this multi-tenant usage panel for React with React Aria. A hairline frame with a plus mark on each corner holds four stacked bars, one per resource (API calls, storage, compute and bandwidth), each cut into the same seven tenants with a hairline between segments; the picked tenant is drawn in the strongest foreground weight and the others alternate two lighter ones, so one tenant stands out across every bar. The empty end of a bar is what the pool still has free. An "Over quota" list under the bars names every quota that is exceeded. The end cell lists the tenants as radio buttons and, for the picked one, says in words how much of each quota is used: "At 64%" or "Over quota by 12%". Raise limit opens a Popover with a Native Select for the resource and a Number Input for the new limit, and a Shine Button sets it. It's built from Popover, Native Select, Number Input, Button, Shine Button and Guides, with bars drawn in CSS. For hosting platforms and admin consoles.
FAQ
How do I load my tenants?
Edit RESOURCES (a name, a unit and the pool's size) and TENANTS (each with used and quota per resource, in the same order). Each segment's width is the tenant's use as a share of the pool, and every sentence, count and the over-quota list are worked out from the same numbers.
How do I read the bars without colour?
Every bar is a full row of the pool: the picked tenant is the darkest segment, the others alternate two lighter weights in the same order on every bar, and the gap at the end is free capacity. A hidden table next to the bars lists every tenant's use for a screen reader, and the end cell states the picked tenant's numbers in words.
What does Set limit do?
It changes that tenant's quota for that resource in this page: the words in the end cell and the over-quota list follow, and the status line says "Saved in this demo". The bars don't move, because they show use, not quota. To make it real, send the new limit to your billing or provisioning service, and show its answer. React Aria's number field commits on blur, Enter or an arrow key, so type a limit and press Tab or Enter.