beUI Pro für Mobile ist live: 50 React Native Blöcke und Screens
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",
},
]}
/>
);
}
Der Quellcode ist gesperrt
Hol dir Zugang, um Premium-Komponenten zu installieren und den vollständigen Quellcode zu sehen.
Dashboard öffnenInstallieren
Füge diese Komponente mit der shadcn CLI hinzu.
$ bunx --bun shadcn add @beui-pro/usage-budget