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

# UsageDisplay

> Show usage progress bars for metered features.

## Import

```tsx theme={null}
import { UsageDisplay, CompactUsageDisplay } from "@billingos/sdk";
```

## Basic usage

```tsx theme={null}
<UsageDisplay featureKey="api_calls" />
```

Renders a progress bar showing current usage vs the plan limit, with a reset timer.

<img src="https://mintlify.s3.us-west-1.amazonaws.com/billingos/images/usage-display.png" alt="Usage display" />

## Props

<ResponseField name="featureKey" type="string">
  Show usage for a specific feature. Omit to show all metered features.
</ResponseField>

<ResponseField name="title" type="string">
  Custom title above the usage display.
</ResponseField>

<ResponseField name="showProgress" type="boolean" default="true">
  Show the progress bar.
</ResponseField>

<ResponseField name="showResetTimer" type="boolean" default="true">
  Show when the usage counter resets.
</ResponseField>

<ResponseField name="className" type="string">
  Custom CSS class name.
</ResponseField>

## CompactUsageDisplay

A smaller variant for inline use (e.g., in headers or sidebars).

```tsx theme={null}
<CompactUsageDisplay featureKey="api_calls" />
```

### Props

<ResponseField name="featureKey" type="string" required>
  The feature key to display usage for.
</ResponseField>

<ResponseField name="className" type="string">
  Custom CSS class name.
</ResponseField>

## Examples

### All features

```tsx theme={null}
<UsageDisplay title="Your usage" />
```

### Single feature in a sidebar

```tsx theme={null}
<aside>
  <CompactUsageDisplay featureKey="api_calls" />
  <CompactUsageDisplay featureKey="storage_gb" />
</aside>
```

### Custom styled

```tsx theme={null}
<UsageDisplay
  featureKey="team_members"
  title="Team members"
  showResetTimer={false}
  className="bg-gray-50 rounded-lg p-4"
/>
```