> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Slot

> Add a Slot in the Makeswift builder to visually drop in a `ReactNode`.

<Frame type="glass" caption="A slot inside of a Feature Card component">
  <img src="https://mintcdn.com/makeswift/cdz9WIAi676OTSsF/images/slot-control.png?fit=max&auto=format&n=cdz9WIAi676OTSsF&q=85&s=2bd3234432f1ffe14040ab3ad7507614" width="1024" height="640" data-path="images/slot-control.png" />
</Frame>

## Params

The Slot control currently doesn't take any parameters.

## Prop type

The Slot control passes a `ReactNode` to your component.

## Example

The following example adds a Slot control to the `media` prop of a Feature Card component.

<CodeGroup>
  ```tsx FeatureCard.makeswift.ts theme={null}
  import { Slot, TextInput, Image } from "@makeswift/runtime/controls"

  import { runtime } from "@/makeswift/runtime"

  import { FeatureCard } from "./FeatureCard"

  runtime.registerComponent(FeatureCard, {
    type: "feature-card",
    label: "Feature Card",
    props: {
      icon: Image({ label: "Icon" }),
      headline: TextInput({ label: "Headline" }),
      body: TextInput({ label: "Body" }),
      media: Slot(),
    },
  })
  ```

  ```tsx FeatureCard.tsx theme={null}
  interface Props {
    icon?: string
    headline?: string
    body?: string
    media: ReactNode
  }

  export function FeatureCard({ icon, headline, body, media }: Props) {
    return (
      <div className="rounded-lg bg-black/20 shadow space-y-4">
        <img src={icon} />
        <h1>{headline}</h1>
        <p>{body}</p>
        <div>{media}</div>
      </div>
    )
  }
  ```
</CodeGroup>

<Info>
  `.makeswift.ts` is a naming convention for organizing Makeswift registration
  code. [Learn
  more](/developer/reference/runtime/register-component#organizing-registration-code).
</Info>