> This page is for Developer.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Slot

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

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

![](/_fern-img/38e68d8835fcdff835e6188aac5784d53d10345646745fbb186249ac8e0ddf37.webp)

## 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.

**`FeatureCard.makeswift.ts`**

```tsx FeatureCard.makeswift.ts
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(),
  },
})
```

**`FeatureCard.tsx`**

```tsx FeatureCard.tsx
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>
  )
}
```

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