Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA detail view for a list item that opens as a dialog on desktop and a two-height bottom sheet on phones, with a summary, a definition list of facts and actions in the footer. Use this when tapping a row should show its details and actions without leaving the list, on any screen size.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it when tapping a row should show its details and actions without leaving the list, on any screen size.
Do not use it for rows that deserve their own page and URL, or for a one-field edit.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
order | { id: string; customer: string; status: string; total: string; items: string[] } | required | The record to show. |
onRefund | (id: string) => void | - | Footer action. |
children | ReactNode | required | The trigger, usually the row. |
The pattern ships with a Testing Library test (responsive-detail-panel.test.tsx) that drives it through roles and the keyboard.