caliper uidocs
DemoSign inGet Pro

Billing overview

Pro

The current plan, payment method, next charge and recent invoices in one view.

Installs components/ui/billing-overview.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/billing-overview

Plan

Team

$288 per month · 12 seats

Renews Nov 1, 2025

Payment method

Visa ending 4242

Expires 08/27

Next invoice

$664.30

on Nov 1, 2025

Includes an estimated $376.30 of usage

Invoices
InvoiceDateAmountStatusDownload
INV-2025-0042Oct 1, 2025$612.40Paid
INV-2025-0036Sep 1, 2025$588.10Paid
INV-2025-0031Aug 1, 2025$551.75Refunded
INV-2025-0025Jul 1, 2025$497.20Paid

When to use #

Use it for

  • A billing page where users check and change what they pay.
  • A past-due payment needs a clear next step.

Skip it when

  • You only need the invoice list; use a data table.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/billing-overview

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 { BillingOverview } from "@/components/ui/billing-overview"

The worked example comes with Pro

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

Checking your licence…

API reference #

BillingOverview

component
PropTypeDefaultDescription
plan *{ name: string; price: number; interval: "month" | "year"; seats: number; renews: string; }—
paymentMethod *{ brand: string; last4: string; expires: string; }—
next *{ amount: number; date: string; note?: string | undefined; }—
invoices *readonly Invoice[]—
pastDuestring—Shows a warning with the reason when set.
currencystring"USD"
onChangePlan(() => void)—
onUpdatePayment(() => void)—
onDownload((invoice: Invoice) => void)—
onCancel(() => void)—
classNamestring—

Accessibility #

It exposes region semantics, with aria-label and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

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.