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
- Breadcrumb + title + actions
- tabs
- Section navigation (Overview, Activity, Settings)
- main
- Two-column: details left, sidebar right
- detail
- sidebar
- Metadata, related items
States
- loading
- Fetching
- default
- Loaded
- unauthorized
- Access lost
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.