Usage Meter

A quota gauge that shows used-versus-limit as a color-coded fill bar with a percentage readout and an over-limit warning, for API, storage or billing usage dashboards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Usage Meter to your project and fits it to your theme.

import UsageMeter from "@/components/ui/usage-meter";

export default function UsageMeterDemo() {
  return (
    <div className="flex min-h-[280px] w-full items-center justify-center bg-background p-8 text-foreground">
      <UsageMeter label="API Requests" used={4820} limit={10000} unit="req" />
    </div>
  );
}