> ## Documentation Index
> Fetch the complete documentation index at: https://docs.flexprice.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Usage Widgets

> Metric cards, trend chart, breakdown table, and quota bars for showing customer usage

**Usage Widgets** are four independent components for showing a customer's usage: [Metric Cards](/docs/exportable-ui/usage-widgets/metric-cards), [Usage Trend Chart](/docs/exportable-ui/usage-widgets/usage-trend-chart), [Usage Breakdown](/docs/exportable-ui/usage-widgets/usage-breakdown), and [Usage Quota](/docs/exportable-ui/usage-widgets/usage-quota). Use one on its own, or combine them into a usage dashboard.

Each component is presentational and takes its own prop shape. There is no shared parent component: render the ones you need, in whatever layout fits your page.

## Components

<CardGroup cols={2}>
  <Card icon="chart-simple" href="/docs/exportable-ui/usage-widgets/metric-cards" title="Metric Cards">
    Grid of revenue, cost, margin, and custom usage metrics.
  </Card>

  <Card icon="chart-line" href="/docs/exportable-ui/usage-widgets/usage-trend-chart" title="Usage Trend Chart">
    Line chart of usage over time, one series per feature.
  </Card>

  <Card icon="table-list" href="/docs/exportable-ui/usage-widgets/usage-breakdown" title="Usage Breakdown">
    Grouped, sortable table of usage and cost by feature.
  </Card>

  <Card icon="gauge" href="/docs/exportable-ui/usage-widgets/usage-quota" title="Usage Quota">
    Progress bars for each metered feature against its plan limit.
  </Card>
</CardGroup>

## Import

```tsx theme={null}
import '@flexprice/ui/style.css';
import { MetricCards, UsageTrendChart, UsageBreakdown, UsageQuota } from '@flexprice/ui';
```

Each component page documents its own prop shape, an example, and the adapter for mapping Flexprice usage analytics API responses.

## See also

<CardGroup cols={2}>
  <Card icon="book-open" href="/docs/exportable-ui/overview" title="Overview">
    Install Flexprice UI, choose a data source, theme, and integrate components.
  </Card>

  <Card icon="wallet" href="/docs/exportable-ui/credits-widgets/credits-widgets" title="Credits Widgets">
    Wallet balance and transaction history components.
  </Card>
</CardGroup>