Billing settingsPro

• Prorated plan change dialog
• Usage meters with limits
• Pay failed invoices inline

• The billing page of a SaaS settings area.

• Public pricing: use the pricing section.

Import it from @/components/blocks/billing-settings after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { BillingSettings } from "@/components/blocks/billing-settings";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <BillingSettings />
    </main>
  );
}

• Plans are a labelled radio group.
• The dialog traps focus and returns it on close.
• Usage meters are progress bars with labels and values.

• Prices roll when the cycle changes; failed invoices morph into paid.

• Plan cards stack on phones; invoice rows become two lines.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

• Compute proration on the server; the block shows the number you pass.