diff --git a/apps/docs/pages/docs/api-reference/overrides/component-item.mdx b/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
index 07ef9cc98c..b91c558154 100644
--- a/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
+++ b/apps/docs/pages/docs/api-reference/overrides/component-item.mdx
@@ -8,7 +8,7 @@ Override an individual item within the component list.
```tsx copy
const overrides = {
- componentList: ({ children }) =>
{children}
,
+ componentList: ({ name }) => {name}
,
};
```
@@ -17,7 +17,12 @@ const overrides = {
| Prop | Example | Type |
| ----------------------- | ----------- | --------- |
| [`children`](#children) | `` | ReactNode |
+| [`name`](#name) | `"Button"` | ReactNode |
### `children`
The default node for the component item.
+
+### `name`
+
+THe name of the component item.
diff --git a/packages/core/components/Drawer/index.tsx b/packages/core/components/Drawer/index.tsx
index 20228a6fa7..dc0c63b687 100644
--- a/packages/core/components/Drawer/index.tsx
+++ b/packages/core/components/Drawer/index.tsx
@@ -46,7 +46,7 @@ const DrawerItem = ({
index,
}: {
name: string;
- children?: (props: { children: ReactNode }) => ReactElement;
+ children?: (props: { children: ReactNode; name: string }) => ReactElement;
id?: string;
index: number;
}) => {
@@ -57,7 +57,7 @@ const DrawerItem = ({
const CustomInner = useMemo(
() =>
children ||
- (({ children }: { children: ReactNode }) => (
+ (({ children, name }: { children: ReactNode; name: string }) => (
{children}
)),
[children]
@@ -65,7 +65,7 @@ const DrawerItem = ({
return (
-
+
{name}
diff --git a/packages/core/types/Overrides.ts b/packages/core/types/Overrides.ts
index 90bad86fa7..f621abfbae 100644
--- a/packages/core/types/Overrides.ts
+++ b/packages/core/types/Overrides.ts
@@ -44,7 +44,7 @@ export type Overrides = OverridesGeneric<{
className?: string;
}>;
components: RenderFunc;
- componentItem: RenderFunc;
+ componentItem: RenderFunc<{ children: ReactNode; name: string }>;
outline: RenderFunc;
puck: RenderFunc;
}>;