Components / AI Dashboards

AI Token Usage Meter

A circular progress meter showing AI token consumption with remaining quota and cost estimation.

Live Preview — ai-usage-meter-01
75%

Token Limit

75 / 100 tokens

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react

Source Code

ai-usage-meter-01.tsx 
"use client";

import React from "react";

interface AIUsageMeterProps {
    value?: number;
    max?: number;
    title?: string;
}

export default function AIUsageMeter({
    value = 75,
    max = 100,
    title = "Token Limit"
}: AIUsageMeterProps) {
    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
    const radius = 36;
    const circumference = 2 * Math.PI * radius;
    const offset = circumference - (percentage / 100) * circumference;

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-6 shadow-sm w-full max-w-xs mx-auto flex flex-col items-center">
            <div className="relative h-24 w-24">
                <svg className="h-full w-full -rotate-90">
                    <circle
                        cx="48"
                        cy="48"
                        r={radius}
                        fill="transparent"
                        stroke="currentColor"
                        strokeWidth="8"
                        className="text-zinc-100 dark:text-zinc-800"
                    />
                    <circle
                        cx="48"
                        cy="48"
                        r={radius}
                        fill="transparent"
                        stroke="currentColor"
                        strokeWidth="8"
                        strokeDasharray={circumference}
                        strokeDashoffset={offset}
                        strokeLinecap="round"
                        className="text-blue-500 transition-all duration-1000 ease-out"
                    />
                </svg>
                <div className="absolute inset-0 flex flex-col items-center justify-center">
                    <span className="text-xl font-bold text-zinc-900 dark:text-zinc-100">{percentage}%</span>
                </div>
            </div>
            <div className="mt-4 text-center">
                <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{title}</p>
                <p className="text-xs text-zinc-500">{value.toLocaleString()} / {max.toLocaleString()} tokens</p>
            </div>
        </div>
    );
}

Type Reference

Types and interfaces defined in this component.

AIUsageMeterProps 
interface AIUsageMeterProps {
    value?: number;
    max?: number;
    title?: string;
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIUsageMeter() { value = 75, max = 100, title = "Token Limit" }: AIUsageMeterProps

Variables

All variable declarations found in this component.

Name Kind Value
percentage const Math.min(Math.max((value / max) * 100, 0), 100)
radius const 36
circumference const 2 * Math.PI * radius
offset const circumference - (percentage / 100) * circumference

JSX Tags Usage

Every JSX/HTML tag used in this component, with usage count and source.

Tag Count Type Source
<circle> 2× Native Native HTML
<div> 4× Native Native HTML
<p> 2× Native Native HTML
<span> 1× Native Native HTML
<svg> 1× Native Native HTML

Related Components

  • AI Analytics Card — A dashboard analytics card showing AI model usage metrics with sparkline charts, percentage changes, and trend indicators.
  • AI Model Performance Table — A comparison table showing AI model performance benchmarks with sortable columns for speed, accuracy, and cost.
  • AI Request Log — A real-time scrolling log of AI API requests with status indicators, response times, and token counts.
  • AI Cost Breakdown Chart — A visual cost breakdown showing AI spending by model with horizontal bar charts and total cost summary.
  • AI Service Status Badge — An AI service status indicator showing operational health with animated pulse dots and uptime percentages.
  • AI Activity Feed — A timestamped activity feed showing recent AI interactions, model changes, and system events with icon indicators.