B. Application & Dashboard

Billing / Subscription Management

Subscription overview, plan changes, payment methods, invoices, usage-based billing and a cancellation flow with a retention offer.

6 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash

npx @wunderui/cli add app/billing

01Subscription overview

Uses: AppFrame · Price · Progress · Table · Badge

components/blocks/app/billing/01-subscription-overview.tsx

Uses: AppFrame · Price · Switch · Badge · Button

components/blocks/app/billing/02-change-plan.tsx

Uses: AppFrame · Dialog · PaymentMethods · TextField · Checkbox

components/blocks/app/billing/03-add-payment-method.tsx

Uses: AppFrame · Table · Badge · Button

components/blocks/app/billing/04-invoice-detail.tsx

Uses: AppFrame · Progress · Chart · StatCard · InlineNote

components/blocks/app/billing/05-usage-based.tsx

Uses: AppFrame · Dialog · RadioGroup · Badge · Button

components/blocks/app/billing/06-cancel-retention.tsx