Usage MeterUsage 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

src/components/usage-meter-linear-demo.tsx

'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-linear

pnpm dlx shadcn@latest add @billingsdk/usage-meter-linear

npx shadcn@latest add @billingsdk/usage-meter-linear

npx @billingsdk/cli add usage-meter-linear

pnpm dlx @billingsdk/cli add usage-meter-linear

npx @billingsdk/cli add usage-meter-linear

Custom 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

src/components/custom-usage-meter-linear-demo.tsx

  '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

src/components/usage-meter-linear-demo.tsx

'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.

Top Banner

The Top Banner component displays a banner at the top of the page.