Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA master and detail layout with a keyboard-resizable divider. Panes sit side by side in wide containers and stack with a Back button in narrow ones.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Inside the list, call useSplitView().setDetailOpen(true) when an item is chosen so narrow containers switch to the detail pane.
| Prop | Type | Default | Description |
|---|---|---|---|
detailOpen | boolean | - | Controlled: show the detail pane when the container is narrow. |
defaultDetailOpen | boolean | false | Initial state when uncontrolled. |
onDetailOpenChange | (open: boolean) => void | - | Called when the detail pane opens or closes. |
listWidth | number | 300 | Initial width of the list pane in pixels. |
minListWidth | number | 220 | Smallest width the list pane can be dragged to. |
maxListWidth | number | 520 | Largest width the list pane can be dragged to. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "List" / "Detail" | Accessible name of the pane. |
Also accept all <section> props.
A <button> that closes the detail pane. Its children default to "Back". It is hidden when both panes show.