Columns

When to useCopy Anchor Link

• The user is comparing 2–3 options, and seeing them side by side helps: two plans, three flights.

When not to useCopy Anchor Link

• You're comparing many items across many fields. Use a Data Table.
• The items are long. Long content side by side is hard to read, so stack it instead.

How it worksCopy Anchor Link

items lists 2–6 GenUI components by catalog name. They sit in 2 or 3 columns on wide screens and stack into one column on phones. Like every layout, Columns renders through the Renderer, may hold one more layout inside, and passes each interactive child's result up as { child, result }. For mixed items or items of different widths, use a Grid.

How the agent should use itCopy Anchor Link

• Give every item the same component and the same fields, in the same order, so the columns line up.
• Keep the columns to the same kind of item, so they line up.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { LayoutColumns } from "@/components/genui/layout-columns"

export const catalog = {
  show_columns: LayoutColumns,
  show_summary: SummaryCard,
} satisfies GenUICatalog

With LangGraphCopy Anchor Link

Push it with ui.push({ name: "show_columns", props: { toolCallId, ...args } }, { message }), and render it with the Renderer.

SchemaCopy Anchor Link

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

SourceCopy Anchor Link