Billing Usage History
A resource usage history card that plots per-period consumption as an inline SVG bar chart, no charting library required. An optional dashed reference line marks the plan limit, and any period that went over it renders in a warning color with a native tooltip showing the exact value. Built for usage dashboards and API-billing portals where people need to see consumption trends at a glance.
Docs
Installation
A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its card dependencies and any missing npm packages, and installs them straight into your project.
npx shadcn add https://staaarter.com/r/billing-usage-history.jsonPrefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/billing/billing11.tsx instead.
Usage
The file also exports billing11Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.
import { Billing11, billing11Demo } from "@/components/blocks/billing/billing11"; export default function Page() { return <Billing11 {...billing11Demo} />; }
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | "Usage history" | Heading shown above the total. |
| description | string | none | Optional one-line note under the heading. |
| unit | string | "units" | Unit label appended to the total and each bar's tooltip, for example "requests" or "GB". |
| planLimit | number | none | Reference value drawn as a dashed line across the chart; omitted if not set. |
| periods | UsagePeriod[] | none | One entry per period, rendered left to right in the order given. |
| className | string | none | Extra classes for the outer card. |
Types
interface UsagePeriod { label: string; value: number; /** Marks this period as having gone over the plan limit; renders the bar in a warning color. */ exceeded?: boolean; }
Behavior notes
- The chart is a hand-built inline SVG bar chart (a viewBox-scaled <svg> with one <rect> per period), so no charting library is involved.
- Bars for periods with exceeded set to true render in the destructive color instead of primary, and a legend line only appears below the chart when at least one period is flagged.
- Each bar's <rect> contains a native SVG <title> element with the period label, exact value, and exceeded status, so hovering shows the precise number without any client-side state or JavaScript tooltip.
- The dashed planLimit line is optional; when omitted, the chart just scales bars to their own maximum value with no reference marker.
- The total above the chart is the sum of every period's value, recomputed on each render, not a separate prop, so it always matches the periods passed in.
Frequently asked questions
More Billing Blocks
View all →Billing Invoice List
Invoice history table with status badges, formatted amounts, and a per-row download link, built with shadcn/ui and Tailwind CSS.
Billing Failed Payment Alert
High-contrast failed-payment alert with a message, a retry button, and an optional update-payment-method button, built with shadcn/ui and Tailwind CSS.
Billing Credit Balance
Compact credit balance card with a large total, an optional purchased-versus-promotional breakdown, a low-balance notice, and a top-up button.
Billing Payment Methods
A saved payment method list for React and Next.js with brand icons, a default badge, near-expiry warnings, and remove/set-default actions per row.
Billing Add Card
A card entry form for React and Next.js with auto-formatted fields, internal brand detection, and per-field validation feedback built with shadcn/ui and Tailwind CSS.
Billing Coupon Code
An inline promo code input for React and Next.js with a simulated loading state, an applied summary showing the discount amount, and an invalid-code message.