Radix
A SaaS composite that renders a Card with labeled Progress bars for each quota item. Auto-calculates warning/critical variants from configurable thresholds. Supports unlimited quotas (limit=-1), percentage display, and an optional upgrade button in the footer.
Basic usage quotas
import { QuotaCard } from '@primstack/ui/quota-card'
<QuotaCard
planName="Pro"
items={[
{ label: 'API Calls', current: 8500, limit: 10000, unit: 'calls' },
{ label: 'Storage', current: 4.2, limit: 10, unit: 'GB' },
{ label: 'Team Members', current: 3, limit: -1 },
]}
onUpgrade={() => navigate('/billing')}
/>Usage dashboard
import { QuotaCard } from '@primstack/ui/quota-card'
<QuotaCard
items={quotaItems}
title="Usage"
planName="Pro"
showPercentages
/>