From 26d406c05baf47c581614b4e065310f37b85fc15 Mon Sep 17 00:00:00 2001
From: Chris Villa <chrisvilla@me.com>
Date: Thu, 16 Nov 2023 12:11:15 +0000
Subject: [PATCH] docs: add component reference docs

---
 apps/docs/components/Preview/index.tsx        |  16 +-
 apps/docs/pages/docs/api-reference/_meta.json |  17 --
 .../pages/docs/api-reference/components.mdx   |   8 +-
 .../api-reference/components/drop-zone.mdx    |  59 ++++
 .../api-reference/components/field-label.mdx  | 207 ++++++++++++++
 .../docs/api-reference/components/puck.mdx    | 252 ++++++++++++++++++
 .../docs/api-reference/components/render.mdx  |  71 +++++
 apps/docs/pages/docs/api-reference/fields.mdx |   3 +
 .../pages/docs/api-reference/fields/array.mdx |   6 +-
 .../docs/api-reference/fields/custom.mdx      |  71 +++--
 apps/docs/pages/docs/getting-started.mdx      |  12 +-
 .../pages/docs/integrating-puck/_meta.json    |   2 +-
 12 files changed, 639 insertions(+), 85 deletions(-)
 delete mode 100644 apps/docs/pages/docs/api-reference/_meta.json
 create mode 100644 apps/docs/pages/docs/api-reference/components/drop-zone.mdx
 create mode 100644 apps/docs/pages/docs/api-reference/components/field-label.mdx
 create mode 100644 apps/docs/pages/docs/api-reference/components/puck.mdx
 create mode 100644 apps/docs/pages/docs/api-reference/components/render.mdx
 create mode 100644 apps/docs/pages/docs/api-reference/fields.mdx

diff --git a/apps/docs/components/Preview/index.tsx b/apps/docs/components/Preview/index.tsx
index 181a13f68e..55bdc3d8be 100644
--- a/apps/docs/components/Preview/index.tsx
+++ b/apps/docs/components/Preview/index.tsx
@@ -1,7 +1,7 @@
 export { InputOrGroup } from "@/core/components/InputOrGroup";
 
 import { ReactNode, useReducer, useState } from "react";
-import "@/core/styles/global.css";
+import "@/core/styles.css";
 import { AppProvider, defaultAppState } from "@/core/components/Puck/context";
 import { PuckAction, createReducer } from "@/core/reducer";
 import { InputOrGroup } from "@/core/components/InputOrGroup";
@@ -130,12 +130,14 @@ export const ConfigPreview = ({
               />
             ))}
           </div>
-          <div className={getClassNameConfigPreview("preview")}>
-            {componentConfig.render({
-              ...appState.data["content"][0].props,
-              puck: { renderDropZone: () => <div /> },
-            })}
-          </div>
+          {componentConfig.render && (
+            <div className={getClassNameConfigPreview("preview")}>
+              {componentConfig.render({
+                ...appState.data["content"][0].props,
+                puck: { renderDropZone: () => <div /> },
+              })}
+            </div>
+          )}
         </div>
       )}
     />
diff --git a/apps/docs/pages/docs/api-reference/_meta.json b/apps/docs/pages/docs/api-reference/_meta.json
deleted file mode 100644
index b19b727dc9..0000000000
--- a/apps/docs/pages/docs/api-reference/_meta.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "components": {
-    "title": "Components"
-  },
-  "config": {
-    "title": "Config"
-  },
-  "data": {
-    "title": "Data"
-  },
-  "fields": {
-    "title": "Fields"
-  },
-  "functions": {
-    "title": "Functions"
-  }
-}
diff --git a/apps/docs/pages/docs/api-reference/components.mdx b/apps/docs/pages/docs/api-reference/components.mdx
index ce45c8b459..c4bbd1d54e 100644
--- a/apps/docs/pages/docs/api-reference/components.mdx
+++ b/apps/docs/pages/docs/api-reference/components.mdx
@@ -1,9 +1,3 @@
 # Components
 
-## DropZone
-
-## FieldLabel
-
-## Puck
-
-## Render
+Puck provides several components to support different integration approaches.
diff --git a/apps/docs/pages/docs/api-reference/components/drop-zone.mdx b/apps/docs/pages/docs/api-reference/components/drop-zone.mdx
new file mode 100644
index 0000000000..6f2e10f665
--- /dev/null
+++ b/apps/docs/pages/docs/api-reference/components/drop-zone.mdx
@@ -0,0 +1,59 @@
+---
+title: DropZone
+---
+
+# DropZone
+
+Place droppable regions (zones) inside other components to enable nested components.
+
+```tsx {1,9} copy
+import { DropZone } from "@measured/puck";
+
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+## Props
+
+| Param           | Example           | Type   | Status   |
+| --------------- | ----------------- | ------ | -------- |
+| [`zone`](#zone) | `zone: "my-zone"` | String | Required |
+
+## Required props
+
+### `zone`
+
+Set the zone identifier for the given DropZone.
+
+Must be unique within this component, but two different components can both define DropZones with the same `zone` value.
+
+```tsx /zone="my-content"/ copy
+const config = {
+  components: {
+    Example: {
+      render: () => {
+        return (
+          <div>
+            <DropZone zone="my-content" />
+          </div>
+        );
+      },
+    },
+  },
+};
+```
+
+## Restrictions
+
+You can't drag between DropZones that don't share a parent component.
diff --git a/apps/docs/pages/docs/api-reference/components/field-label.mdx b/apps/docs/pages/docs/api-reference/components/field-label.mdx
new file mode 100644
index 0000000000..f491c8c1f2
--- /dev/null
+++ b/apps/docs/pages/docs/api-reference/components/field-label.mdx
@@ -0,0 +1,207 @@
+import { ConfigPreview } from "../../../../components/Preview";
+import { FieldLabel } from "@/core/components/InputOrGroup";
+import { Globe } from "react-feather";
+
+# FieldLabel
+
+Render a styled `label` when creating [`custom` fields](/docs/api-reference/fields/custom).
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <FieldLabel label="Title">
+              <input style={{ border: "1px solid black", padding: 4 }} />
+            </FieldLabel>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>
+
+```tsx {1,4-6} copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+const config = {
+  components: {
+    Example: {
+      fields: {
+        title: {
+          type: "custom",
+          render: MyCustomField,
+        },
+      },
+    },
+  },
+};
+```
+
+## Props
+
+| Param                     | Example                | Type             | Status   |
+| ------------------------- | ---------------------- | ---------------- | -------- |
+| [`label`](#label)         | `label: "Title"`       | String           | Required |
+| [`children`](#children)   | `children: <div />`    | ReactNode        | -        |
+| [`className`](#classname) | `className: "MyLabel"` | String           | -        |
+| [`el`](#el)               | `el: false`            | "label" \| "div" | -        |
+| [`icon`](#icon)           | `icon: <svg />`        | ReactNode        | -        |
+| [`readOnly`](#readonly)   | `readOnly: false`      | Boolean          | -        |
+
+## Required props
+
+### `label`
+
+The label string for the fields.
+
+```tsx /label="Title"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+## Optional props
+
+### `children`
+
+A node to render inside the FieldLabel's internal `<label>` element. You can also define your input element as a sibling.
+
+```tsx {5} copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `className`
+
+Define a custom class for the field label.
+
+```tsx /className="MyClass"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel className="MyClass" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `el`
+
+Specify whether to render a `label` or `div`. **Defaults to `"label"`**.
+
+```tsx /el="div"/ copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel el="div" label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+### `icon`
+
+Render an icon before the label text. Puck uses [react-feather](https://github.com/feathericons/react-feather) internally.
+
+```tsx /icon={<Globe size="16" />}/ copy
+import { FieldLabel } from "@measured/puck";
+import { Globe } from "react-feather";
+
+const CustomField = () => (
+  <FieldLabel icon={<Globe size="16" />} label="Title">
+    <input />
+  </FieldLabel>
+);
+
+// ...
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <FieldLabel label="Title" icon={<Globe size="16" />}>
+              <input style={{ border: "1px solid black" }} />
+            </FieldLabel>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>
+
+### `readOnly`
+
+Indicate to the user that this field is in a read-only state by showing a padlock icon to the right of the text.
+
+```tsx /readOnly/1 copy
+import { FieldLabel } from "@measured/puck";
+
+const CustomField = () => (
+  <FieldLabel label="Title" readOnly>
+    <input readOnly />
+  </FieldLabel>
+);
+
+// ...
+```
+
+<ConfigPreview
+  label="Example"
+  componentConfig={{
+    fields: {
+      title: {
+        type: "custom",
+        render: () => {
+          return (
+            <div style={{ maxWidth: "max-content" }}>
+              <FieldLabel label="Title" readOnly>
+                <input style={{ border: "1px solid black" }} readOnly />
+              </FieldLabel>
+            </div>
+          );
+        },
+      },
+    },
+    defaultProps: {
+      title: "Hello, world",
+    },
+  }}
+/>
diff --git a/apps/docs/pages/docs/api-reference/components/puck.mdx b/apps/docs/pages/docs/api-reference/components/puck.mdx
new file mode 100644
index 0000000000..932228ffa1
--- /dev/null
+++ b/apps/docs/pages/docs/api-reference/components/puck.mdx
@@ -0,0 +1,252 @@
+# Puck
+
+Render the Puck editor.
+
+```tsx copy
+import { Puck } from "@measured/puck";
+
+const config = {
+  components: {},
+};
+
+const initialData = {
+  content: [],
+  root: {},
+};
+
+export function Editor() {
+  return <Puck config={config} data={initialData} onPublish={() => {}} />;
+}
+```
+
+## Props
+
+| Param                                                 | Example                              | Type                                 | Status   |
+| ----------------------------------------------------- | ------------------------------------ | ------------------------------------ | -------- |
+| [`config`](#config)                                   | `config: { components: {} }`         | [Config](/docs/api-reference/config) | Required |
+| [`data`](#data)                                       | `data: { content: [], root: {} }`    | [Data](/docs/api-reference/data)     | Required |
+| [`onPublish()`](#onpublishdata)                       | `onPublish: async (data) => {}`      | Function                             | Required |
+| [`headerPath`](#headerpath)                           | `headerPath: "/my-page"`             | String                               | -        |
+| [`headerTitle`](#headertitle)                         | `headerTitle: "My Page"`             | String                               | -        |
+| [`onChange()`](#onchangedata)                         | `onChange: (data) => {}`             | Function                             | -        |
+| [`plugins`](#plugins)                                 | `plugins: [myPlugin]`                | Plugin[]                             | -        |
+| [`renderComponentList()`](#rendercomponentlistparams) | `renderComponentList: () => <div />` | Function                             | -        |
+| [`renderHeader()`](#renderheaderparams)               | `renderHeader: () => <div />`        | Function                             | -        |
+| [`renderHeaderActions()`](#renderheaderactionsparams) | `renderHeaderActions: () => <div />` | Function                             | -        |
+
+## Required props
+
+### `config`
+
+An object describing the available components, fields and more. See the [`Config` docs](/docs/api-reference/config) for a full reference.
+
+```tsx {4-17} copy
+export function Editor() {
+  return (
+    <Puck
+      config={{
+        components: {
+          HeadingBlock: {
+            fields: {
+              children: {
+                type: "text",
+              },
+            },
+            render: ({ children }) => {
+              return <h1>{children}</h1>;
+            },
+          },
+        },
+      }}
+      // ...
+    />
+  );
+}
+```
+
+### `data`
+
+The initial data to render. Cannot be changed once `<Puck>` has been mounted. See the [`Data` docs](/docs/api-reference/data) for a full reference.
+
+```tsx {4-12} copy
+export function Editor() {
+  return (
+    <Puck
+      data={{
+        content: [
+          {
+            props: { children: "Hello, world", id: "id" },
+            type: "HeadingBlock",
+          },
+        ],
+        root: {},
+      }}
+      // ...
+    />
+  );
+}
+```
+
+### `onPublish(data)`
+
+Callback that triggers when the user hits the "Publish" button. Use this to save the Puck data to your database.
+
+Receives a single [`Data`](/docs/api-reference/data) arg.
+
+```tsx {4-9} copy
+export function Editor() {
+  return (
+    <Puck
+      onPublish={async (data) => {
+        await fetch("/my-api", {
+          method: "post",
+          body: JSON.stringify({ data }),
+        });
+      }}
+      // ...
+    />
+  );
+}
+```
+
+## Optional props
+
+### `headerPath`
+
+Set a path to show after the header title
+
+```tsx {4} copy
+export function Editor() {
+  return (
+    <Puck
+      headerPath="/my-page"
+      // ...
+    />
+  );
+}
+```
+
+### `headerTitle`
+
+Set the title shown in the header
+
+```tsx {4} copy
+export function Editor() {
+  return (
+    <Puck
+      headerPath="My page"
+      // ...
+    />
+  );
+}
+```
+
+### `onChange(data)`
+
+Callback that triggers when the user makes a change.
+
+Receives a single [`Data`](/docs/api-reference/data) arg.
+
+```tsx {4-6} copy
+export function Editor() {
+  return (
+    <Puck
+      onChange={(data) => {
+        console.log("Puck data was updated", data);
+      }}
+      // ...
+    />
+  );
+}
+```
+
+### `plugins`
+
+An array of plugins to enhance Puck's behaviour. See the [Plugin API reference](/docs/api-reference/plugins).
+
+```tsx {6} copy
+import headingAnalyzer from "@measured/puck-plugin-heading-analyzer";
+
+export function Editor() {
+  return (
+    <Puck
+      plugins={[headingAnalyzer]}
+      // ...
+    />
+  );
+}
+```
+
+### `renderComponentList(params)`
+
+Render function for wrapping the component list. Receives the Plugin render params.
+
+```tsx {4-6} copy
+export function Editor() {
+  return (
+    <Puck
+      renderComponentList={({ children, appState, dispatch }) => (
+        <div>{children}</div>
+      )}
+      // ...
+    />
+  );
+}
+```
+
+### `renderHeader(params)`
+
+Render function for overriding the Puck header component.
+
+Receives the Plugin render params.
+
+```tsx {4-19} filename="renderHeader example with toggle side-bar button" copy
+export function Editor() {
+  return (
+    <Puck
+      renderHeader={({ appState, dispatch }) => (
+        <header>
+          <span>My Custom Header</span>
+
+          <button
+            onClick={() => {
+              dispatch({
+                type: "setUi",
+                ui: { leftSideBarVisible: !state.ui.leftSideBarVisible },
+              });
+            }}
+          >
+            Toggle side-bar
+          </button>
+        </header>
+      )}
+      // ...
+    />
+  );
+}
+```
+
+### `renderHeaderActions(params)`
+
+Render function for overriding the Puck header actions. Use a fragment. Receives the Plugin render params.
+
+```tsx {4-14} filename="renderHeaderActions example with save draft button" copy
+export function Editor() {
+  return (
+    <Puck
+      renderHeaderActions={({ appState }) => (
+        <>
+          <button
+            onClick={() => {
+              saveDraft(appState.data, "/my-page");
+            }}
+          >
+            Save draft
+          </button>
+        </>
+      )}
+      // ...
+    />
+  );
+}
+```
diff --git a/apps/docs/pages/docs/api-reference/components/render.mdx b/apps/docs/pages/docs/api-reference/components/render.mdx
new file mode 100644
index 0000000000..832bc56534
--- /dev/null
+++ b/apps/docs/pages/docs/api-reference/components/render.mdx
@@ -0,0 +1,71 @@
+# Render
+
+Render a [`Data`](/docs/api-reference/data) object for a given [`Config`](/docs/api-reference/config).
+
+```tsx copy showLineNumbers
+import { Render } from "@measured/puck";
+
+export function Example() {
+  return <Render config={config} data={data} />;
+}
+```
+
+## Props
+
+| Param               | Example                           | Type                                 | Status   |
+| ------------------- | --------------------------------- | ------------------------------------ | -------- |
+| [`config`](#config) | `config: { components: {} }`      | [Config](/docs/api-reference/config) | Required |
+| [`data`](#data)     | `data: { content: [], root: {} }` | [Data](/docs/api-reference/data)     | Required |
+
+## Required props
+
+### `config`
+
+An object describing the available components, fields and more. See the [`Config` docs](/docs/api-reference/config) for a full reference.
+
+```tsx {4-17} copy
+export function Example() {
+  return (
+    <Render
+      config={{
+        components: {
+          HeadingBlock: {
+            fields: {
+              children: {
+                type: "text",
+              },
+            },
+            render: ({ children }) => {
+              return <h1>{children}</h1>;
+            },
+          },
+        },
+      }}
+      // ...
+    />
+  );
+}
+```
+
+### `data`
+
+The data to render against the provided config. See the [`Data` docs](/docs/api-reference/data) for a full reference.
+
+```tsx {4-12} copy
+export function Example() {
+  return (
+    <Render
+      data={{
+        content: [
+          {
+            props: { children: "Hello, world", id: "id" },
+            type: "HeadingBlock",
+          },
+        ],
+        root: {},
+      }}
+      // ...
+    />
+  );
+}
+```
diff --git a/apps/docs/pages/docs/api-reference/fields.mdx b/apps/docs/pages/docs/api-reference/fields.mdx
new file mode 100644
index 0000000000..20c9625811
--- /dev/null
+++ b/apps/docs/pages/docs/api-reference/fields.mdx
@@ -0,0 +1,3 @@
+# Fields
+
+A field represents a user input shown in the Puck interface.
diff --git a/apps/docs/pages/docs/api-reference/fields/array.mdx b/apps/docs/pages/docs/api-reference/fields/array.mdx
index cdbf76cada..dd8c0bf8f2 100644
--- a/apps/docs/pages/docs/api-reference/fields/array.mdx
+++ b/apps/docs/pages/docs/api-reference/fields/array.mdx
@@ -1,8 +1,4 @@
-import {
-  ConfigPreview,
-  Preview,
-  InputOrGroup,
-} from "../../../../components/Preview";
+import { ConfigPreview } from "../../../../components/Preview";
 
 # Array
 
diff --git a/apps/docs/pages/docs/api-reference/fields/custom.mdx b/apps/docs/pages/docs/api-reference/fields/custom.mdx
index 57f40e01b8..2c7dad746b 100644
--- a/apps/docs/pages/docs/api-reference/fields/custom.mdx
+++ b/apps/docs/pages/docs/api-reference/fields/custom.mdx
@@ -1,5 +1,5 @@
 import { ConfigPreview } from "../../../../components/Preview";
-import { FieldLabel } from "@/core";
+import { FieldLabel } from "@/core/components/InputOrGroup";
 
 # Custom
 
@@ -13,7 +13,7 @@ Implement a field with a custom UI. Extends [Base](base).
         type: "custom",
         render: ({ name, onChange, value }) => {
           return (
-            <FieldLabel label="Test">
+            <FieldLabel label="Title">
               <input
                 defaultValue={value}
                 name={name}
@@ -34,26 +34,27 @@ Implement a field with a custom UI. Extends [Base](base).
   }}
 />
 
-```tsx {7-20} copy
+```tsx {3-12, 18-21} copy
 import { FieldLabel } from "@measured/puck";
 
+const render = ({ name, onChange, value }) => (
+  // You'll normally want to wrap with FieldLabel to get the default field label styles
+  <FieldLabel label="Title">
+    <input
+      defaultValue={value}
+      name={name}
+      onChange={(e) => onChange(e.currentTarget.value)}
+    />
+  </FieldLabel>
+);
+
 const config = {
   components: {
     Example: {
       fields: {
         title: {
           type: "custom",
-          render: ({ name, onChange, value }) => (
-            // You'll normally want to wrap with FieldLabel to get the default field label styles
-            <FieldLabel label="Test" icon>
-              <input
-                defaultValue={value}
-                name={name}
-                onChange={(e) => onChange(e.currentTarget.value)}
-                style={{ border: "1px solid hotpink", padding: 4 }}
-              />
-            </FieldLabel>
-          ),
+          render,
         },
       },
       render: ({ title }) => {
@@ -77,26 +78,14 @@ const config = {
 
 The type of the field. Must be `"custom"` for Custom fields.
 
-```tsx {8} copy
-import { FieldLabel } from "@measured/puck";
-
+```tsx {6} copy
 const config = {
   components: {
     Example: {
       fields: {
         title: {
           type: "custom",
-          render: ({ name, onChange, value }) => (
-            // You'll normally want to wrap with FieldLabel to get the default field label styles
-            <FieldLabel label="Test" icon>
-              <input
-                defaultValue={value}
-                name={name}
-                onChange={(e) => onChange(e.currentTarget.value)}
-                style={{ border: "1px solid hotpink", padding: 4 }}
-              />
-            </FieldLabel>
-          ),
+          render: CustomField,
         },
       },
       // ...
@@ -107,28 +96,28 @@ const config = {
 
 ### `render(params)`
 
-Render the custom field. It's normally best to wrap your custom input in the `<FieldLabel>` component to get the default field label styling.
+Render the custom field. It's normally best to wrap your custom input in the [`<FieldLabel>` component](/docs/api-reference/components/FieldLabel) to get the default field label styling.
 
-```tsx {11-18} copy
+```tsx {3-11,19} copy
 import { FieldLabel } from "@measured/puck";
 
+const render = ({ name, onChange, value }) => (
+  <FieldLabel label="Title">
+    <input
+      defaultValue={value}
+      name={name}
+      onChange={(e) => onChange(e.currentTarget.value)}
+    />
+  </FieldLabel>
+);
+
 const config = {
   components: {
     Example: {
       fields: {
         title: {
           type: "custom",
-          render: ({ name, onChange, value }) => (
-            // You'll normally want to wrap with FieldLabel to get the default field label styles
-            <FieldLabel label="Test" icon>
-              <input
-                defaultValue={value}
-                name={name}
-                onChange={(e) => onChange(e.currentTarget.value)}
-                style={{ border: "1px solid hotpink", padding: 4 }}
-              />
-            </FieldLabel>
-          ),
+          render,
         },
       },
       // ...
diff --git a/apps/docs/pages/docs/getting-started.mdx b/apps/docs/pages/docs/getting-started.mdx
index 9f9f2b7032..a215d2b255 100644
--- a/apps/docs/pages/docs/getting-started.mdx
+++ b/apps/docs/pages/docs/getting-started.mdx
@@ -6,22 +6,21 @@ Use this guide to set-up Puck
 
 Install the package
 
-```sh npm2yarn
+```sh npm2yarn copy
 npm i @measured/puck --save
 ```
 
 Or generate a Puck application using a [recipe](recipes)
 
-```sh
+```sh copy
 npx create-puck-app my-app
 ```
 
 ## Render the editor
 
-```jsx
-// Editor.jsx
+```jsx copy filename="Editor.jsx"
 import { Puck } from "@measured/puck";
-import "@measured/puck/dist/index.css";
+import "@measured/puck/puck.css";
 
 // Create Puck component config
 const config = {
@@ -56,8 +55,7 @@ export function Editor() {
 
 ## Render the page
 
-```jsx
-// Page.jsx
+```jsx copy filename="Page.jsx"
 import { Render } from "@measured/puck";
 
 export function Page() {
diff --git a/apps/docs/pages/docs/integrating-puck/_meta.json b/apps/docs/pages/docs/integrating-puck/_meta.json
index 06f16d6a51..405d0dac3f 100644
--- a/apps/docs/pages/docs/integrating-puck/_meta.json
+++ b/apps/docs/pages/docs/integrating-puck/_meta.json
@@ -9,7 +9,7 @@
     "title": "Dynamic Data"
   },
   "drop-zones": {
-    "title": "Drop Zones"
+    "title": "Nested Components"
   },
   "server-components": {
     "title": "Server Components"