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.
Usage
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.