Two Pane Shell
Master-detail layout with a six-row project list pane and a wide detail pane showing the selected item header.
Master-detail layout with a six-row project list pane and a wide detail pane showing the selected item header.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Two Pane Shell is the master-detail frame: an icon rail on the far left, a 72-wide list pane of six selectable rows, and a wide detail pane showing the active item. The list carries real project data, Rebrand launch (prj_8h2k) active and highlighted, API v2 migration in Review, Onboarding redesign and Data export pipeline below it, each row showing the owner avatar, name, and last-updated timestamp. The detail pane opens on the active item with its ID in small tabular numerals above the title and an Edit project button in the top right.
List items are one const array with id, title, status, avatar, and active fields. The status badge switches between secondary and outline variants to separate the active row from the rest without color-coding status.
Reach for this shell wherever the product navigates between a scrollable list and a context-rich detail view: project boards, settings categories, inbox threads, or documentation pages. Wire aria-current on the list rows to your router and replace the dashed panels with the relevant detail blocks.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project list with detail pane. Other master-detail contexts:
Tip: keep the list pane width fixed and let only the detail pane scroll so the list position stays stable while the user reads.