beUI Pro 移动端已上线:50 个 React Native 区块和页面
Usage Budget
1 个变体
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",
},
]}
/>
);
}
安装
使用 shadcn CLI 添加此组件。
$ bunx --bun shadcn add @beui-pro/usage-budget