Stack

When to useCopy Anchor Link

• One answer needs 2–6 components that belong together and should arrive as one piece: a summary over a table, a picker over a confirmation, a chart over its KPIs.
• A component below should follow what the user does in a component above. That's a bind.

When not to useCopy Anchor Link

• The parts are independent answers. Call each tool on its own; the host stacks them anyway.
• The parts are parallel views the user switches between. Use Tabs.
• The parts are a procedure with an order. Use Steps.

How it worksCopy Anchor Link

items lists 2–6 components by catalog name. Each may carry a short label above it, and an id that siblings can bind to:

{
  "items": [
    { "id": "slot", "component": "pick_slot", "props": { "title": "Table for 4 at Casa Lume", "days": ["…"] } },
    { "component": "show_summary", "props": {
      "title": "Your reservation",
      "facts": [{ "label": "When", "value": { "$bind": "slot.label", "default": "Pick a time above" } }]
    } }
  ]
}

In the second scenario above, picking a time fills the reservation card at once ({ action: "select", start: "19:30" } flows into the When fact), with no call to the model. Binds only copy values; use them for pick → confirm, not to duplicate a control a component already has.

• Renders through the Renderer. Children come from the same catalog.
• One more layout inside is fine. A stack may hold columns, a grid or a split, and no deeper.
• Results. Each interactive child's result comes back as { child, result }, and the Renderer keeps the latest per child for binds.

How the agent should use itCopy Anchor Link

• Put the main answer first.
• Give an id only to children others bind to.
• Use gap: "tight" for parts of one thing (a KPI and its chart), the default for separate parts.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { LayoutStack } from "@/components/genui/layout-stack"

export const catalog = {
  show_stack: LayoutStack,
  show_kpis: KpiCard,
  show_chart: Chart,
} satisfies GenUICatalog

SchemaCopy Anchor Link

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

SourceCopy Anchor Link