Split

When to useCopy Anchor Link

• One component is the answer and another belongs beside it: a map and the places on it, an article and its key facts, a chart and the controls that drive it.

When not to useCopy Anchor Link

• The two parts are equals to compare. Use Columns.
• Both parts are wide (two tables, two charts). Use a Stack.
• There are more than two parts. Use a Grid or a Stack.

How it worksCopy Anchor Link

main and aside each name one component. The aside takes a third of the width ("narrow") or two fifths ("wide"), after the main or before it. On phones the main comes first and the aside follows:

{
  "main": { "component": "show_map", "props": { "…": "…" } },
  "aside": { "component": "show_summary", "props": { "…": "…" } },
  "asideWidth": "narrow"
}

Controls that drive the main component belong in the aside, with the main's props bound to their result. Like every layout it renders through the Renderer and may hold one more layout inside.

How the agent should use itCopy Anchor Link

• main holds the answer; aside holds what supports it, and must read well at a third of the width.
• Put controls in the aside and bind the main to them.

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/layout-split.json

UsageCopy Anchor Link

import { LayoutSplit } from "@/components/genui/layout-split"

export const catalog = {
  show_split: LayoutSplit,
  show_map: MapView,
  show_summary: SummaryCard,
} satisfies GenUICatalog

SchemaCopy Anchor Link

Host props: status and className. renderChild is injected by the Renderer.

SourceCopy Anchor Link