Plan usage card — Björk UI

Components•Plan usage card

Plan usage card

Plan usage for the current billing cycle. Each meter projects its cycle-end total from the pace so far, warns before a limit is hit and says what happens past it.

Dependencies

Motion Lucidenext-themes

Copy below cli

npx shadcn add @bjork-ui/plan-usage-card

How to use

import { PlanUsageCard } from "@/components/bjork-ui/cards/plan-usage-card";<PlanUsageCard  planName="Pro"  price="$20"  interval="month"  cycleStart="2026-10-01T00:00:00Z"  cycleEnd="2026-11-01T00:00:00Z"  meters={[    { id: "requests", label: "API requests", used: 71_840, limit: 100_000, unit: "requests", overage: "$0.40 per 1K" },    { id: "seats", label: "Seats", used: 6, limit: 10, unit: "seats", paced: false },  ]}  status="ready" // "loading" | "error"  onRetry={refetch}  onUpgrade={() => router.push("/billing/upgrade")}  onManage={() => router.push("/billing")}/>

Pro plan

2 meters need attention

$20 per month

Oct 1 – Oct 3113 days left

API requests71,840 / 100,000 requests72%
On pace to hit the limit Oct 26
Seats6 / 10 seats60%
Storage41.6 / 50.0 GB83%
Build minutes3,120 / 3,000 min104%
Over by 120 · $0.01 per min