Grid

When to useCopy Anchor Link

• An overview made of several small, different components: KPIs, a chart, a short table, an insight, each from its own data.
• Some items deserve more width than others.

When not to useCopy Anchor Link

• The items are the same kind, side by side for comparison. Use Columns.
• It's one component. Call it on its own.
• The items are long or interactive forms. Use a Stack.

How it worksCopy Anchor Link

items lists 2–9 components by catalog name. Each takes one column unless span says 2 or "full". On phones everything is one column:

{
  "columns": 2,
  "items": [
    { "component": "show_summary", "props": { "…": "…" } },
    { "component": "show_callout", "props": { "…": "…" } },
    { "span": "full", "component": "show_chart", "props": { "…": "…" } }
  ]
}

Like every layout it renders through the Renderer, may hold one more layout inside, and passes each interactive child's result up as { child, result }.

How the agent should use itCopy Anchor Link

• Order by importance, reading left to right, top to bottom. The first item is the headline.
• One wide item, at most two: a chart or a table under a row of cards.
• Keep items short. Cards, not documents.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { LayoutGrid } from "@/components/genui/layout-grid"

export const catalog = {
  show_grid: LayoutGrid,
  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