║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Usage Meter Linear description: 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

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> <PreviewComponents registryName="usage-meter-circle"> <UsageMeterLinearDemo /> </PreviewComponents> </Tab>

<Tab value="Code" className="mt-3"> <include cwd lang="tsx" meta='title="src/components/usage-meter-linear-demo.tsx"'>src/components/usage-meter-linear-demo.tsx</include> </Tab> </Tabs>

Installation

<Tabs items={['shadcn', 'billingSDK']} defaultValue="shadcn" className="bg-transparent border-none"> <Tab value="shadcn" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="installation-tabs"> <Tab value="npx"> bash npx shadcn@latest add @billingsdk/usage-meter-linear </Tab> <Tab value="pnpm"> bash pnpm dlx shadcn@latest add @billingsdk/usage-meter-linear </Tab> <Tab value="yarn"> bash yarn dlx shadcn@latest add @billingsdk/usage-meter-linear </Tab> <Tab value="bun"> bash bunx shadcn@latest add @billingsdk/usage-meter-linear </Tab> </Tabs> </Tab> <Tab value="billingSDK" className="border-none bg-transparent p-0 mt-3"> <Tabs items={['npx', 'pnpm', 'yarn', 'bun']} defaultValue="npx" groupId="billingsdk-cli-tabs"> <Tab value="npx"> bash npx @billingsdk/cli add usage-meter-linear </Tab> <Tab value="pnpm"> bash pnpm dlx @billingsdk/cli add usage-meter-linear </Tab> <Tab value="yarn"> bash yarn dlx @billingsdk/cli add usage-meter-linear </Tab> <Tab value="bun"> bash bunx @billingsdk/cli add usage-meter-linear </Tab> </Tabs> </Tab> </Tabs>

Custom Usage Meter Linear

<Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> <PreviewComponents registryName="usage-meter-circle"> <CustomUsageMeterLinearDemo /> </PreviewComponents> </Tab>

<Tab value="Code" className="mt-3"> <include cwd lang="tsx" meta='title="src/components/custom-usage-meter-linear-demo.tsx"'>src/components/custom-usage-meter-linear-demo.tsx</include> </Tab> </Tabs>

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

<include cwd lang="tsx" meta='title="src/components/usage-meter-linear-demo.tsx"'>src/components/usage-meter-linear-demo.tsx</include>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║