dashboard pattern

Detail

Single-resource view — read-only by default, edit-in-place actions.

When to use it

Click a row in a list, read its details, take actions.

  • All metadata visible without scrolling on desktop
  • Actions discoverable in a header overflow
  • Inline editing for non-destructive fields

Layout regions

  • header
  • page-header
  • tabs
  • main
  • detail
  • sidebar

States

  • loading
  • default
  • unauthorized

Example

<DashboardLayout><Breadcrumb /><PageHeader title={project.name} actions={<DropdownMenu>...</DropdownMenu>} /><Tabs><TabsContent value="overview"><Grid cols={3}><DetailCard /><DetailSidebar /></Grid></TabsContent></Tabs></DashboardLayout>

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

Build the Detail pattern in your project.