beUI Pro pour mobile est disponible : 50 blocs et écrans React Native
Usage Budget
1 variante
A segmented usage meter with resource costs, animated totals, and an adjustable monthly budget.
Usage Budget
index.tsxA segmented usage meter with resource costs, animated totals, and an adjustable monthly budget.
Usage budget
SeptemberTotal used
$55.80/ $100
$44.20 remaining this month · 56% used
- Model inference1.8M tokens across 3 models
- $38.40
- Tool calls420 searches and browser actions
- $12.60
- Knowledge storage2.4 GB indexed
- $4.80
Monthly limit
Adjust in $25 increments
TSXcomponents/previews/premium/usage-budget-preview.tsx
"use client";
import { UsageBudget } from "@/components/premium/usage-budget";
export function UsageBudgetPreview() {
return (
<UsageBudget
initialBudget={100}
resources={[
{
id: "inference",
name: "Model inference",
amount: 38.4,
detail: "1.8M tokens across 3 models",
},
{
id: "tools",
name: "Tool calls",
amount: 12.6,
detail: "420 searches and browser actions",
},
{
id: "storage",
name: "Knowledge storage",
amount: 4.8,
detail: "2.4 GB indexed",
},
]}
/>
);
}
Le code source est verrouillé
Obtenez un accès pour installer les composants premium et voir tout le code source.
Ouvrir le tableau de bordInstallation
Ajoutez ce composant avec la CLI shadcn.
$ bunx --bun shadcn add @beui-pro/usage-budget