Usage budget

Pro

A budget bar with spend, limit and a pace marker.

Installs components/ui/usage-budget.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion none in component source

pnpm dlx shadcn@latest add @caliper/usage-budget

You have passed 80% of your budget

$800 is left for the last 13 days.

$4,200of $5,000 · 84%

Alert at 80% · day 18 of 31

At this pace you will spend about $7,233.33 this month, $2,233.33 over budget.

Compute51%$2,150
Storage23%$980
Network18%$760
Other7%$310

Alert me at80%

When to use #

Use it for

Showing whether spend is on track.

Skip it when

There is no limit.

Installation #

terminal

pnpm dlx shadcn@latest add @caliper/usage-budget

Adds its 7 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { UsageBudget } from "@/components/ui/usage-budget"

The worked example comes with Pro

The 13-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

UsageBudget

component

PropTypeDefault

services *readonly BudgetService[]—

budget *number—

onBudgetChange *(n: number) => void—

alertAt *number—

onAlertAtChange *(pct: number) => void—

dayOfMonth *number—

daysInMonth *number—

currencystring"USD"

classNamestring—

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.