Usage Breakdown

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' },
  ]}
/>

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

Best used for

Usage dashboards
Customer portal usage tab
Cost analysis pages

Import

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

Usage

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.

Map Flexprice API data

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.

⌘I

Introduction

Getting Started

Connect

Event Ingestion

Product Catalogue

Scenarios

Customers

Checkout

Subscriptions

Wallet

Invoices

Webhooks

Settings

Collectors

Data Exports

RBAC

Cookbooks

AI Cost Tracking

Contributing Guide

Exportable UI

Supports

Best used for

Import

Usage

Map Flexprice API data

See also

Usage Widgets

Metric Cards

Usage Trend Chart

​Supports

​Best used for

​Import

​Usage

​Map Flexprice API data

​See also

Usage Widgets

Metric Cards

Usage Trend Chart

Supports

Best used for

Import

Usage

Map Flexprice API data

See also