Usage Meter

A minimal usage meter component with color-coded progress bars that indicate usage status. Use UsageMeterGroup to wrap multiple meters.

Preview

Status Levels

The progress bar color changes based on usage percentage:

Install Summary

This kit will add the following files and dependencies to your project. Download the bundle and extract it into your project root.

Component Files

File	Path
usage-meter.tsx	components/billing/usage-meter/usage-meter.tsx
types.ts	components/billing/usage-meter/types.ts
index.ts	components/billing/usage-meter/index.ts

Utility Files

File	Path
design-tokens.ts	lib/design-tokens.ts

Installation

Download the complete bundle as a ZIP file, or copy the text bundle to your clipboard:

Component Files

The component consists of the following files:

1. usage-meter.tsx

usage-meter.tsx

tsx

"use client";

import { useEffect, useMemo } from "react";
import { cn } from "@/lib/utils";
import type { UsageMeterProps } from "./types";

2. types.ts

types.ts

tsx

export type UsageMeterSize = "sm" | "default" | "lg";
export type UsageMeterStatus = "normal" | "warning" | "danger" | "exceeded";

export interface UsageMeterProps {
  /** Current usage amount */

3. index.ts

index.ts

tsx

export { UsageMeter, UsageMeterGroup } from "./usage-meter";
export type * from "./types";

Shared Utilities

This component uses shared utility functions. These are included in the bundle above:

design-tokens.ts

tsx

// Border radius
export const radius = {
  card: "rounded-xl",
  badge: "rounded-full",
  button: "rounded-lg",

Usage

app/dashboard/page.tsx

tsx

import { UsageMeter, UsageMeterGroup } from "@/components/billing/usage-meter";

export default function DashboardPage() {
  return (
    <UsageMeterGroup className="max-w-md">

Props

Prop	Type	Default
used	number	Required
limit	number	Required
label	string	Required
unit	string	-
description	string	-
showPercentage	boolean	false
onExceeded	() => void	-

Features

Clean, minimal design with subtle card grouping
Color-coded status: green, blue-gray, amber, rose
Text indicators for warning and exceeded states
Automatic number formatting (K/M suffixes)
Dark mode support

Accessibility

Uses role="meter" for proper semantics
Includes aria-valuenow, aria-valuemin, aria-valuemax
Screen reader friendly label with current values