14 Blocks

shadcn/ui billing blocks & components.

Billing UI built with shadcn/ui: plan summary cards, invoice tables, usage meters, payment-method managers with add-card dialogs, a proration-preview plan changer, an invoice composer wizard, and dunning queues with retry timelines. SaaS monetization screens with the fiddly states already modeled.

Current Plan Summary Card

Billing 1Free

Current-plan billing card with monthly price, renewal date, a seat usage bar, and a dialog of radio tiers for switching plans.

Alert DialogBadgeButtonCardFieldProgressRadio GroupSeparatorSonner

Invoice History Table

Billing 2Free

Invoice history table with checkbox selection, status badges, per-row download links, and a bulk download of the selected billing invoices.

BadgeButtonCardCheckboxSonnerTable

Full Billing Dashboard

Billing 3Free

Billing page combining a plan summary, storage usage bar, payment method card, and a sortable, paginated invoice table.

BadgeButtonCardDialogFieldInputProgressSeparatorSonnerTable
@tanstack/react-table

Usage Metering Card

Billing 4Free

Usage metering card with progress bars for seats, storage, API requests, and bandwidth, plus an estimated billing total for the cycle.

BadgeButtonCardProgressSeparator

Saved Payment Methods

Billing 5Free

Payment methods list of saved cards with a default badge, set-default and remove actions, and an add-card dialog.

BadgeButtonDialogFieldInputSeparator

Add Card Form

Billing 6Free

Add payment method form with name, card number, expiry, CVC, a country select, and a set-as-default switch.

ButtonCardFieldInputSelectSwitch

Invoice Ledger Console

Billing 7Pro

Revenue console with a counting outstanding balance, a past-due recovery banner, and an invoice ledger table with customer logos and pagination.

AvatarBadgeButtonDropdown MenuSeparatorTable

Plan Catalog Editor

Billing 8Pro

Billing plan catalog editor with per-seat plan cards, feature and add-on rows, and Active/Public switches that raise an unsaved-changes banner.

BadgeButtonSeparatorSwitch

Subscription Account Table

Billing 9Pro

Subscription billing accounts table filtered by tabs, with recovery stat cards, health star ratings, owner avatars, and radial readiness gauges.

AvatarBadgeButtonChartTableTabs
recharts

Invoice Composer Wizard

Billing 10Pro

Four-step invoice creation wizard with a stepper, customer and line-item forms, quantity steppers, and a running total that counts up.

BadgeButtonFieldInputSelectSeparator

Change Plan Proration

Billing 11Pro

Subscription change-plan flow pairing a radio tier picker with a live proration preview of current credit, new charge, and amount due today.

BadgeButtonRadio GroupSeparator

Dunning Recovery Queue

Billing 12Pro

Failed payment dunning queue with metric cards, trend sparks, and past-due rows that expand into a retry-attempt timeline with failure codes.

AvatarBadgeButtonChartTable
recharts

Coupon Code Manager

Billing 13Pro

Billing coupons manager listing promo codes with usage meters and status badges, each expanding to a discount, limit, and eligible-plans editor.

AccordionAvatarBadgeButtonInputSelectSeparatorSwitchToggle Group

Customer Billing Detail

Billing 14Pro

Customer billing detail view with a balance due, subscription facts, tabbed invoice panels with an empty state, and an account activity timeline.

BadgeButtonEmptyTableTabs