Layout

SplitLayout

A main column and a narrower one side by side: an editor and its settings, a list and its detail. They stack when the layout itself gets narrow, wherever it sits.

import { SplitLayout } from '@alea/ui';

Examples

Work and settings

The wide column holds the work; the narrow one its settings. Drag the window narrower: they stack below 760 px of their own space.

List first

narrow="start" puts a list before the detail it opens. narrowWidth sets the list's width.

Tokens

The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.

Space

--alea-space-4…

Component

--alea-split-layout-narrow…

Props

`SplitLayout` props

A main column and a narrower one side by side (an editor and its settings, a list and its detail); they stack when the space gets narrow.

Prop	Type	Default	Description
`children`required	`[ReactNode, ReactNode]`	-	Two children: the main content and a narrower column (details, settings, a summary).
`className`	`string`	-	Extra class names for the root element.
`narrow`	`"start" \| "end"`	`'end'`	Which child is the narrow column. end (default): main, then the side; start: a list or tree first, then the main.
`narrowWidth`	`number`	`340`	Width of the narrow column in px. Default 340.
`stackBelow`	`"sm" \| "md" \| "lg"`	`'md'`	Below this available width the columns stack (the layout measures its own space, not the window). Default md (760 px).
`style`	`CSSProperties`	-	Inline styles for the root element.

Specs

Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.

Variants: narrowstartend
stackBelowsmmdlg
Dark and light: Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
Styling hooks: .alea-split-layout.alea-split-layout-grid.alea-split-layout-col
Data attributes: data-narrow=startdata-stack=smdata-stack=mddata-stack=lg

The columns keep their reading order when they stack: the first child is read first.
It adds no landmarks; put a heading at the top of each column.

Do and don't

Put the work in the wide column and the settings or summary in the narrow one.
Use narrow="start" for a list that picks what the main column shows.

Don't

Don't use it for more than two columns: use Grid.
Don't rely on the window width: it measures its own space, so it works inside panels.

In Figma

Split layout with Narrow (start, end) and Stacked variants.