> This page is for Code Components.

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

# Slot

> Configure a Slot property for a code component

Add a Slot property to your component so designers can insert any child component

## Syntax

```tsx
// Prop definition
props.Slot({
    name: string,
    group?: string,
    tooltip?: string,
})

// Prop value
ReactNode
```

### Prop definition

Define the Slot prop in your Webflow code component with a name. Optionally, you can add a group and tooltip text.

```tsx
props.Slot({
    name: string,
    group?: string,
    tooltip?: string,
})
```

> **Tip**
>
> You can use `props.Children` as an alias for the `props.Slot` prop type.

#### Properties

* `name`: The name for the property.
* `group`: The group for this property. (optional)
* `tooltip`: The tooltip for the property. (optional)

#### Example

```tsx title={"MyComponent.webflow.tsx"}
import { declareComponent } from '@webflow/react';
import { props } from '@webflow/data-types';
import { MyComponent } from "./MyComponent";

export default declareComponent(MyComponent, {
    name: "MyComponent",
    description: "A component with a Slot property",
    props: {
        children: props.Slot({
            name: "Content",
            group: "Content"
        })
    }
});

```

### Prop value

The Slot prop provides child components to your React component as a single `ReactNode` object. Use [`isEmptySlot`](/code-components/reference/hooks/isEmptySlot) to detect when a Slot has no children.

**`PropType.Slot`**

```tsx title="PropType.Slot"
ReactNode
```

#### Properties

* `n/a`

#### Webflow properties panel

![Slot property in the Webflow panel](/_fern-img/8b2b448950fc5ebc7ccded33ce24ac1cbe0612a150a53fbf5b51e3dcdc1fad11.webp)

#### Example

```tsx title={"MyComponent.tsx"}
import React from "react";

interface MyComponentProps {
children?: React.ReactNode;
}

export const MyComponent = ({ children }: MyComponentProps) => {
return (
    <div className="container">
    {children}
    </div>
);
}

```

## When to use

Use a Slot prop when you want designers to:

* Insert child components
* Create flexible layout containers
* Build wrapper components

## Best practices

* Handle missing children gracefully. Use [`isEmptySlot`](/code-components/reference/hooks/isEmptySlot) to detect empty slots, and render fallback content next to the slot so it stays a Designer drop target.
* Consider layout and spacing for child content
* Test with various component types