Billing SDK/Billing SDK
Billing & Usage AnalyticsUsage Meter Circle

Usage Meter Circle

Displays usage progress in a circular meter with an animated ring, status badges, and size variants.

Playground

You can change the progress color of the usage meter to default or usage.

Default Usage Meter Circle

LLM Usage
Your usage of the LLM models
Claude Sonnet 4
0%used
25 / 100 leftHigh
ChatGPT 5
0%used
88 / 100 left
Grok 3
0%used
43 / 100 left
Gemini 2.5
0%used
5 / 100 leftCritical
src/components/usage-meter-circle-demo.tsx
"use client";

import { UsageMeter } from "@/components/billingsdk/usage-meter";

export default function UsageMeterCircleDemo() {
  return (
    <div className="mx-auto flex w-full flex-col gap-4">
      <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="circle"
        size="md"
        className="mx-auto"
      />
    </div>
  );
}

Installation

npx shadcn@latest add @billingsdk/usage-meter-circle
pnpm dlx shadcn@latest add @billingsdk/usage-meter-circle
yarn dlx shadcn@latest add @billingsdk/usage-meter-circle
bunx shadcn@latest add @billingsdk/usage-meter-circle
npx @billingsdk/cli add usage-meter-circle
pnpm dlx @billingsdk/cli add usage-meter-circle
yarn dlx @billingsdk/cli add usage-meter-circle
bunx @billingsdk/cli add usage-meter-circle

Custom Usage Meter Circle

LLM Usage
Your usage of the LLM models
Claude Sonnet 4
0%used
25 / 100 leftHigh
ChatGPT 5
0%used
88 / 100 left
Grok 3
0%used
43 / 100 left
Gemini 2.5
0%used
5 / 100 leftCritical
src/components/custom-usage-meter-circle-demo.tsx
"use client";

import { UsageMeter } from "@/components/billingsdk/usage-meter";

export default function CustomUsageMeterCircleDemo() {
  return (
    <div className="mx-auto flex w-full flex-col gap-4">
      <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="circle"
        size="md"
        className="mx-auto"
        progressColor="usage"
      />
    </div>
  );
}

Usage

import { UsageMeter } from "@/components/billingsdk/usage-meter";
// Default Usage Meter Circle
<UsageMeter
  usage={75}
  limit={100}
  title="Usage"
  description="You have used 75% of your limit"
  variant="circle"
  size="md"
  className="mx-auto"
  progressColor="default" // default, usage
/>

// Custom Usage Meter Circle
<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

PropTypeRequiredDescription
usagenumber✅The usage of the user
limitnumber✅The limit of the user
classNamestring❌Additional CSS classes for styling
titlestring❌Custom title for the usage meter
descriptionstring❌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

src/components/usage-meter-circle-demo.tsx
"use client";

import { UsageMeter } from "@/components/billingsdk/usage-meter";

export default function UsageMeterCircleDemo() {
  return (
    <div className="mx-auto flex w-full flex-col gap-4">
      <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="circle"
        size="md"
        className="mx-auto"
      />
    </div>
  );
}

Billing Settings 2

A comprehensive billing settings component with customizable input fields, feature toggles, currency selection, and built-in validation. Supports 180+ currencies and custom validation rules.

Usage Meter Linear

Displays usage progress with an animated linear bar, remaining quota, status badges, and size variants..