Usage Breakdown - Flexprice

Use Usage Breakdown to show a detailed, sortable table of usage and cost per feature, with optional grouping. Part of Usage Widgets.

Preview
Code

<UsageBreakdown
  rows={[
    { id: 'feat_api_calls', name: 'API Calls', totalUsage: 8200, unit: 'calls', totalCost: 41, currency: 'USD' },
    { id: 'feat_storage', name: 'Storage', totalUsage: 42, unit: 'GB', totalCost: 12.5, currency: 'USD' },
  ]}
/>

What UsageBreakdown supports

Sort by total usage or total cost
Grouping (features roll up under a group, with an ungrouped bucket for the rest)
Expand / collapse all groups
Custom units per row
Loading skeleton state
Empty state when there is no data

Where to use UsageBreakdown

Usage dashboards
Customer portal usage tab
Cost analysis pages

Importing UsageBreakdown

import '@flexprice/ui/style.css';
import { UsageBreakdown, type UsageBreakdownRow } from '@flexprice/ui';

Rendering UsageBreakdown

const rows: UsageBreakdownRow[] = [
  { id: 'feat_api_calls', name: 'API Calls', groupId: 'grp_core', groupName: 'Core', totalUsage: 8200, unit: 'calls', totalCost: 41, currency: 'USD' },
  { id: 'feat_storage', name: 'Storage', totalUsage: 42, unit: 'GB', totalCost: 12.5, currency: 'USD' },
];

<UsageBreakdown rows={rows} />

Rows without a groupId render in an “ungrouped” bucket. See Ways to provide data for SDK, API, backend, and static JSON options.

Mapping API data into UsageBreakdown

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

const rows = adaptUsageBreakdownRows(analytics.items);

Usage Widgets

Overview of all four usage components.

Metric Cards

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

Usage Trend Chart

Line chart of usage over time, one series per feature.