Billing SDK/Billing SDK
Usage MeterUsage Meter Circle

Usage Meter Circle

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

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="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="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
npx shadcn@latest add @billingsdk/usage-meter-circle
npx @billingsdk/cli add usage-meter-circle
pnpm dlx @billingsdk/cli add usage-meter-circle
npx @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="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="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="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="circle"
        size="md"
        className="mx-auto" />
    </div>

  );
}

Cancel Subscription Dialog

The Cancel Subscription Dialog component provides a comprehensive and user-friendly interface for handling subscription cancellations. It features a two-step confirmation process, loading states, error handling, and full customization options.

Usage Meter Linear

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