Steps

When to useCopy Anchor Link

• A task has 2–6 steps in order, and each step is best done with its own component: pick, then confirm; upload, then review.
• A later step should reflect what the user did in an earlier one.

When not to useCopy Anchor Link

• The steps are questions with short answers. Use a Question Stepper or a Guided Flow, which show one step at a time.
• The steps are instructions for the user to follow elsewhere. Use a Checklist.
• There is no order. Use a Stack or a Grid.

How it worksCopy Anchor Link

steps lists 2–6 steps, each with a title, an optional one-line description, and a component. Every step is visible at once, so the user sees the whole path. A step with an id can be bound by later steps:

{
  "title": "Book the service visit",
  "steps": [
    { "id": "slot", "title": "Pick a drop-off time", "component": "pick_slot", "props": { "…": "…" } },
    { "title": "Approve the booking", "component": "request_approval", "props": {
      "action": "Book the service appointment",
      "scope": [{ "label": "Drop-off", "value": { "$bind": "slot.label", "default": "Pick a time above" } }]
    } }
  ]
}

In the demo, choosing a time fills the approval's scope at once, with no call to the model. Both steps send their own result ({ child: "0", result }, then { child: "1", result }).

How the agent should use itCopy Anchor Link

• Title each step with a verb. One-line descriptions only when needed.
• Bind later steps to earlier ones with { "$bind": "<id>.<path>", "default": … }. Binds only copy values.
• The last step commits: an approval, a receipt, a confirmation.

InstallationCopy Anchor Link

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

UsageCopy Anchor Link

import { LayoutSteps } from "@/components/genui/layout-steps"

export const catalog = {
  show_steps: LayoutSteps,
  pick_slot: SlotPicker,
  request_approval: ApprovalRequest,
} satisfies GenUICatalog

SchemaCopy Anchor Link

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

SourceCopy Anchor Link