dashboard pattern

Settings — billing

Plan + payment method + invoice history.

When to use it

User reviews subscription, changes plan, downloads invoices.

  • Subscription state at a glance
  • One-click portal access
  • Invoices downloadable

Layout regions

  • main
  • plan-card
  • payment-card
  • invoices-card

States

  • default
  • unauthorized
  • partial

Example

<Container><Stack size="6"><Card><CardHeader><CardTitle>Plan</CardTitle><Badge>Active</Badge></CardHeader>...</Card><Card><CardHeader><CardTitle>Invoices</CardTitle></CardHeader><CardContent><Table>...</Table></CardContent></Card></Stack></Container>

The full Settings — billing pattern specifies 2 exact microcopy strings, 1 motion spec, 4 composition rules — all gated behind the full recipe. Get the full recipe.

Build the Settings — billing pattern in your project.