Detail panel
The right-hand context panel for a selected record or row. Named parts rather than a compound, so it works in a Server Component. On a wide screen it sits in AppFrame's panel slot; on narrow screens a consumer swaps it for a drawer.
Account
StatusActive
PlanTeam
JoinedMar 2024
Contact
Emailada@northwind.io
RegionEMEA
<DetailPanel> <DetailPanelHeader onClose={() => close()}> <Text className="font-medium">Ada Okafor</Text> </DetailPanelHeader> <DetailPanelBody> <DetailSection title="Account"> <DetailRow label="Status"><Badge tone="success">Active</Badge></DetailRow> <DetailRow label="Plan">Team</DetailRow> <DetailRow label="Joined">Mar 2024</DetailRow> </DetailSection> </DetailPanelBody></DetailPanel>Parts
| Prop | Type | Default | Notes |
|---|---|---|---|
DetailPanel | container | — | Full-height flex column. |
DetailPanelHeader | element | — | Title row; pass onClose for a close button. |
DetailPanelBody | element | — | Scrolling body. |
DetailSection | element | — | Labelled group; takes a title. |
DetailRow | element | — | Key/value line: label + children. |