2 variants

Usage Meter

Two ways to show what an account has spent. A segmented bar with an upgrade prompt, and a month of budget broken down by line.

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

Upgrade

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";
}

125 more lines ship with an easeUI Pro license.

Buy a license

Install

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

Usage budget

A month of spend against its limit, on a bar meter that fills left to right and moves out from whichever bar changed.

Usage budget

September

Total used

$55.80/ $450

$394.20 left · 12% used

usage.tsx

import { UsageBudget } from "@/components/registry/usage-budget";

export function Spend() {
  return <UsageBudget period="September" used={55.8} limit={450} />;
}

"use client";

import { Gauge } from "lucide-react";
import { useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";
import { cn } from "@/lib/utils";

export interface UsageBudgetProps {
  title?: string;
  /** Billing period, shown top right. */
  period?: string;
  /** Spent so far. */

105 more lines ship with an easeUI Pro license.

Buy a license

Install

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