Slot

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

Syntax

1
// Prop definition
2
props.Slot({
3
    name: string,
4
    group?: string,
5
    tooltip?: string,
6
}) 
7
8
// Prop value
9
ReactNode

Prop definition

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

1
props.Slot({
2
    name: string,
3
    group?: string,
4
    tooltip?: string,
5
})

Properties

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

Example

1
import { declareComponent } from '@webflow/code-components';    
2
import { props } from '@webflow/data-types';
3
import { MyComponent } from "./MyComponent";
4
import "../styles/globals.css";
5
6
export default declareComponent(MyComponent, {
7
    name: "MyComponent",
8
    description: "A component with a Slot property",
9
    props: {
10
        content: props.Slot({
11
            name: "Content",
12
            group: "Content"
13
        })
14
    }
15
});

Prop value

The Slot prop provides child components to your React component as a single ReactNode object.

1
ReactNode

Properties

• n/a

Webflow properties panel

Example

1
import React from "react";
2
import "../styles/globals.css";
3
4
interface MyComponentProps {
5
children?: React.ReactNode;
6
}
7
8
export const MyComponent = ({ children }: MyComponentProps) => {
9
return (
10
    <div className="container">
11
    {children}
12
    </div>
13
);
14
}

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
• Consider layout and spacing for child content
• Test with various component types