Skip to main content
Most components in a Prefab layout are defined up front — you know at build time that there’s a heading here, a table there. But sometimes a region of your UI needs to be filled in later, maybe by an action that fetches content or by state that arrives after the initial render. Slot reserves a named place in your layout for that dynamic content. Slot watches a state key. When that key holds a component tree (a JSON object with a type field), Slot renders it. When the key is empty, Slot renders its children as fallback content — or nothing at all.

​
Basic Usage

Pass the state key name as the first argument. Here, info holds a Card component tree in state: The layout defines where the dynamic content goes. The state (or an action that populates it) determines what appears there. In practice, the state key is often populated by a CallTool or API action with result_key — the action fetches a component tree and writes it into state, and the Slot picks it up automatically.

​
Fallback Content

Nest children inside Slot to define what shows when the state key is empty. Toggle the switch to see the transition — the ternary expression pulls the detail_card component tree from state when on, or null when off. Since the fallback is a regular component tree, you can make it as rich as you need — icons, buttons, styled containers. Once state["selected_item"] gets a component tree, the fallback disappears and the slot content takes over.

​
API Reference

Slot Parameters

​
name
str
required
State key containing the component tree to render. Can be passed as a positional argument.
​
children
list[Component]
default:"[]"
Fallback content rendered when the state key is empty or missing.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

Slot
{
  "type": "Slot",
  "children?": "[Component]",
  "let?": "object",
  "name": "string (required)",
  "cssClass?": "string"
}
For the complete protocol schema, see Slot.