Skip to main content

​
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

​
featureKey
string
Show usage for a specific feature. Omit to show all metered features.
​
title
string
Custom title above the usage display.
​
showProgress
boolean
default:"true"
Show the progress bar.
​
showResetTimer
boolean
default:"true"
Show when the usage counter resets.
​
className
string
Custom CSS class name.

​
CompactUsageDisplay

A smaller variant for inline use (e.g., in headers or sidebars). 
<CompactUsageDisplay featureKey="api_calls" />

​
Props

​
featureKey
string
required
The feature key to display usage for.
​
className
string
Custom CSS class name.

​
Examples

​
All features

<UsageDisplay title="Your usage" />

​
Single feature in a sidebar

<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"
/>