Billing & Usage AnalyticsUsage Meter Linear
Usage Meter Linear
Displays usage progress with an animated linear bar, remaining quota, status badges, and size variants..
You can change the progress color of the usage meter to default or usage.
Default Usage Meter Linear
LLM Usage
Your usage of the LLM models
Claude Sonnet 40%
25 / 100 leftHigh
ChatGPT 50%
88 / 100 left
Grok 30%
43 / 100 left
Gemini 2.50%
5 / 100 leftCritical
'use client'
import { UsageMeter } from "@/components/billingsdk/usage-meter";
export default function UsageMeterLinearDemo() {
return (
<div className="flex flex-col gap-4 mx-auto w-full">
<UsageMeter
usage={[{
name: "Claude Sonnet 4",
usage: 75,
limit: 100
}, {
name: "ChatGPT 5",
usage: 12,
limit: 100
}, {
name: "Grok 3",
usage: 57,
limit: 100
}, {
name: "Gemini 2.5",
usage: 95,
limit: 100
}]}
title="LLM Usage"
description="Your usage of the LLM models"
variant="linear"
size="md"
className="mx-auto" />
</div>
);
}Installation
npx shadcn@latest add @billingsdk/usage-meter-linearpnpm dlx shadcn@latest add @billingsdk/usage-meter-linearyarn dlx shadcn@latest add @billingsdk/usage-meter-linearbunx shadcn@latest add @billingsdk/usage-meter-linearnpx @billingsdk/cli add usage-meter-linearpnpm dlx @billingsdk/cli add usage-meter-linearyarn dlx @billingsdk/cli add usage-meter-linearbunx @billingsdk/cli add usage-meter-linearCustom Usage Meter Linear
LLM Usage
Your usage of the LLM models
Claude Sonnet 40%
25 / 100 leftHigh
ChatGPT 50%
88 / 100 left
Grok 30%
43 / 100 left
Gemini 2.50%
5 / 100 leftCritical
'use client'
import { UsageMeter } from "@/components/billingsdk/usage-meter";
export default function CustomUsageMeterLinearDemo() {
return (
<div className="flex flex-col gap-4 mx-auto w-full">
<UsageMeter
usage={[{
name: "Claude Sonnet 4",
usage: 75,
limit: 100
}, {
name: "ChatGPT 5",
usage: 12,
limit: 100
}, {
name: "Grok 3",
usage: 57,
limit: 100
}, {
name: "Gemini 2.5",
usage: 95,
limit: 100
}]}
title="LLM Usage"
description="Your usage of the LLM models"
variant="linear"
size="md"
className="mx-auto"
progressColor="usage"/>
</div>
);
}Usage
import { UsageMeter } from "@/components/billingsdk/usage-meter";// Default Usage Meter Linear
<UsageMeter
usage={75}
limit={100}
title="Usage"
description="You have used 75% of your limit"
variant="linear"
size="md"
className="mx-auto"
progressColor="default" // default, usage
/>
// Custom Usage Meter Linear
<UsageMeter
usage={75}
limit={100}
title="Usage"
description="You have used 75% of your limit"
variant="circle"
size="md"
className="mx-auto"
progressColor="usage" // default, usage
/>Props
| Prop | Type | Required | Description |
|---|---|---|---|
usage | number | ✅ | The usage of the user |
limit | number | ✅ | The limit of the user |
className | string | ❌ | Additional CSS classes for styling |
title | string | ❌ | Custom title for the usage meter |
description | string | ❌ | Custom description for the usage meter |
variant | "linear" | "circle" | ❌ | Variant of the usage meter (default: "linear") |
size | "sm" | "md" | "lg" | ❌ | Size of the usage meter (default: "md") |
progressColor | "default" | "usage" | ❌ | Color of the progress bar (default: "default") |
Theming
The usage meter circle component is styled using the shadcn/ui library. You can customize the colors and fonts by overriding the CSS variables. You can also get the theme from the Theming page.
Example
'use client'
import { UsageMeter } from "@/components/billingsdk/usage-meter";
export default function UsageMeterLinearDemo() {
return (
<div className="flex flex-col gap-4 mx-auto w-full">
<UsageMeter
usage={[{
name: "Claude Sonnet 4",
usage: 75,
limit: 100
}, {
name: "ChatGPT 5",
usage: 12,
limit: 100
}, {
name: "Grok 3",
usage: 57,
limit: 100
}, {
name: "Gemini 2.5",
usage: 95,
limit: 100
}]}
title="LLM Usage"
description="Your usage of the LLM models"
variant="linear"
size="md"
className="mx-auto" />
</div>
);
}Usage Meter Circle
Displays usage progress in a circular meter with an animated ring, status badges, and size variants.
Detailed Usage Table
The Detailed Usage Table component provides a comprehensive breakdown of resource consumption with columns for resource name, used amount, limit, and percentage utilization. The percentage field is now optional and will be automatically calculated if not provided.