Skip to main content
MACAW

Dashboard

Templatebeta@macaw-ds/blocks · since 0.1.0

Structure for an overview: a header, a row of three or four KPIs, then a wide and a narrow panel.

A PageHeader, a KPI row on the 12-column grid (four on col-span-3 or three on col-span-4) with tabular numerals, a delta and its sentiment, then a col-span-8 primary panel and a col-span-4 secondary panel. KPIs are typed data so every figure renders the same way. Renders the main area only.

Filled by pages

When to use

  • The landing page of a product area: billing, treasury, payouts.
  • A few headline figures followed by what needs attention.

When not to use

  • More than four KPIs: split the page or move figures into a panel.
  • A single record or a long list: use the record or list template.

Rules

Hard rules for this composition. Keep them when you adapt the copy in your repo.

  1. Render inside AppShell's main; never add a second main or a TopBar.
  2. The PageHeader title is the page's only h1; panel titles are h2.
  3. Three or four KPIs; every value is Text numeric.
  4. A delta's sentiment says whether it is good news; up is not always positive.
  5. At most one primary Button, in the PageHeader actions.