Cost meter — Björk UI

Components•Cost meter

Cost meter

Spend against a budget: a figure that springs to new totals, a budget bar that turns amber at 80% and red past 100%, a per-model breakdown with cache savings, and a 14-day sparkline you can scrub with the arrow keys.

Dependencies

Motion clsx tailwind-merge

Copy below cli

npx shadcn add @bjork-ui/cost-meter

How to use

import { CostMeter, SAMPLE_USAGE } from "@/components/bjork-ui/ai/cost-meter";export function Usage() {  const month = SAMPLE_USAGE.periods["30d"];  return (    <CostMeter      spend={month.spend}      budget={month.budget}      breakdown={month.breakdown}      history={SAMPLE_USAGE.history}      defaultPeriod="30d"    />  );}

Spend

$14.40of $20.0072%

Usage by model
Model	In / out	Cached	Cost
Halcyon 3 Pro	2.84M / 312k	1.9M−$5.13	$11.62
Corvid Reasoner	410k / 96k	—	$2.31
Kestrel Mini	1.2M / 240k	400k−$0.05	$0.47

Last 14 days$7.07

Options