Components / AI Dashboards

AI Quota Card

A billing quota card showing API usage limits, current consumption, reset date, and upgrade prompt for AI services.

Live Preview — ai-quota-card-01
Near Limit

Monthly Credit Usage

$42.50/ $50.00
Resets Feb 2885% used

Installation

Dependencies

Install the core libraries required for this component.

npm
npm install react lucide-react

Source Code

ai-quota-card-01.tsx 
"use client";

import React from "react";
import { CreditCard, AlertCircle } from "lucide-react";

interface AIQuotaCardProps {
    used?: number;
    total?: number;
    resetDate?: string;
}

export default function AIQuotaCard({
    used = 42500,
    total = 50000,
    resetDate = "Feb 28"
}: AIQuotaCardProps) {
    const percentage = (used / total) * 100;
    const isNearLimit = percentage > 80;

    return (
        <div className="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5 shadow-sm w-full max-w-xs mx-auto">
            <div className="flex items-start justify-between mb-4">
                <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100">
                    <CreditCard className="h-4 w-4" />
                </div>
                {isNearLimit && (
                    <div className="flex items-center gap-1.5 px-2 py-0.5 rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 text-[10px] font-bold uppercase tracking-wider">
                        <AlertCircle className="h-3 w-3" />
                        Near Limit
                    </div>
                )}
            </div>

            <div className="mb-2">
                <p className="text-xs text-zinc-500 font-medium">Monthly Credit Usage</p>
                <div className="flex items-baseline gap-1 mt-1">
                    <span className="text-2xl font-bold text-zinc-900 dark:text-zinc-100">${(used / 1000).toFixed(2)}</span>
                    <span className="text-xs text-zinc-400">/ ${(total / 1000).toFixed(2)}</span>
                </div>
            </div>

            <div className="h-1.5 w-full bg-zinc-100 dark:bg-zinc-800 rounded-full overflow-hidden mb-3">
                <div
                    className={`h-full transition-all duration-500 ${isNearLimit ? "bg-red-500" : "bg-blue-500"}`}
                    style={{ width: `${percentage}%` }}
                />
            </div>

            <div className="flex items-center justify-between text-[10px] text-zinc-500 uppercase font-black tracking-widest">
                <span>Resets {resetDate}</span>
                <span>{Math.round(percentage)}% used</span>
            </div>
        </div>
    );
}

Type Reference

Types and interfaces defined in this component.

AIQuotaCardProps 
interface AIQuotaCardProps {
    used?: number;
    total?: number;
    resetDate?: string;
}

Functional Logic

Internal functions used to handle component logic.

Function Parameters
AIQuotaCard() { used = 42500, total = 50000, resetDate = "Feb 28" }: AIQuotaCardProps

Variables

All variable declarations found in this component.

Name Kind Value
percentage const (used / total) * 100
isNearLimit const percentage > 80

JSX Tags Usage

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

Tag Count Type Source
<AlertCircle> 1× Library lucide-react
<CreditCard> 1× Library lucide-react
<div> 9× Native Native HTML
<p> 1× Native Native HTML
<span> 4× 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 Token Usage Meter — A circular progress meter showing AI token consumption with remaining quota and cost estimation.
  • 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.