Usage Quota - Flexprice

Use Usage Quota to show a customer how much of each metered feature they’ve used against its plan limit, as a set of progress bars. Part of Usage Widgets.

Preview
Code

<UsageQuota
  items={[{ id: 'feat_api_calls', name: 'API Calls', currentUsage: 720, limit: 1000, isUnlimited: false }]}
/>

What UsageQuota supports

One progress bar per metered feature
Unlimited features (rendered without a limit)
Over-limit styling
Empty state when there is nothing to show

Where to use UsageQuota

Customer portal overview
Account settings / usage tab
Upgrade prompts near a limit

Importing UsageQuota

import '@flexprice/ui/style.css';
import { UsageQuota, type UsageQuotaItem } from '@flexprice/ui';

Rendering UsageQuota

const items: UsageQuotaItem[] = [
  { id: 'feat_api_calls', name: 'API Calls', currentUsage: 8200, limit: 10000, isUnlimited: false },
  { id: 'feat_storage', name: 'Storage', currentUsage: 42, limit: null, isUnlimited: true },
];

<UsageQuota items={items} />

Only metered features have a quota to show: filter your data to metered entitlements before mapping into items. See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into UsageQuota

import { adaptUsageQuotaItems } from '@flexprice/ui';

const items = adaptUsageQuotaItems(usageSummary.features);

Usage Widgets

Overview of all four usage components.

Usage Breakdown

Grouped, sortable table of usage and cost by feature.

Metric Cards

Grid of revenue, cost, margin, and custom usage metrics.