Usage meter for metered SaaS billing: API calls against the plan allowance, a projection from today's run rate, the date you cross the limit and the overage cost. Calm, heading-over and over states. React + Tailwind + Framer Motion.
import * as React from "react";
import { UsageMeter } from "@/components/ui/usage-meter";
/* ==========================================================================
Northwind Studio's API calls for the period 14 Sep – 14 Oct: 500k
included, $0.20 per 1,000 after that.
The slider under the card walks the period a day at a time. Early on the
run rate is low and the meter is calm; from the second week the dashed
projection passes the allowance and the meter says when, and what it will
cost; past day 25 the calls are over and the overage turns red.
In your app `used` and `day` come from your metering, and nothing moves.
========================================================================== */
/** Calls per day across the 30-day period. Day 13 lands on 260k. */
const DAILY = [
14, 14, 14, 14, 14, 14, 25, 25, 25, 25, 25, 25, 26, 21, 22, 20, 23, 22, 21, 24, 22, 23, 21, 22, 24, 23, 22, 21, 22, 20,
].map((k) => k * 1000);
const INCLUDED = 500_000;
const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
const START = new Date(Date.UTC(2026, 8, 14)); // 14 Sep 2026
const dayLabel = (d: number) => {
const t = new Date(START);
t.setUTCDate(t.getUTCDate() + d);
return `${t.getUTCDate()}\u00a0${MONTHS[t.getUTCMonth()]}`; // no break inside a date
};
export default function UsageMeterDemo() {
const [day, setDay] = React.useState(13);
const used = DAILY.slice(0, day).reduce((a, b) => a + b, 0);
const perDay = used / day;
const crossing = used < INCLUDED ? Math.ceil((INCLUDED - used) / perDay) + day : null;
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="flex w-full max-w-[440px] flex-col gap-4">
<UsageMeter
title="API usage"
unit="API calls"
included={INCLUDED}
used={used}
day={day}
daysInPeriod={30}
periodLabel="14 Sep – 14 Oct"
periodEnd="14 Oct"
crossesOn={crossing !== null && crossing <= 30 ? dayLabel(crossing) : undefined}
overage={{ per: 1000, price: 20 }}
action={{ label: "Compare plans", onClick: () => console.info("compare plans") }}
/>
<label className="flex items-center gap-3 px-1 text-[11.5px] text-muted-foreground">
<span className="w-[92px] shrink-0 whitespace-nowrap tabular-nums">Day {day} · {dayLabel(day - 1)}</span>
<input
type="range"
min={1}
max={30}
value={day}
onChange={(e) => setDay(Number(e.target.value))}
aria-label="Day of the billing period"
className="h-1 flex-1 cursor-pointer accent-primary"
/>
</label>
</div>
</div>
);
}
Part of Layro — browse the full library on 21st.dev.