Resource Quota Grid

Responsive grid of quota cards, one per resource, each with a labelled usage bar showing used over max. Useful for infra limits like builds, storage and seats.

src/registry/ui/resource-quota-grid.tsx/r/resource-quota-grid.json

Installation#

bash
npx shadcn@latest add @minidev/resource-quota-grid

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/resource-quota-grid.json

Usage#

tsx
import { ResourceQuotaGrid } from "@/components/ui/resource-quota-grid"

export function Example() {
  return (
    <ResourceQuotaGrid
      items={[
        { label: "Seats", used: 42, max: 50 },
        { label: "API", used: 820000, max: 1000000 },
        { label: "Storage", used: 18, max: 100 },
      ]}
    />
  )
}

API reference#

ResourceQuotaGrid props
PropTypeDefault
itemsQuota[]SAMPLE_QUOTAS
classNamestring-

Dependencies#

npm

React only

Built from

Examples#

All dashboard components