Billing

Classic billing page built with shadcn/ui: a page header, a Current plan Card (price, seats, renewal, Change plan / Cancel) beside a Payment method Card with CreditCard icon and backup card, then a full-width Usage Card with a stacked monthly BarChart (automation runs vs API requests via ChartContainer) and three Progress rows, and an Invoices Table with status Badges and Download icon Buttons wrapped in Tooltips. The default starting point for a SaaS billing settings tab.

Billing page organised into shadcn/ui Tabs: Overview shows the plan and next-invoice Cards plus three sparkline metric tiles (tiny AreaCharts), Usage holds a 12-month gradient AreaChart whose metric is switched with aria-pressed legend buttons, Invoices is a Table with status Badges and download Buttons, and Payment lists default and backup card tiles with Edit / Set as default and the billing address. Good when billing has many facets but one page.

Sidebar-style billing in a four-column grid: a sticky left Card with an SVG seat progress ring, renewal date, next invoice and Upgrade / Change plan / Cancel actions; on the right a LineChart comparing the current billing period with the previous one (dashed), per-metric horizontal usage bars in a divided list, and Payment methods and Invoices Cards side by side. Built with shadcn/ui Card, Badge, Button, Table, Tooltip and the chart primitives.

Billing page with plan comparison inline: a bg-muted current-plan banner with a seat Progress bar and Change plan / Cancel Buttons, three plan Cards (Starter, Pro marked Current, Business) whose prices follow a Monthly / Annual Switch, a horizontal BarChart with one bar per metric against its limit, a payment method row with default and backup cards, and a Collapsible "Show 5 invoices" Table. Built with shadcn/ui and recharts via ChartContainer.

Metric-first billing page: a two-by-four grid of KPI Cards each showing value, limit, a tiny recharts BarChart sparkline and a trend Badge; below it Plan, Payment and Billing contacts Cards (emails with role Badges), and an Invoices Table whose rows are filtered by a date-range Select. Composed from shadcn/ui Card, Badge, Button, Select, Table and Tooltip. Suited to usage-based products where limits matter more than plan names.

Invoice-first billing page from shadcn/ui: a header with a plan summary chip row (plan, seats, renewal, card with Edit) and Change plan / Cancel Buttons, a large Invoices Table filtered by status Tabs (All / Paid / Open / Refunded) with billing periods, a dashed empty state and a totals TableFooter, and a right rail with a 12-month spend AreaChart and an Estimated next invoice breakdown (seats × price, add-ons, tax). Ideal for finance-facing billing history pages.