1 variant

Usage Meter

A segmented usage bar with a live total and an upgrade prompt once a limit is close.

API calls this month7,100 / 10,000

Chat4,200Embeddings2,100Vision800

Storage4.4 / 5

Documents4.4

usage.tsx

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

export function ApiUsage() {
  return (
    <UsageMeter
      label="API calls this month"
      limit={10000}
      categories={[
        { label: "Chat", value: 4200 },
        { label: "Embeddings", value: 2100 },
      ]}
    />
  );
}

"use client";

import { ArrowUpRight } from "lucide-react";
import { useEffect, useId, useState } from "react";
import { cn } from "@/lib/utils";

export interface UsageCategory {
  label: string;
  value: number;
  /** Segment color. Default cycles through the theme's accent palette. */
  tone?: "accent" | "violet" | "neon" | "warning";
}

113 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/usage-meter

Props

UsageMeter

labelRequiredstring

Sits above the bar and names the progressbar for screen readers.

categoriesRequiredUsageCategory[]

One segment and one legend entry each.

limitRequirednumber

What the bar is measured against.

warnAtnumberDefault 0.8

Fraction of the limit that turns on the warning.

upgradeHrefstring

Where Upgrade goes. Without it the warning still shows, just as plain text rather than a link to nowhere.

classNamestring

Merged last, so anything passed here wins over the component's own classes.

UsageCategory

labelRequiredstring

Shown in the legend under the bar.

valueRequirednumber

Printed beside the label, so the number is never hidden behind a hover.

tone"accent" | "violet" | "neon" | "warning"Default cycles the accents

Segment color.