Search blocks

Find a block by name or category

14 Blocks

Billing Blocks

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 modelled.

Billing 1

Free

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

Billing 2

Free

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

BadgeButtonCardCheckboxSonnerTable

Billing 3

Free

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

BadgeButtonCardDialogFieldInputProgressSeparatorSonnerTable
@tanstack/react-table

Billing 4

Free

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

BadgeButtonCardProgressSeparator

Billing 5

Free

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

BadgeButtonDialogFieldInputSeparator

Billing 6

Free

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

ButtonCardFieldInputSelectSwitch

Billing 7

Pro

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

AvatarBadgeButtonDropdown MenuSeparatorTable
motion

Billing 8

Pro

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
motion

Billing 9

Pro

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

AvatarBadgeButtonChartTableTabs
motionrecharts

Billing 10

Pro

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

BadgeButtonFieldInputSelectSeparator
motion

Billing 11

Pro

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
motion

Billing 12

Pro

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

AvatarBadgeButtonChartTable
motionrecharts

Billing 13

Pro

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

AccordionAvatarBadgeButtonInputSelectSeparatorSwitchToggle Group
motion

Billing 14

Pro

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

BadgeButtonEmptyTableTabs
motion

Billing Blocks FAQ

Billing blocks also appear in the free page templates above: full pages you can install with one command.