All components
Split Page
Master–detail layouts pairing a list pane with a detail content pane.
Inbox
Sent
Archive
Spam
Install
zsh — split-page
1bunx stylexblocks add split-pageUsage — Base UI
split-page.tsx
12345678910111213import { SplitPage, splitPageContentMobile } from "#components/ui/base-ui/split-page.tsx";
export function Example() { return ( // Root lays the master list pane next to Content (the detail pane); // composition per part via render. On mobile widths promote the detail // to an overlay: <SplitPage.Content style={splitPageContentMobile}> <SplitPage.Root> <nav>{/* list pane */}</nav> <SplitPage.Content>{/* detail pane */}</SplitPage.Content> </SplitPage.Root> );}