React Settings & Billing
The account area of a SaaS product. A section nav switches the panel between Profile, Billing, and Security. Billing is the centerpiece: a current-plan card, usage meters that color by threshold (Storage sits at 95% and turns red, the rest stay petrol), the saved payment method, and an invoice table with paid / open status chips. Profile composes the form kit; Security drops in the shared DangerZone. Click between sections — the panel swaps while the nav and header hold.
Settings
Meridian RF Systems · Team workspace
Team plan
CURRENTRenews Aug 1, 2026 · billed monthly
Usage this period
Storage is at 95% — approaching the plan limit.
Payment method
Visa •••• 4242
Expires 08 / 28
Invoice history
| Date | Invoice | Amount | Status | |
|---|---|---|---|---|
| 2026-07-01 | INV-2026-0714 | $490.00 | PAID | |
| 2026-06-01 | INV-2026-0631 | $490.00 | PAID | |
| 2026-05-01 | INV-2026-0559 | $420.00 | PAID | |
| 2026-04-01 | INV-2026-0487 | $420.00 | OPEN |
Installation
Composition
| Piece | Source | Role |
|---|---|---|
| FormSection / FormGrid | form-layout | Profile form structure |
| Field / Input | input | Profile fields |
| Switch | selection-controls | Notification toggles |
| DangerZone | app-shell | Security section |
| Button | button | Plan, payment, and form actions |
| Usage meter / invoice table | inline | Threshold-colored bars + status chips |
The active section is the only navigational state; usage meters derive their color from used / limit (≥90% red, ≥75% amber, else petrol). Swap the plan, meters, and invoices for your billing provider's data.