beUI Pro para móvil ya está disponible: 50 bloques y pantallas de 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",
},
]}
/>
);
}
El código fuente está bloqueado
Consigue acceso para instalar componentes premium y ver todo el código fuente.
Abrir panelInstalar
Añade este componente con la CLI de shadcn.
$ bunx --bun shadcn add @beui-pro/usage-budget