diff --git a/website/versioned_docs/version-2.1.0/advanced/index.md b/website/versioned_docs/version-2.1.0/advanced/index.md
index afe7f1a57050..47fc3f8bc902 100644
--- a/website/versioned_docs/version-2.1.0/advanced/index.md
+++ b/website/versioned_docs/version-2.1.0/advanced/index.md
@@ -4,9 +4,8 @@ This section is not going to be very structured, but we will cover the following
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocCardList items={useCurrentSidebarCategory().items}/>
+<DocCardList />
 ```
 
 We will assume that you have finished the guides, and know the basics like how to configure plugins, how to write React components, etc. These sections will have plugin authors and code contributors in mind, so we may occasionally refer to [plugin APIs](../api/plugin-methods/README.md) or other architecture details. Don't panic if you don't understand everything😉
diff --git a/website/versioned_docs/version-2.1.0/guides/docs/sidebar/index.md b/website/versioned_docs/version-2.1.0/guides/docs/sidebar/index.md
index 06eb5a91b3b9..8e8817b54375 100644
--- a/website/versioned_docs/version-2.1.0/guides/docs/sidebar/index.md
+++ b/website/versioned_docs/version-2.1.0/guides/docs/sidebar/index.md
@@ -35,9 +35,8 @@ This section serves as an overview of miscellaneous features of the doc sidebar.
 
 ```mdx-code-block
 import DocCardList from '@theme/DocCardList';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-<DocCardList items={useCurrentSidebarCategory().items}/>
+<DocCardList />
 ```
 
 ## Default sidebar {#default-sidebar}
diff --git a/website/versioned_docs/version-2.1.0/guides/docs/sidebar/items.md b/website/versioned_docs/version-2.1.0/guides/docs/sidebar/items.md
index fa7af72ca9be..1e5d8ffdf9ab 100644
--- a/website/versioned_docs/version-2.1.0/guides/docs/sidebar/items.md
+++ b/website/versioned_docs/version-2.1.0/guides/docs/sidebar/items.md
@@ -8,6 +8,7 @@ slug: /sidebar/items
 ```mdx-code-block
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import BrowserWindow from '@site/src/components/BrowserWindow';
 ```
 
 We have introduced three types of item types in the example in the previous section: `doc`, `category`, and `link`, whose usages are fairly intuitive. We will formally introduce their APIs. There's also a fourth type: `autogenerated`, which we will explain in detail later.
@@ -291,18 +292,23 @@ See it in action on the [i18n introduction page](../../../i18n/i18n-introduction
 
 #### Embedding generated index in doc page {#embedding-generated-index-in-doc-page}
 
-You can embed the generated cards list in a normal doc page as well, as long as the doc is used as a category index page. To do so, you need to use the `DocCardList` component, paired with the `useCurrentSidebarCategory` hook.
+You can embed the generated cards list in a normal doc page as well with the `DocCardList` component. It will display all the sidebar items of the parent category of the current document.
 
-```jsx title="a-category-index-page.md"
+```md title="docs/sidebar/index.md"
 import DocCardList from '@theme/DocCardList';
-import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
 
-In this section, we will introduce the following concepts:
-
-<DocCardList items={useCurrentSidebarCategory().items}/>
+<DocCardList />
 ```
 
-See this in action on the [sidebar guides page](index.md).
+```mdx-code-block
+<BrowserWindow>
+
+import DocCardList from '@theme/DocCardList';
+
+<DocCardList />
+
+</BrowserWindow>
+```
 
 ### Collapsible categories {#collapsible-categories}