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

# Check for empty slots

> Use isEmptySlot to detect empty Slot props and render fallback content.

## `isEmptySlot(node)`

Call `isEmptySlot` from `@webflow/react` to check whether a [Slot](/code-components/reference/prop-types/slot) prop has children.

Use `isEmptySlot` when you need to:

* **Render fallback content** when a designer hasn't added children to a slot.
* **Hide a wrapper** when a slot is empty.

## Syntax

```typescript
isEmptySlot(node: React.ReactNode): boolean;
```

### Parameters

| Parameter | Type              | Description                                   |
| --------- | ----------------- | --------------------------------------------- |
| `node`    | `React.ReactNode` | The Slot prop value passed to your component. |

## Returns

`true` if the slot is empty. `false` if the slot has children.

`isEmptySlot` also returns `true` when `node` is `null` or `undefined`. That covers rendering the component outside Webflow, such as local development or tests.

## Limitations

* `isEmptySlot` reports a slot as filled if it has children, even when those children render nothing. An empty fragment or a child hidden by a visibility binding still counts as filled.
* Only [Slot](/code-components/reference/prop-types/slot) props (`props.Slot` or `props.Children`) report emptiness. [Rich Text](/code-components/reference/prop-types/rich-text) and [Text Node](/code-components/reference/prop-types/text-node) props always report as filled.

## Best practices

Render fallback content next to the slot, not instead of it. Replacing the slot removes the Designer drop target.

## Examples

### Render fallback content next to a slot

In this example, the card still mounts the slot so designers can drop content. When the slot is empty, it also shows fallback text.

```tsx title={"isEmptySlot.tsx"}
import { type ReactNode } from "react";
import { declareComponent, isEmptySlot } from "@webflow/react";
import { props } from "@webflow/data-types";

function Card({ content }: { content: ReactNode }) {
  return (
    <div>
      {content}
      {isEmptySlot(content) ? <p>Drop content here</p> : null}
    </div>
  );
}

export default declareComponent(Card, {
  name: "Card",
  props: {
    content: props.Slot({ name: "Content" }),
  },
});

```

### Wrap a component that treats missing content as empty

If an existing component renders its own placeholder when content is `null` or `undefined`, wrap it for Webflow. Pass `null` for empty slots. Default the edit prop to `true` so the slot stays mounted as a Designer drop target. Turn edit off to preview how the wrapped component handles empty content.

```tsx title={"isEmptySlot-wrap.tsx"}
import { type ReactNode } from "react";
import { declareComponent, isEmptySlot } from "@webflow/react";
import { props } from "@webflow/data-types";
import { Card } from "./Card"; // Existing component that treats missing content as empty.

function CardWebflow({ edit, content }: { edit: boolean; content: ReactNode }) {
  if (edit) {
    return <>{content}</>;
  }

  return <Card content={isEmptySlot(content) ? null : content} />;
}

export default declareComponent(CardWebflow, {
  name: "Card",
  props: {
    edit: props.Boolean({
      name: "Edit",
      defaultValue: true,
      tooltip:
        "Shows the slot so you can drop content. Turn off to preview the empty state.",
    }),
    content: props.Slot({ name: "Content" }),
  },
});

```