UsageDisplay

Import

import { UsageDisplay, CompactUsageDisplay } from "@billingos/sdk";

Basic usage

<UsageDisplay featureKey="api_calls" />

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

Props

string

Show usage for a specific feature. Omit to show all metered features.

string

Custom title above the usage display.

boolean

default:"true"

Show the progress bar.

boolean

default:"true"

Show when the usage counter resets.

string

Custom CSS class name.

CompactUsageDisplay

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

<CompactUsageDisplay featureKey="api_calls" />

Props

string

required

The feature key to display usage for.

string

Custom CSS class name.

Examples

All features

<UsageDisplay title="Your usage" />

<aside>
  <CompactUsageDisplay featureKey="api_calls" />
  <CompactUsageDisplay featureKey="storage_gb" />
</aside>

Custom styled

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

Getting Started

Components

Hooks

Advanced

Import

Basic usage

Props

CompactUsageDisplay

Props

Examples

All features

Single feature in a sidebar

Custom styled

​Import

​Basic usage

​Props

​CompactUsageDisplay

​Props

​Examples

​All features

​Single feature in a sidebar

​Custom styled

Import

Basic usage

Props

CompactUsageDisplay

Props

Examples

All features

Single feature in a sidebar

Custom styled