Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Multi-Tenant Dashboard Block for Solid

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.

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

See who takes what of a shared pool and who is over their quota, with this multi-tenant usage panel for Solid with Ark UI. 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.

What if no one is over quota?

The list says every tenant is within its quotas. The panel keeps its height: the end cell holds the picked tenant's four resources whoever it is.

How does it look on a phone?

The bars come first. The tenant list becomes a select above the picked tenant's quotas, and the Raise limit popover opens under its button.

All 200 dashboard blocks