# Billing settings

> Plan, payment method, usage meters, invoices and a prorated plan change.

Block · Pro · https://lodeui.com/blocks/billing-settings

## When to use

- The billing page of a SaaS settings area.

## When not to use

- Public pricing: use the pricing section.

## Installation

```bash
npx shadcn@latest add @lode/billing-settings
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { BillingSettings } from "@/components/blocks/billing-settings";

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

Built from: Action button, Button, Dialog, Number ticker, Progress, Segmented control

## API reference

### BillingSettings

Plan, usage meters, payment method and invoices, with a prorated plan change dialog and inline pay for failed invoices. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move through plan options, buttons and invoices |
| ← / → | Pick a plan or billing cycle |
| Esc | Close the plan change dialog |

## Accessibility

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

## Motion

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

## Responsive behavior

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

## Performance

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

## Notes for AI

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

## Related

- [Pricing section](https://lodeui.com/blocks/pricing-section) — Three tiers with a monthly/yearly toggle whose prices roll.
- [Usage forecast](https://lodeui.com/blocks/usage-forecast) — Actual and projected usage against a budget, with the day you'll cross it.
- [Dialog](https://lodeui.com/components/dialog) — A modal or side sheet with focus trap, scroll lock and focus return.
- [Progress](https://lodeui.com/components/progress) — Linear bar, ring and segmented meter, all spring-driven.