Studio Docs

Slot Reference: Data-Carrying Slots

Source-grounded reference for the <Slot> component. It maps to a real export in composable-studio-sdk. For the conceptual guide, see Slot data.

<Slot> wraps a slot prop’s value so the components an author drops into it can bind the wrapped data through the component_props source, with the nearest slot winning.

Do It With a Skill

wire-slot-data writes the <Slot data={...}> wiring these props describe.

curl -fsSL https://studio-documentation.contentstackapps.com/install.sh | sh

The Props

interface SlotProps {
  data?: Record<string, unknown>;   // values exposed to the slot's children as component_props
  children: React.ReactNode;        // the slot value (the ReactNode for the slot prop)
}
PropTypeRequiredDefaultDescription
dataRecord<string, unknown>No-Values exposed to the slot’s children as the component_props data source. Shallow-merged over inherited component_props. The nearest slot wins. Each top-level key becomes a bindable field for components dropped into the slot.
childrenReact.ReactNodeYes-The slot value, the ReactNode the renderer passes for the slot prop (e.g. ctaSlot).

Behavior

  • Render-time only. <Slot> lives in your component code. Nothing is stored in the composition spec.
  • Opt-in. Rendering the bare slot value ({ctaSlot}) still works. It just carries no data.
  • Shallow, nearest-wins merge. data merges over component_props inherited from further up. Nested slots stack. The deepest slot overrides shallower ones, the same model as Repeater context.
  • Editor integration. Inside the Studio canvas, <Slot> reports its data to the editor scoped to that slot, so the Data Picker’s Component Default Data source lists the slot’s keys (grouped under a Component Props node) for a component selected inside it. Outside Studio (on your live site) it reports nothing, render only.

Example

import { Slot, type SlotProps } from "@contentstack/studio-react";

// `ctaSlot` is the slot value; the CTA dropped in it can bind component_props.destination.
<Slot data={{ destination: ctaDestination }}>{ctaSlot}</Slot>;

SlotProps["children"] is a convenient type for a component’s slot-typed props:

interface HeroBannerProps {
  ctaSlot?: SlotProps["children"];
}

Common Confusions

  • <Slot> (this component) is not a slot prop type. The slot prop type (in a component schema) declares the placeholder. <Slot> is the render-time wrapper that carries data to whatever fills it. See Component schema for the prop type.
  • Keys surface under Component Default Data, not a CMS source. Children bind via the Component Default Data source in the Data Picker (a Component Props node under it).
  • A slot key with no selected child looks absent. The Component Default Data source is scoped. Select a component inside the slot to see the slot’s keys.

See Also