All components
Split Page
Master–detail layouts pairing a list pane with a detail content pane.
Inbox
Sent
Archive
Spam
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> );}Install
1npx stylexblocks add split-pageSource
components/ui/base-ui/split-page.tsx
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263import * as stylex from "@stylexjs/stylex";import { createSlotRecipeContext } from "#lib/base-ui/create-slot-recipe-context.tsx";import { defineSlotRecipe } from "#lib/recipe-props.ts";import { zIndices } from '@stylexblocks/ui/tokens/z-indices.stylex.ts'
const splitPageRoot = stylex.create({ base: { display: 'flex', flex: 1, position: 'relative', overflow: 'hidden', flexDirection: 'row', },})
const splitPageContent = stylex.create({ base: { display: 'flex', flex: 1, height: '100%', },})
const splitPageContentMobiles = stylex.create({ true: { transitionProperty: 'right', position: 'absolute', zIndex: zIndices.layer1, top: 0, bottom: 0, width: '100vw', },})
export type SplitPageMobile = keyof typeof splitPageContentMobiles
// defineSlotRecipe validates the shape at compile time. The generated mobile// map is a boolean overlay with no `false` counterpart to default to, so it// is exported as a composable style instead of a variant axis.const splitPageSlotRecipe = defineSlotRecipe({ slots: { root: { styles: splitPageRoot }, content: { styles: splitPageContent }, }, defaultVariants: {},});
/** * SplitPage — recipe and component colocated in one file; each part composes * via `render`. Root lays out the master list pane next to Content (the * detail pane). On mobile widths, promote Content to an overlay with * `<SplitPage.Content style={splitPageContentMobile}>`. */const { withProvider, withContext } = createSlotRecipeContext(splitPageSlotRecipe);
export const splitPageContentMobile = splitPageContentMobiles.true;
export const SplitPage = { Root: withProvider("div", "root", "SplitPageRoot"), Content: withContext("div", "content", "SplitPageContent"),};