diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
index 66dac08291..d1b6f4a1e0 100644
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -1,12 +1,8 @@
 ---
 category: Components
+type: Navigation
 title: Affix
 cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
-demo:
-  cols: 2
-group:
-  title: Navigation
-  order: 3
 demo:
   cols: 2
 ---
@@ -26,13 +22,6 @@ Please note that Affix should not cover other content on the page, especially wh
 <code src="./demo/target.tsx">Container to scroll.</code>
 <code src="./demo/debug.tsx">debug</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/on-change.tsx">Callback</code>
-<code src="./demo/target.tsx">Container to scroll.</code>
-<code src="./demo/debug.tsx">debug</code>
-
 ## API
 
 | Property     | Description                                        | Type                        | Default      |
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index 5b9e1bd4c6..82e688e830 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 固钉
+type: 导航
 title: Affix
 cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
-demo:
-  cols: 2
-group:
-  title: 导航
-  order: 3
 demo:
   cols: 2
 ---
@@ -27,13 +23,6 @@ demo:
 <code src="./demo/target.tsx">滚动容器</code>
 <code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/on-change.tsx">固定状态改变的回调</code>
-<code src="./demo/target.tsx">滚动容器</code>
-<code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
-
 ## API
 
 | 成员         | 说明                                                                   | 类型                        | 默认值       |
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
index 5913ce062a..baa8b12322 100644
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -1,12 +1,8 @@
 ---
 category: Components
+type: Feedback
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
-demo:
-  cols: 2
-group:
-  title: Feedback
-  order: 6
 demo:
   cols: 2
 ---
@@ -33,21 +29,6 @@ Alert component for feedback.
 <code src="./demo/custom-icon.tsx">Custom Icon</code>
 <code src="./demo/action.tsx">Custom action</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/style.tsx">More types</code>
-<code src="./demo/closable.tsx">Closable</code>
-<code src="./demo/description.tsx">Description</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/close-text.tsx">Customized Close Text</code>
-<code src="./demo/banner.tsx">Banner</code>
-<code src="./demo/loop-banner.tsx">Loop Banner</code>
-<code src="./demo/smooth-closed.tsx">Smoothly Unmount</code>
-<code src="./demo/error-boundary.tsx">ErrorBoundary</code>
-<code src="./demo/custom-icon.tsx">Custom Icon</code>
-<code src="./demo/action.tsx">Custom action</code>
-
 ## API
 
 | Property    | Description                                                          | Type                    | Default                                       | Version |
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
index ee50303f2c..4756c38df4 100644
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 警告提示
+type: 反馈
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
-demo:
-  cols: 2
-group:
-  title: 反馈
-  order: 6
 demo:
   cols: 2
 ---
@@ -34,21 +30,6 @@ demo:
 <code src="./demo/custom-icon.tsx">自定义图标</code>
 <code src="./demo/action.tsx">操作</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/style.tsx">四种样式</code>
-<code src="./demo/closable.tsx">可关闭的警告提示</code>
-<code src="./demo/description.tsx">含有辅助性文字介绍</code>
-<code src="./demo/icon.tsx">图标</code>
-<code src="./demo/close-text.tsx">自定义关闭</code>
-<code src="./demo/banner.tsx">顶部公告</code>
-<code src="./demo/loop-banner.tsx">轮播的公告</code>
-<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
-<code src="./demo/error-boundary.tsx">React 错误处理</code>
-<code src="./demo/custom-icon.tsx">自定义图标</code>
-<code src="./demo/action.tsx">操作</code>
-
 ## API
 
 | 参数        | 说明                                                                 | 类型                    | 默认值                                    | 版本   |
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index d1c092dcc7..077ea9f403 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -1,11 +1,9 @@
 ---
 category: Components
+type: Other
 cols: 2
 title: Anchor
 cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
-group:
-  title: Other
-  order: 7
 ---
 
 Hyperlinks to scroll on one page.
@@ -23,15 +21,6 @@ For displaying anchor hyperlinks on page and jumping between them.
 <code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
 <code src="./demo/onChange.tsx">Listening for anchor link change</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/static.tsx">Static Anchor</code>
-<code src="./demo/onClick.tsx">Customize the onClick event</code>
-<code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
-<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
-<code src="./demo/onChange.tsx">Listening for anchor link change</code>
-
 ## API
 
 ### Anchor Props
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index 4ebc11e516..dd5e3c26e7 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -2,11 +2,9 @@
 category: Components
 subtitle: 锚点
 cols: 2
+type: 其他
 title: Anchor
 cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
-group:
-  title: 其他
-  order: 7
 ---
 
 用于跳转到页面指定位置。
@@ -24,15 +22,6 @@ group:
 <code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
 <code src="./demo/onChange.tsx">监听锚点链接改变</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/static.tsx">静态位置</code>
-<code src="./demo/onClick.tsx">自定义 onClick 事件</code>
-<code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
-<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
-<code src="./demo/onChange.tsx">监听锚点链接改变</code>
-
 ## API
 
 ### Anchor Props
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index 874430e948..ea04d954cb 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -1,11 +1,9 @@
 ---
 category: Components
+type: Data Entry
 cols: 2
 title: AutoComplete
 cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
-group:
-  title: Data Entry
-  order: 4
 ---
 
 Autocomplete function of input field.
@@ -32,18 +30,6 @@ The differences with Select are:
 <code src="./demo/form-debug.tsx">Debug in Form</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/options.tsx">Customized</code>
-<code src="./demo/custom.tsx">Customize Input Component</code>
-<code src="./demo/non-case-sensitive.tsx">Non-case-sensitive AutoComplete</code>
-<code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
-<code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/form-debug.tsx">Debug in Form</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | Property                               | Description                                                                                                                                                                                                                                                 | Type                                                                               | Default      | Version |
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index 8c2ecc16fc..1d28cc0a92 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 自动完成
+type: 数据录入
 cols: 2
 title: AutoComplete
 cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
-group:
-  title: 数据录入
-  order: 4
 ---
 
 输入框自动完成功能。
@@ -33,18 +31,6 @@ group:
 <code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/options.tsx">自定义选项</code>
-<code src="./demo/custom.tsx">自定义输入组件</code>
-<code src="./demo/non-case-sensitive.tsx">不区分大小写</code>
-<code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
-<code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | 参数                        | 说明                                                                                                                                            | 类型                                                                               | 默认值              | 版本   |
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
index f960ffa877..341a8c0f87 100644
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -1,12 +1,8 @@
 ---
 category: Components
+type: Data Display
 title: Avatar
 cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
-demo:
-  cols: 2
-group:
-  title: Data Display
-  order: 5
 demo:
   cols: 2
 ---
@@ -24,17 +20,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 <code src="./demo/responsive.tsx">Responsive Size</code>
 <code src="./demo/fallback.tsx">Fallback</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/type.tsx">Type</code>
-<code src="./demo/dynamic.tsx">Autoset Font Size</code>
-<code src="./demo/badge.tsx">With Badge</code>
-<code src="./demo/group.tsx">Avatar.Group</code>
-<code src="./demo/toggle-debug.tsx">Calculate text style when hiding</code>
-<code src="./demo/responsive.tsx">Responsive Size</code>
-<code src="./demo/fallback.tsx">Fallback</code>
-
 ## API
 
 ### Avatar
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index 5110e43d4b..f1a4203917 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 头像
+type: 数据展示
 title: Avatar
 cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
-demo:
-  cols: 2
-group:
-  title: 数据展示
-  order: 5
 demo:
   cols: 2
 ---
@@ -29,17 +25,6 @@ demo:
 <code src="./demo/responsive.tsx">响应式尺寸</code>
 <code src="./demo/fallback.tsx">图片不存在时</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/type.tsx">类型</code>
-<code src="./demo/dynamic.tsx">自动调整字符大小</code>
-<code src="./demo/badge.tsx">带徽标的头像</code>
-<code src="./demo/group.tsx">Avatar.Group</code>
-<code src="./demo/toggle-debug.tsx">隐藏情况下计算字符对齐</code>
-<code src="./demo/responsive.tsx">响应式尺寸</code>
-<code src="./demo/fallback.tsx">图片不存在时</code>
-
 ## API
 
 ### Avatar
diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md
index a61112eaa6..a3ae6bc620 100644
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -1,11 +1,8 @@
 ---
 category: Components
+type: Other
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
-demo:
-  cols: 2
-group: Other
-order: 1
 demo:
   cols: 2
 ---
@@ -22,11 +19,6 @@ demo:
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/custom.tsx">Custom style</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/custom.tsx">Custom style</code>
-
 ## API
 
 > The distance to the bottom is set to `50px` by default, which is overridable.
diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md
index b2af848b82..f6eb0b96ed 100644
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
+type: 其他
 subtitle: 回到顶部
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
-demo:
-  cols: 2
-group: 其他
 demo:
   cols: 2
 ---
@@ -22,11 +20,6 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/custom.tsx">自定义样式</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/custom.tsx">自定义样式</code>
-
 ## API
 
 > 有默认样式，距离底部 `50px`，可覆盖。
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 29104dbee5..8620e99839 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
+type: Data Display
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
-demo:
-  cols: 2
-group: Data Display
 demo:
   cols: 2
 ---
@@ -17,23 +15,6 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 
 ## Examples
 
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/no-wrapper.tsx">Standalone</code>
-<code src="./demo/overflow.tsx">Overflow Count</code>
-<code src="./demo/dot.tsx">Red badge</code>
-<code src="./demo/change.tsx">Dynamic</code>
-<code src="./demo/link.tsx">Clickable</code>
-<code src="./demo/offset.tsx">Offset</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/colorful.tsx">Colorful Badge</code>
-<code src="./demo/ribbbon.tsx">Ribbon</code>
-<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
-<code src="./demo/mix.tsx">Mixed usage</code>
-<code src="./demo/title.tsx">Title</code>
-
-## Examples
-
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/no-wrapper.tsx">Standalone</code>
 <code src="./demo/overflow.tsx">Overflow Count</code>
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 71c2a1b67a..f6feecbc29 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 徽标数
+type: 数据展示
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
-demo:
-  cols: 2
-group: 数据展示
 demo:
   cols: 2
 ---
@@ -18,23 +16,6 @@ demo:
 
 ## 代码演示
 
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/no-wrapper.tsx">独立使用</code>
-<code src="./demo/overflow.tsx">封顶数字</code>
-<code src="./demo/dot.tsx">讨嫌的小红点</code>
-<code src="./demo/change.tsx">动态</code>
-<code src="./demo/link.tsx">可点击</code>
-<code src="./demo/offset.tsx">自定义位置偏移</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/status.tsx">状态点</code>
-<code src="./demo/colorful.tsx">多彩徽标</code>
-<code src="./demo/ribbbon.tsx">缎带</code>
-<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
-<code src="./demo/mix.tsx">各种混用的情况</code>
-<code src="./demo/title.tsx">自定义标题</code>
-
-## 代码演示
-
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/no-wrapper.tsx">独立使用</code>
 <code src="./demo/overflow.tsx">封顶数字</code>
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
index d1aa59403d..1ae92d0b95 100644
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,15 +24,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 <code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
 <code src="./demo/separator-component.tsx">Configuring the Separator</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/withIcon.tsx">With an Icon</code>
-<code src="./demo/react-router.tsx">react-router V6</code>
-<code src="./demo/separator.tsx">Configuring the Separator</code>
-<code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
-<code src="./demo/separator-component.tsx">Configuring the Separator</code>
-
 ## API
 
 ### Breadcrumb
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index acaf483291..8075aaa4a2 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 面包屑
-group: 导航
+type: 导航
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,15 +25,6 @@ demo:
 <code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
 <code src="./demo/separator-component.tsx">分隔符</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/withIcon.tsx">带有图标的</code>
-<code src="./demo/react-router.tsx">react-router V6</code>
-<code src="./demo/separator.tsx">分隔符</code>
-<code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
-<code src="./demo/separator-component.tsx">分隔符</code>
-
 ## API
 
 ### Breadcrumb
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index 3e461ba2b4..d751b6f60e 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -1,12 +1,8 @@
 ---
 category: Components
+type: General
 title: Button
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
-demo:
-  cols: 2
-group:
-  title: General
-  order: 1
 demo:
   cols: 2
 ---
@@ -46,20 +42,6 @@ And 4 other properties additionally.
 <code src="./demo/legacy-group.tsx">Deprecated Button Group</code>
 <code src="./demo/chinese-chars-loading.tsx">Loading style bug</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Type</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/loading.tsx">Loading</code>
-<code src="./demo/multiple.tsx">Multiple Buttons</code>
-<code src="./demo/ghost.tsx">Ghost Button</code>
-<code src="./demo/danger.tsx">Danger Buttons</code>
-<code src="./demo/block.tsx">Block Button</code>
-<code src="./demo/legacy-group.tsx">Deprecated Button Group</code>
-<code src="./demo/chinese-chars-loading.tsx">Loading style bug</code>
-
 ## API
 
 Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index 978d4a9da4..b2535f16ea 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -1,13 +1,9 @@
 ---
 category: Components
+type: 通用
 title: Button
 subtitle: 按钮
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
-demo:
-  cols: 2
-group:
-  title: 通用
-  order: 1
 demo:
   cols: 2
 ---
@@ -49,20 +45,6 @@ demo:
 <code src="./demo/legacy-group.tsx">废弃的 Block 组</code>
 <code src="./demo/chinese-chars-loading.tsx">加载中状态 bug 还原</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">按钮类型</code>
-<code src="./demo/icon.tsx">图标按钮</code>
-<code src="./demo/size.tsx">按钮尺寸</code>
-<code src="./demo/disabled.tsx">不可用状态</code>
-<code src="./demo/loading.tsx">加载中状态</code>
-<code src="./demo/multiple.tsx">多个按钮组合</code>
-<code src="./demo/ghost.tsx">幽灵按钮</code>
-<code src="./demo/danger.tsx">危险按钮</code>
-<code src="./demo/block.tsx">Block 按钮</code>
-<code src="./demo/legacy-group.tsx">废弃的 Block 组</code>
-<code src="./demo/chinese-chars-loading.tsx">加载中状态 bug 还原</code>
-
 ## API
 
 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index d7b7b59ae3..04bed47c46 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Calendar
 cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
-demo:
-  cols: 2
 ---
 
 Container for displaying data in calendar form.
@@ -21,14 +19,6 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/select.tsx">Selectable Calendar</code>
 <code src="./demo/customize-header.tsx">Customize Header</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/notice-calendar.tsx">Notice Calendar</code>
-<code src="./demo/card.tsx">Card</code>
-<code src="./demo/select.tsx">Selectable Calendar</code>
-<code src="./demo/customize-header.tsx">Customize Header</code>
-
 ## API
 
 **Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `dayjs` correctly.
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index 52d510814a..ca64fb30bf 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 subtitle: 日历
 title: Calendar
 cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
-demo:
-  cols: 2
 ---
 
 按照日历形式展示数据的容器。
@@ -22,14 +20,6 @@ demo:
 <code src="./demo/select.tsx">选择功能</code>
 <code src="./demo/customize-header.tsx">自定义头部</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/notice-calendar.tsx">通知事项日历</code>
-<code src="./demo/card.tsx">卡片模式</code>
-<code src="./demo/select.tsx">选择功能</code>
-<code src="./demo/customize-header.tsx">自定义头部</code>
-
 ## API
 
 **注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
index 24029a28a7..3c33a973b2 100644
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Card
 cover: https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg
-demo:
-  cols: 2
 ---
 
 Simple rectangular container.
@@ -26,19 +24,6 @@ A card can be used to display content related to a single subject. The content c
 <code src="./demo/tabs.tsx">With tabs</code>
 <code src="./demo/meta.tsx">Support more content configuration</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic card</code>
-<code src="./demo/border-less.tsx">No border</code>
-<code src="./demo/simple.tsx">Simple card</code>
-<code src="./demo/flexible-content.tsx">Customized content</code>
-<code src="./demo/in-column.tsx">Card in column</code>
-<code src="./demo/loading.tsx">Loading card</code>
-<code src="./demo/grid-card.tsx">Grid card</code>
-<code src="./demo/inner.tsx">Inner card</code>
-<code src="./demo/tabs.tsx">With tabs</code>
-<code src="./demo/meta.tsx">Support more content configuration</code>
-
 ## API
 
 ```jsx
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index 8733a7556c..9884cf4558 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Card
 subtitle: 卡片
 cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
-demo:
-  cols: 2
 ---
 
 通用卡片容器。
@@ -27,19 +25,6 @@ demo:
 <code src="./demo/tabs.tsx">带页签的卡片</code>
 <code src="./demo/meta.tsx">支持更多内容配置</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">典型卡片</code>
-<code src="./demo/border-less.tsx">无边框</code>
-<code src="./demo/simple.tsx">简洁卡片</code>
-<code src="./demo/flexible-content.tsx">更灵活的内容展示</code>
-<code src="./demo/in-column.tsx">栅格卡片</code>
-<code src="./demo/loading.tsx">预加载的卡片</code>
-<code src="./demo/grid-card.tsx">网格型内嵌卡片</code>
-<code src="./demo/inner.tsx">内部卡片</code>
-<code src="./demo/tabs.tsx">带页签的卡片</code>
-<code src="./demo/meta.tsx">支持更多内容配置</code>
-
 ## API
 
 ```jsx
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 367f9708e6..a2fbdc0693 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Carousel
 cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -24,13 +22,6 @@ A carousel component. Scales with its container.
 <code src="./demo/autoplay.tsx">Scroll automatically</code>
 <code src="./demo/fade.tsx">Fade in</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/position.tsx">Position</code>
-<code src="./demo/autoplay.tsx">Scroll automatically</code>
-<code src="./demo/fade.tsx">Fade in</code>
-
 ## API
 
 | Property     | Description                                                                                    | Type                              | Default   | Version |
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index 99914c75e1..b4a6c2deb7 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Carousel
 subtitle: 走马灯
 cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -25,13 +23,6 @@ demo:
 <code src="./demo/autoplay.tsx">自动切换</code>
 <code src="./demo/fade.tsx">渐显</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/position.tsx">位置</code>
-<code src="./demo/autoplay.tsx">自动切换</code>
-<code src="./demo/fade.tsx">渐显</code>
-
 ## API
 
 | 参数         | 说明                                                                | 类型                              | 默认值    | 版本 |
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index 0229dd962d..069354b0c5 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Cascader
 cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -38,27 +36,6 @@ Cascade selection box.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/default-value.tsx">Default value</code>
-<code src="./demo/custom-trigger.tsx">Custom trigger</code>
-<code src="./demo/hover.tsx">Hover</code>
-<code src="./demo/disabled-option.tsx">Disabled option</code>
-<code src="./demo/change-on-select.tsx">Change on select</code>
-<code src="./demo/multiple.tsx">Multiple</code>
-<code src="./demo/showCheckedStrategy.tsx">ShowCheckedStrategy</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/custom-render.tsx">Custom render</code>
-<code src="./demo/search.tsx">Search</code>
-<code src="./demo/lazy.tsx">Load Options Lazily</code>
-<code src="./demo/fields-name.tsx">Custom Field Names</code>
-<code src="./demo/suffix.tsx">Custom Icons</code>
-<code src="./demo/custom-dropdown.tsx">Custom dropdown</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 07fddca720..311c388c93 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据录入
+type: 数据录入
 title: Cascader
 subtitle: 级联选择
 cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -39,27 +37,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/default-value.tsx">默认值</code>
-<code src="./demo/custom-trigger.tsx">可以自定义显示</code>
-<code src="./demo/hover.tsx">移入展开</code>
-<code src="./demo/disabled-option.tsx">禁用选项</code>
-<code src="./demo/change-on-select.tsx">选择即改变</code>
-<code src="./demo/multiple.tsx">多选</code>
-<code src="./demo/showCheckedStrategy.tsx">自定义回填方式</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/custom-render.tsx">自定义已选项</code>
-<code src="./demo/search.tsx">搜索</code>
-<code src="./demo/lazy.tsx">动态加载选项</code>
-<code src="./demo/fields-name.tsx">自定义字段名</code>
-<code src="./demo/suffix.tsx">自定义图标</code>
-<code src="./demo/custom-dropdown.tsx">扩展菜单</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index 4307aca271..99ad82c649 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Checkbox
 cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,16 +24,6 @@ Checkbox component.
 <code src="./demo/layout.tsx">Use with Grid</code>
 <code src="./demo/debug-line.tsx">Same line</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/controller.tsx">Controlled Checkbox</code>
-<code src="./demo/group.tsx">Checkbox Group</code>
-<code src="./demo/check-all.tsx">Check all</code>
-<code src="./demo/layout.tsx">Use with Grid</code>
-<code src="./demo/debug-line.tsx">Same line</code>
-
 ## API
 
 ### Props
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index 3ae2a5cc26..0365b9a79a 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 多选框
-group: 数据录入
+type: 数据录入
 title: Checkbox
 cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,16 +25,6 @@ demo:
 <code src="./demo/layout.tsx">布局</code>
 <code src="./demo/debug-line.tsx">同行布局</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/controller.tsx">受控的 Checkbox</code>
-<code src="./demo/group.tsx">Checkbox 组</code>
-<code src="./demo/check-all.tsx">全选</code>
-<code src="./demo/layout.tsx">布局</code>
-<code src="./demo/debug-line.tsx">同行布局</code>
-
 ## API
 
 ### 属性
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
index 8471c8855e..1ab51bc596 100644
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Collapse
 cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
-demo:
-  cols: 2
 ---
 
 A content area which can be collapsed and expanded.
@@ -26,18 +24,6 @@ A content area which can be collapsed and expanded.
 <code src="./demo/ghost.tsx">Ghost Collapse</code>
 <code src="./demo/collapsible.tsx">Collapsible</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Collapse</code>
-<code src="./demo/accordion.tsx">Accordion</code>
-<code src="./demo/mix.tsx">Nested panel</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/custom.tsx">Custom Panel</code>
-<code src="./demo/noarrow.tsx">No arrow</code>
-<code src="./demo/extra.tsx">Extra node</code>
-<code src="./demo/ghost.tsx">Ghost Collapse</code>
-<code src="./demo/collapsible.tsx">Collapsible</code>
-
 ## API
 
 ### Collapse
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
index 3e4e10c222..39e7811631 100644
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Collapse
 subtitle: 折叠面板
 cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
-demo:
-  cols: 2
 ---
 
 可以折叠/展开的内容区域。
@@ -27,18 +25,6 @@ demo:
 <code src="./demo/ghost.tsx">幽灵折叠面板</code>
 <code src="./demo/collapsible.tsx">可折叠触发区域</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">折叠面板</code>
-<code src="./demo/accordion.tsx">手风琴</code>
-<code src="./demo/mix.tsx">面板嵌套</code>
-<code src="./demo/borderless.tsx">简洁风格</code>
-<code src="./demo/custom.tsx">自定义面板</code>
-<code src="./demo/noarrow.tsx">隐藏箭头</code>
-<code src="./demo/extra.tsx">额外节点</code>
-<code src="./demo/ghost.tsx">幽灵折叠面板</code>
-<code src="./demo/collapsible.tsx">可折叠触发区域</code>
-
 ## API
 
 ### Collapse
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index f07622b5bd..ed9266286d 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Other
+type: Other
 title: ConfigProvider
 cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
-demo:
-  cols: 2
 ---
 
 `ConfigProvider` provides a uniform configuration support for components.
@@ -43,14 +41,6 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 <code src="./demo/theme.tsx">Global Theme</code>
 <code src="./demo/prefixCls.tsx">prefixCls</code>
 
-## Examples
-
-<code src="./demo/locale.tsx">Locale</code>
-<code src="./demo/direction.tsx">Direction</code>
-<code src="./demo/size.tsx">Component size</code>
-<code src="./demo/theme.tsx">Global Theme</code>
-<code src="./demo/prefixCls.tsx">prefixCls</code>
-
 ## API
 
 | Property                 | Description                                                                                                                                                                                            | Type                                                                                                                | Default             | Version             |
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 8ef07c41e1..aecc266e02 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 全局化配置
-group: 其他
+type: 其他
 title: ConfigProvider
 cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
-demo:
-  cols: 2
 ---
 
 为组件提供统一的全局化配置。
@@ -44,14 +42,6 @@ export default () => (
 <code src="./demo/theme.tsx">全局样式</code>
 <code src="./demo/prefixCls.tsx">前缀</code>
 
-## 代码演示
-
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/direction.tsx">方向</code>
-<code src="./demo/size.tsx">组件尺寸</code>
-<code src="./demo/theme.tsx">全局样式</code>
-<code src="./demo/prefixCls.tsx">前缀</code>
-
 ## API
 
 | 参数                     | 说明                                                                                                                                                                                                           | 类型                                                                                                                                | 默认值              | 版本                               |
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 5b0be18a28..05dbb0addd 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: DatePicker
 cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -17,28 +15,6 @@ By clicking the input box, you can select a date from a popup calendar.
 
 ## Examples
 
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/range-picker.tsx">Range Picker</code>
-<code src="./demo/switchable.tsx">Switchable picker</code>
-<code src="./demo/format.tsx">Date Format</code>
-<code src="./demo/time.tsx">Choose Time</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/disabled-date.tsx">Disabled Date & Time</code>
-<code src="./demo/select-in-range.tsx">Select range dates in 7 days</code>
-<code src="./demo/presetted-ranges.tsx">Preset Ranges</code>
-<code src="./demo/extra-footer.tsx">Extra Footer</code>
-<code src="./demo/size.tsx">Three Sizes</code>
-<code src="./demo/date-render.tsx">Customized Date Rendering</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
-<code src="./demo/placement.tsx">Basic</code>
-<code src="./demo/mode.tsx">Controlled Panels</code>
-<code src="./demo/start-end.tsx">Customized Range Picker</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## Examples
-
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/range-picker.tsx">Range Picker</code>
 <code src="./demo/switchable.tsx">Switchable picker</code>
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index a110e3abe6..5aeb5a4e82 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据录入
+type: 数据录入
 title: DatePicker
 subtitle: 日期选择框
 cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -18,28 +16,6 @@ demo:
 
 ## 代码演示
 
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/range-picker.tsx">范围选择器</code>
-<code src="./demo/switchable.tsx">切换不同的选择器</code>
-<code src="./demo/format.tsx">日期格式</code>
-<code src="./demo/time.tsx">日期时间选择</code>
-<code src="./demo/disabled.tsx">禁用</code>
-<code src="./demo/disabled-date.tsx">不可选择日期和时间</code>
-<code src="./demo/select-in-range.tsx">选择不超过七天的范围</code>
-<code src="./demo/presetted-ranges.tsx">预设范围</code>
-<code src="./demo/extra-footer.tsx">额外的页脚</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/date-render.tsx">定制日期单元格</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/bordered.tsx">无边框</code>
-<code src="./demo/placement.tsx">基本</code>
-<code src="./demo/mode.tsx">受控面板</code>
-<code src="./demo/start-end.tsx">自定义日期范围选择</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## 代码演示
-
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/range-picker.tsx">范围选择器</code>
 <code src="./demo/switchable.tsx">切换不同的选择器</code>
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index 95c3d733ef..671e3337ae 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Descriptions
 cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
-demo:
-  cols: 2
 ---
 
 Display multiple read-only fields in groups.
@@ -24,17 +22,6 @@ Commonly displayed on the details page.
 <code src="./demo/vertical-border.tsx">Vertical border</code>
 <code src="./demo/style.tsx">Customize label & wrapper style</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/border.tsx">border</code>
-<code src="./demo/text.tsx">border</code>
-<code src="./demo/size.tsx">Custom size</code>
-<code src="./demo/responsive.tsx">responsive</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/vertical-border.tsx">Vertical border</code>
-<code src="./demo/style.tsx">Customize label & wrapper style</code>
-
 ## API
 
 ### Descriptions
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index 5054731634..9cbcfb4516 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 描述列表
-group: 数据展示
+type: 数据展示
 title: Descriptions
 cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
-demo:
-  cols: 2
 ---
 
 成组展示多个只读字段。
@@ -25,17 +23,6 @@ demo:
 <code src="./demo/vertical-border.tsx">垂直带边框的</code>
 <code src="./demo/style.tsx">自定义 label & wrapper 样式</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/border.tsx">带边框的</code>
-<code src="./demo/text.tsx">复杂文本的情况</code>
-<code src="./demo/size.tsx">自定义尺寸</code>
-<code src="./demo/responsive.tsx">响应式</code>
-<code src="./demo/vertical.tsx">垂直</code>
-<code src="./demo/vertical-border.tsx">垂直带边框的</code>
-<code src="./demo/style.tsx">自定义 label & wrapper 样式</code>
-
 ## API
 
 ### Descriptions
diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md
index 1c0ee80e18..1e7e22f125 100644
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@@ -1,12 +1,8 @@
 ---
 category: Components
+type: Layout
 title: Divider
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
-demo:
-  cols: 2
-group:
-  title: Layout
-  order: 2
 demo:
   cols: 2
 ---
@@ -26,14 +22,6 @@ A divider line separates different content.
 <code src="./demo/vertical.tsx">Vertical</code>
 <code src="./demo/customize-style.tsx">Style Customization</code>
 
-## Examples
-
-<code src="./demo/horizontal.tsx">Horizontal</code>
-<code src="./demo/with-text.tsx">Divider with title</code>
-<code src="./demo/plain.tsx">Text without heading style</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/customize-style.tsx">Style Customization</code>
-
 ## API
 
 | Property          | Description                                                                                                       | Type                          | Default      | Version |
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index 057d0a6ff3..2d93ab2bd2 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -1,13 +1,9 @@
 ---
 category: Components
+type: 布局
 title: Divider
 subtitle: 分割线
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
-demo:
-  cols: 2
-group:
-  title: 布局
-  order: 2
 demo:
   cols: 2
 ---
@@ -27,14 +23,6 @@ demo:
 <code src="./demo/vertical.tsx">垂直分割线</code>
 <code src="./demo/customize-style.tsx">样式自定义</code>
 
-## 代码演示
-
-<code src="./demo/horizontal.tsx">水平分割线</code>
-<code src="./demo/with-text.tsx">带文字的分割线</code>
-<code src="./demo/plain.tsx">分割文字使用正文样式</code>
-<code src="./demo/vertical.tsx">垂直分割线</code>
-<code src="./demo/customize-style.tsx">样式自定义</code>
-
 ## API
 
 | 参数              | 说明                                                                                            | 类型                          | 默认值       | 版本  |
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index 6a1c729bdf..bec271c4f0 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -1,11 +1,9 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 subtitle:
 title: Drawer
 cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -22,20 +20,6 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 
 ## Examples
 
-<code src="./demo/basic-right.tsx">Basic</code>
-<code src="./demo/placement.tsx">Custom Placement</code>
-<code src="./demo/extra.tsx">Extra Actions</code>
-<code src="./demo/render-in-current.tsx">Render in current dom</code>
-<code src="./demo/form-in-drawer.tsx">Submit form in drawer</code>
-<code src="./demo/user-profile.tsx">Preview drawer</code>
-<code src="./demo/multi-level-drawer.tsx">Multi-level drawer</code>
-<code src="./demo/size.tsx">Presetted size</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/no-mask.tsx">No mask</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## Examples
-
 <code src="./demo/basic-right.tsx">Basic</code>
 <code src="./demo/placement.tsx">Custom Placement</code>
 <code src="./demo/extra.tsx">Extra Actions</code>
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index 3c68d14e37..5102120821 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 subtitle: 抽屉
 title: Drawer
 cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -21,20 +19,6 @@ demo:
 
 ## 代码演示
 
-<code src="./demo/basic-right.tsx">基础抽屉</code>
-<code src="./demo/placement.tsx">自定义位置</code>
-<code src="./demo/extra.tsx">额外操作</code>
-<code src="./demo/render-in-current.tsx">渲染在当前 DOM</code>
-<code src="./demo/form-in-drawer.tsx">抽屉表单</code>
-<code src="./demo/user-profile.tsx">信息预览抽屉</code>
-<code src="./demo/multi-level-drawer.tsx">多层抽屉</code>
-<code src="./demo/size.tsx">预设宽度</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/no-mask.tsx">无遮罩</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## 代码演示
-
 <code src="./demo/basic-right.tsx">基础抽屉</code>
 <code src="./demo/placement.tsx">自定义位置</code>
 <code src="./demo/extra.tsx">额外操作</code>
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 34508898ed..63331bb73f 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Dropdown
 cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -33,24 +31,6 @@ When there are more than a few options to choose from, you can wrap them in a `D
 <code src="./demo/menu-full.tsx">Menu full styles</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/arrow.tsx">Arrow</code>
-<code src="./demo/item.tsx">Other elements</code>
-<code src="./demo/arrow-center.tsx">Arrow pointing at the center</code>
-<code src="./demo/trigger.tsx">Trigger mode</code>
-<code src="./demo/event.tsx">Click event</code>
-<code src="./demo/dropdown-button.tsx">Button with dropdown menu</code>
-<code src="./demo/sub-menu.tsx">Cascading menu</code>
-<code src="./demo/overlay-open.tsx">The way of hiding menu.</code>
-<code src="./demo/context-menu.tsx">Context Menu</code>
-<code src="./demo/loading.tsx">Loading</code>
-<code src="./demo/selectable.tsx">Selectable Menu</code>
-<code src="./demo/menu-full.tsx">Menu full styles</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ### Dropdown
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 2a3d90db17..5f8925027c 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 下拉菜单
-group: 导航
+type: 导航
 title: Dropdown
 cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -37,24 +35,6 @@ demo:
 <code src="./demo/menu-full.tsx">Menu 完整样式</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/arrow.tsx">箭头</code>
-<code src="./demo/item.tsx">其他元素</code>
-<code src="./demo/arrow-center.tsx">箭头指向</code>
-<code src="./demo/trigger.tsx">触发方式</code>
-<code src="./demo/event.tsx">触发事件</code>
-<code src="./demo/dropdown-button.tsx">带下拉框的按钮</code>
-<code src="./demo/sub-menu.tsx">多级菜单</code>
-<code src="./demo/overlay-open.tsx">菜单隐藏方式</code>
-<code src="./demo/context-menu.tsx">右键菜单</code>
-<code src="./demo/loading.tsx">加载中状态</code>
-<code src="./demo/selectable.tsx">菜单可选选择</code>
-<code src="./demo/menu-full.tsx">Menu 完整样式</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 属性如下
diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md
index 4dad207e49..81f7a2a313 100644
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Empty
 cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
-demo:
-  cols: 2
 ---
 
 Empty state placeholder.
@@ -22,14 +20,6 @@ Empty state placeholder.
 <code src="./demo/config-provider.tsx">ConfigProvider</code>
 <code src="./demo/description.tsx">No description</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/simple.tsx">Chose image</code>
-<code src="./demo/customize.tsx">Customize</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/description.tsx">No description</code>
-
 ## API
 
 ```jsx
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index e51ba3fb91..174addaec4 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 空状态
-group: 数据展示
+type: 数据展示
 title: Empty
 cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
-demo:
-  cols: 2
 ---
 
 空状态时的展示占位图。
@@ -23,14 +21,6 @@ demo:
 <code src="./demo/config-provider.tsx">全局化配置</code>
 <code src="./demo/description.tsx">无描述</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/simple.tsx">选择图片</code>
-<code src="./demo/customize.tsx">自定义</code>
-<code src="./demo/config-provider.tsx">全局化配置</code>
-<code src="./demo/description.tsx">无描述</code>
-
 ## API
 
 ```jsx
diff --git a/components/float-button/index.en-US.md b/components/float-button/index.en-US.md
index 4885d0d5de..e1cc824a36 100644
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Other
+type: Other
 title: FloatButton
 cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,17 +25,6 @@ FloatButton. Available since `5.0.0`.
 <code src="./demo/group-menu.tsx">Menu mode</code>
 <code src="./demo/back-top.tsx">BackTop</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/type.tsx">Type</code>
-<code src="./demo/shape.tsx">Shape</code>
-<code src="./demo/description.tsx">Description</code>
-<code src="./demo/tooltip.tsx">FloatButton with tooltip</code>
-<code src="./demo/group.tsx">FloatButton Group</code>
-<code src="./demo/group-menu.tsx">Menu mode</code>
-<code src="./demo/back-top.tsx">BackTop</code>
-
 ## API
 
 ### common API
diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md
index 0d0a227516..098731d5cc 100644
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 其他
+type: 其他
 subtitle: 悬浮按钮
 title: FloatButton
 cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,17 +26,6 @@ demo:
 <code src="./demo/group-menu.tsx">菜单模式</code>
 <code src="./demo/back-top.tsx">回到顶部</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/type.tsx">类型</code>
-<code src="./demo/shape.tsx">形状</code>
-<code src="./demo/description.tsx">描述</code>
-<code src="./demo/tooltip.tsx">含有气泡卡片的悬浮按钮</code>
-<code src="./demo/group.tsx">浮动按钮组</code>
-<code src="./demo/group-menu.tsx">菜单模式</code>
-<code src="./demo/back-top.tsx">回到顶部</code>
-
 ## API
 
 ### 共同的 API
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 53517c45ad..d08d238ec2 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Form
 cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
-demo:
-  cols: 2
 ---
 
 High performance Form component with data scope management. Including data collection, verification, and styles.
@@ -51,43 +49,6 @@ High performance Form component with data scope management. Including data colle
 <code src="./demo/col-24-debug.tsx">Test col 24 usage</code>
 <code src="./demo/ref-item.tsx">Ref item</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/control-hooks.tsx">Form methods</code>
-<code src="./demo/control-ref.tsx">Form methods (Class component)</code>
-<code src="./demo/layout.tsx">Form Layout</code>
-<code src="./demo/disabled.tsx">Form disabled</code>
-<code src="./demo/required-mark.tsx">Required style</code>
-<code src="./demo/size.tsx">Form size</code>
-<code src="./demo/layout-can-wrap.tsx">label can wrap</code>
-<code src="./demo/warning-only.tsx">No block rule</code>
-<code src="./demo/useWatch.tsx">Watch Hooks</code>
-<code src="./demo/dynamic-form-item.tsx">Dynamic Form Item</code>
-<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</code>
-<code src="./demo/dynamic-form-items-no-style.tsx">Dynamic Form nest pure Items</code>
-<code src="./demo/dynamic-form-items-complex.tsx">Complex Dynamic Form Item</code>
-<code src="./demo/nest-messages.tsx">Nest</code>
-<code src="./demo/complex-form-control.tsx">complex form control</code>
-<code src="./demo/customized-form-controls.tsx">Customized Form Controls</code>
-<code src="./demo/global-state.tsx">Store Form Data into Upper Component</code>
-<code src="./demo/form-context.tsx">Control between forms</code>
-<code src="./demo/inline-login.tsx">Inline Login Form</code>
-<code src="./demo/normal-login.tsx">Login Form</code>
-<code src="./demo/register.tsx">Registration</code>
-<code src="./demo/advanced-search.tsx">Advanced search</code>
-<code src="./demo/form-in-modal.tsx">Form in Modal to Create</code>
-<code src="./demo/time-related-controls.tsx">Time-related Controls</code>
-<code src="./demo/without-form-create.tsx">Handle Form Data Manually</code>
-<code src="./demo/validate-static.tsx">Customized Validation</code>
-<code src="./demo/dynamic-rule.tsx">Dynamic Rules</code>
-<code src="./demo/validate-other.tsx">Other Form Controls</code>
-<code src="./demo/disabled-input-debug.tsx">Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx">Dep Debug</code>
-<code src="./demo/label-debug.tsx">label ellipsis</code>
-<code src="./demo/col-24-debug.tsx">Test col 24 usage</code>
-<code src="./demo/ref-item.tsx">Ref item</code>
-
 ## API
 
 ### Form
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 78c9e47a10..38464face1 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 表单
-group: 数据录入
+type: 数据录入
 title: Form
 cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
-demo:
-  cols: 2
 ---
 
 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
@@ -52,43 +50,6 @@ demo:
 <code src="./demo/col-24-debug.tsx">测试特殊 col 24 用法</code>
 <code src="./demo/ref-item.tsx">引用字段</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/control-hooks.tsx">表单方法调用</code>
-<code src="./demo/control-ref.tsx">表单方法调用（Class component）</code>
-<code src="./demo/layout.tsx">表单布局</code>
-<code src="./demo/disabled.tsx">表单禁用</code>
-<code src="./demo/required-mark.tsx">必选样式</code>
-<code src="./demo/size.tsx">表单尺寸</code>
-<code src="./demo/layout-can-wrap.tsx">表单标签可换行</code>
-<code src="./demo/warning-only.tsx">非阻塞校验</code>
-<code src="./demo/useWatch.tsx">字段监听 Hooks</code>
-<code src="./demo/dynamic-form-item.tsx">动态增减表单项</code>
-<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
-<code src="./demo/dynamic-form-items-no-style.tsx">动态增减嵌套纯字段</code>
-<code src="./demo/dynamic-form-items-complex.tsx">复杂的动态增减表单项</code>
-<code src="./demo/nest-messages.tsx">嵌套结构与校验信息</code>
-<code src="./demo/complex-form-control.tsx">复杂一点的控件</code>
-<code src="./demo/customized-form-controls.tsx">自定义表单控件</code>
-<code src="./demo/global-state.tsx">表单数据存储于上层组件</code>
-<code src="./demo/form-context.tsx">多表单联动</code>
-<code src="./demo/inline-login.tsx">内联登录栏</code>
-<code src="./demo/normal-login.tsx">登录框</code>
-<code src="./demo/register.tsx">注册新用户</code>
-<code src="./demo/advanced-search.tsx">高级搜索</code>
-<code src="./demo/form-in-modal.tsx">弹出层中的新建表单</code>
-<code src="./demo/time-related-controls.tsx">时间类控件</code>
-<code src="./demo/without-form-create.tsx">自行处理表单数据</code>
-<code src="./demo/validate-static.tsx">自定义校验</code>
-<code src="./demo/dynamic-rule.tsx">动态校验规则</code>
-<code src="./demo/validate-other.tsx">校验其他组件</code>
-<code src="./demo/disabled-input-debug.tsx">Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx">Dep Debug</code>
-<code src="./demo/label-debug.tsx">测试 label 省略</code>
-<code src="./demo/col-24-debug.tsx">测试特殊 col 24 用法</code>
-<code src="./demo/ref-item.tsx">引用字段</code>
-
 ## API
 
 ### Form
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 3926a48f1b..2b9af7f218 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Grid
 cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
-demo:
-  cols: 2
 ---
 
 24 Grids System.
@@ -49,21 +47,6 @@ Layout uses a 24 grid layout to define the width of each "box", but does not rig
 <code src="./demo/playground.tsx">Playground</code>
 <code src="./demo/useBreakpoint.tsx">undefined</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Grid</code>
-<code src="./demo/gutter.tsx">Grid Gutter</code>
-<code src="./demo/offset.tsx">Column offset</code>
-<code src="./demo/sort.tsx">Grid sort</code>
-<code src="./demo/flex.tsx">Typesetting</code>
-<code src="./demo/flex-align.tsx">Alignment</code>
-<code src="./demo/flex-order.tsx">Order</code>
-<code src="./demo/flex-stretch.tsx">Flex Stretch</code>
-<code src="./demo/responsive.tsx">Responsive</code>
-<code src="./demo/responsive-more.tsx">More responsive</code>
-<code src="./demo/playground.tsx">Playground</code>
-<code src="./demo/useBreakpoint.tsx">undefined</code>
-
 ## API
 
 If the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index e14a9c7e92..2db309b00c 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 栅格
-group: 布局
+type: 布局
 title: Grid
 cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
-demo:
-  cols: 2
 ---
 
 24 栅格系统。
@@ -48,21 +46,6 @@ demo:
 <code src="./demo/playground.tsx">栅格配置器</code>
 <code src="./demo/useBreakpoint.tsx">undefined</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基础栅格</code>
-<code src="./demo/gutter.tsx">区块间隔</code>
-<code src="./demo/offset.tsx">左右偏移</code>
-<code src="./demo/sort.tsx">栅格排序</code>
-<code src="./demo/flex.tsx">排版</code>
-<code src="./demo/flex-align.tsx">对齐</code>
-<code src="./demo/flex-order.tsx">排序</code>
-<code src="./demo/flex-stretch.tsx">Flex 填充</code>
-<code src="./demo/responsive.tsx">响应式布局</code>
-<code src="./demo/responsive-more.tsx">其他属性的响应式</code>
-<code src="./demo/playground.tsx">栅格配置器</code>
-<code src="./demo/useBreakpoint.tsx">undefined</code>
-
 ## API
 
 Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index a46f06f6b2..4bb07c60b6 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: General
+type: General
 title: Icon
 toc: false
 cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -31,14 +29,6 @@ ReactDOM.render(<IconDisplay />, mountNode);
 <code src="./demo/iconfont.tsx">Use iconfont.cn</code>
 <code src="./demo/scriptUrl.tsx">Multiple resources from iconfont.cn</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/two-tone.tsx">Two-tone icon and colorful icon</code>
-<code src="./demo/custom.tsx">Custom Icon</code>
-<code src="./demo/iconfont.tsx">Use iconfont.cn</code>
-<code src="./demo/scriptUrl.tsx">Multiple resources from iconfont.cn</code>
-
 ## API
 
 ### Common Icon
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index 6f587902e9..aad3c1ed8e 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 图标
-group: 通用
+type: 通用
 title: Icon
 toc: false
 cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -36,14 +34,6 @@ ReactDOM.render(<IconDisplay />, mountNode);
 <code src="./demo/iconfont.tsx">使用 iconfont.cn</code>
 <code src="./demo/scriptUrl.tsx">使用 iconfont.cn 的多个资源</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/two-tone.tsx">多色图标</code>
-<code src="./demo/custom.tsx">自定义图标</code>
-<code src="./demo/iconfont.tsx">使用 iconfont.cn</code>
-<code src="./demo/scriptUrl.tsx">使用 iconfont.cn 的多个资源</code>
-
 ## API
 
 从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 `@ant-design/icons`。
diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
index dfd1fc2aeb..b42f589db4 100644
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@@ -1,6 +1,6 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Image
 cols: 2
 cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
@@ -25,18 +25,6 @@ Previewable image.
 <code src="./demo/preview-mask.tsx">Custom preview mask</code>
 <code src="./demo/preview-group-top-progress.tsx">Top progress customization when previewing multiple images</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/fallback.tsx">Fault tolerant</code>
-<code src="./demo/placeholder.tsx">Progressive Loading</code>
-<code src="./demo/preview-group.tsx">Multiple image preview</code>
-<code src="./demo/preview-group-visible.tsx">Preview from one image</code>
-<code src="./demo/previewSrc.tsx">Custom preview image</code>
-<code src="./demo/controlled-preview.tsx">Controlled Preview</code>
-<code src="./demo/preview-mask.tsx">Custom preview mask</code>
-<code src="./demo/preview-group-top-progress.tsx">Top progress customization when previewing multiple images</code>
-
 ## API
 
 | Property      | Description                                                       | Type                                   | Default | Version                                 |
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index 50ef8bd153..e431d25a81 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 图片
-group: 数据展示
+type: 数据展示
 title: Image
 cols: 2
 cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
@@ -26,18 +26,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 <code src="./demo/preview-mask.tsx">自定义预览文本</code>
 <code src="./demo/preview-group-top-progress.tsx">多图预览时顶部进度自定义</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/fallback.tsx">容错处理</code>
-<code src="./demo/placeholder.tsx">渐进加载</code>
-<code src="./demo/preview-group.tsx">多张图片预览</code>
-<code src="./demo/preview-group-visible.tsx">相册模式</code>
-<code src="./demo/previewSrc.tsx">自定义预览图片</code>
-<code src="./demo/controlled-preview.tsx">受控的预览</code>
-<code src="./demo/preview-mask.tsx">自定义预览文本</code>
-<code src="./demo/preview-group-top-progress.tsx">多图预览时顶部进度自定义</code>
-
 ## API
 
 | 参数          | 说明                                                   | 类型                                   | 默认值 | 版本                                    |
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
index 00a0d6ef42..b8ad45bd5c 100644
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: InputNumber
 cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -32,23 +30,6 @@ When a numeric value needs to be provided.
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug-token.tsx">Override Component Style</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/size.tsx">Sizes</code>
-<code src="./demo/addon.tsx">Pre / Post tab</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/digit.tsx">High precision decimals</code>
-<code src="./demo/formatter.tsx">Formatter</code>
-<code src="./demo/keyboard.tsx">Keyboard</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/out-of-range.tsx">Out of range</code>
-<code src="./demo/prefix.tsx">Prefix</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/controls.tsx">Icon</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/debug-token.tsx">Override Component Style</code>
-
 ## API
 
 | Property         | Description                                                                                      | Type                                                                                    | Default                                                                                                                             | Version      |
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 57c6583027..5b47f3d569 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 数字输入框
-group: 数据录入
+type: 数据录入
 title: InputNumber
 cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -33,23 +31,6 @@ demo:
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug-token.tsx">覆盖组件样式</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/addon.tsx">前置/后置标签</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/digit.tsx">高精度小数</code>
-<code src="./demo/formatter.tsx">格式化展示</code>
-<code src="./demo/keyboard.tsx">键盘行为</code>
-<code src="./demo/borderless.tsx">无边框</code>
-<code src="./demo/out-of-range.tsx">超出边界</code>
-<code src="./demo/prefix.tsx">前缀</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/controls.tsx">图标按钮</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/debug-token.tsx">覆盖组件样式</code>
-
 ## API
 
 属性如下
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index ab304b41da..db924f2439 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Input
 cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -39,29 +37,6 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 <code src="./demo/align.tsx">Text Align</code>
 <code src="./demo/textarea-resize.tsx">TextArea</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic usage</code>
-<code src="./demo/size.tsx">Three sizes of Input</code>
-<code src="./demo/addon.tsx">Pre / Post tab</code>
-<code src="./demo/group.tsx">Input Group</code>
-<code src="./demo/search-input.tsx">Search box</code>
-<code src="./demo/search-input-loading.tsx">Search box with loading</code>
-<code src="./demo/textarea.tsx">TextArea</code>
-<code src="./demo/autosize-textarea.tsx">Autosizing the height to fit the content</code>
-<code src="./demo/tooltip.tsx">Format Tooltip Input</code>
-<code src="./demo/presuffix.tsx">prefix and suffix</code>
-<code src="./demo/password-input.tsx">Password box</code>
-<code src="./demo/allowClear.tsx">With clear icon</code>
-<code src="./demo/show-count.tsx">With character counting</code>
-<code src="./demo/textarea-show-count.tsx">Textarea with character counting</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/focus.tsx">Focus</code>
-<code src="./demo/borderless-debug.tsx">Borderless Debug</code>
-<code src="./demo/align.tsx">Text Align</code>
-<code src="./demo/textarea-resize.tsx">TextArea</code>
-
 ## API
 
 ### Input
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index a1419d1ed3..08e6e5ac1c 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 输入框
-group: 数据录入
+type: 数据录入
 title: Input
 cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -40,29 +38,6 @@ demo:
 <code src="./demo/align.tsx">文本对齐</code>
 <code src="./demo/textarea-resize.tsx">文本域</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/addon.tsx">前置/后置标签</code>
-<code src="./demo/group.tsx">输入框组合</code>
-<code src="./demo/search-input.tsx">搜索框</code>
-<code src="./demo/search-input-loading.tsx">搜索框 loading</code>
-<code src="./demo/textarea.tsx">文本域</code>
-<code src="./demo/autosize-textarea.tsx">适应文本高度的文本域</code>
-<code src="./demo/tooltip.tsx">输入时格式化展示</code>
-<code src="./demo/presuffix.tsx">前缀和后缀</code>
-<code src="./demo/password-input.tsx">密码框</code>
-<code src="./demo/allowClear.tsx">带移除图标</code>
-<code src="./demo/show-count.tsx">带字数提示</code>
-<code src="./demo/textarea-show-count.tsx">带字数提示的文本域</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/borderless.tsx">无边框</code>
-<code src="./demo/focus.tsx">聚焦</code>
-<code src="./demo/borderless-debug.tsx">Borderless Debug</code>
-<code src="./demo/align.tsx">文本对齐</code>
-<code src="./demo/textarea-resize.tsx">文本域</code>
-
 ## API
 
 ### Input
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 6855de3b91..25219954a5 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Layout
 cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
-demo:
-  cols: 2
 ---
 
 Handling the overall layout of a page.
@@ -70,19 +68,6 @@ Style of a navigation should conform to its level.
 <code src="./demo/fixed-sider.tsx">Fixed Sider</code>
 <code src="./demo/custom-trigger-debug.tsx">Custom trigger debug</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Structure</code>
-<code src="./demo/top.tsx">Header-Content-Footer</code>
-<code src="./demo/top-side-2.tsx">Header Sider 2</code>
-<code src="./demo/top-side.tsx">Header-Sider</code>
-<code src="./demo/side.tsx">Sider</code>
-<code src="./demo/custom-trigger.tsx">Custom trigger</code>
-<code src="./demo/responsive.tsx">Responsive</code>
-<code src="./demo/fixed.tsx">Fixed Header</code>
-<code src="./demo/fixed-sider.tsx">Fixed Sider</code>
-<code src="./demo/custom-trigger-debug.tsx">Custom trigger debug</code>
-
 ## API
 
 ```jsx
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index 8a6086cc91..d00b3cdd45 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 布局
-group: 布局
+type: 布局
 title: Layout
 cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
-demo:
-  cols: 2
 ---
 
 协助进行页面级整体布局。
@@ -71,19 +69,6 @@ demo:
 <code src="./demo/fixed-sider.tsx">固定侧边栏</code>
 <code src="./demo/custom-trigger-debug.tsx">自定义触发器 Debug</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本结构</code>
-<code src="./demo/top.tsx">上中下布局</code>
-<code src="./demo/top-side-2.tsx">顶部-侧边布局-通栏</code>
-<code src="./demo/top-side.tsx">顶部-侧边布局</code>
-<code src="./demo/side.tsx">侧边布局</code>
-<code src="./demo/custom-trigger.tsx">自定义触发器</code>
-<code src="./demo/responsive.tsx">响应式布局</code>
-<code src="./demo/fixed.tsx">固定头部</code>
-<code src="./demo/fixed-sider.tsx">固定侧边栏</code>
-<code src="./demo/custom-trigger-debug.tsx">自定义触发器 Debug</code>
-
 ## API
 
 ```jsx
diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
index 5364305054..b08ed1cb5b 100644
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: List
 cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
-demo:
-  cols: 2
 ---
 
 Simple List.
@@ -25,18 +23,6 @@ A list can be used to display content related to a single subject. The content c
 <code src="./demo/infinite-load.tsx">Scrolling loaded</code>
 <code src="./demo/virtual-list.tsx">virtual list</code>
 
-## Examples
-
-<code src="./demo/simple.tsx">Simple list</code>
-<code src="./demo/basic.tsx">Basic list</code>
-<code src="./demo/loadmore.tsx">Load more</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/grid.tsx">Grid</code>
-<code src="./demo/grid-test.tsx">Test Grid</code>
-<code src="./demo/responsive.tsx">Responsive grid list</code>
-<code src="./demo/infinite-load.tsx">Scrolling loaded</code>
-<code src="./demo/virtual-list.tsx">virtual list</code>
-
 ## API
 
 ### List
diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
index 10f179225d..8d6e8ee9cc 100644
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: List
 subtitle: 列表
 cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
-demo:
-  cols: 2
 ---
 
 通用列表。
@@ -26,18 +24,6 @@ demo:
 <code src="./demo/infinite-load.tsx">滚动加载</code>
 <code src="./demo/virtual-list.tsx">滚动加载无限长列表</code>
 
-## 代码演示
-
-<code src="./demo/simple.tsx">简单列表</code>
-<code src="./demo/basic.tsx">基础列表</code>
-<code src="./demo/loadmore.tsx">加载更多</code>
-<code src="./demo/vertical.tsx">竖排列表样式</code>
-<code src="./demo/grid.tsx">栅格列表</code>
-<code src="./demo/grid-test.tsx">测试栅格列表</code>
-<code src="./demo/responsive.tsx">响应式的栅格列表</code>
-<code src="./demo/infinite-load.tsx">滚动加载</code>
-<code src="./demo/virtual-list.tsx">滚动加载无限长列表</code>
-
 ## API
 
 另外我们封装了 [ProList](https://procomponents.ant.design/components/list)，在 `antd` List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index 3417ad7602..084c876add 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Mentions
 cover: https://gw.alipayobjects.com/zos/alicdn/0pF5j477V/Mentions.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,18 +25,6 @@ When you need to mention someone or something.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/async.tsx">Asynchronous loading</code>
-<code src="./demo/form.tsx">With Form</code>
-<code src="./demo/prefix.tsx">Customize Trigger Token</code>
-<code src="./demo/readonly.tsx">disabled or readOnly</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/autoSize.tsx">autoSize</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index e6f451f390..392ac826d5 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 提及
-group: 数据录入
+type: 数据录入
 title: Mentions
 cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,18 +26,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/async.tsx">异步加载</code>
-<code src="./demo/form.tsx">配合 Form 使用</code>
-<code src="./demo/prefix.tsx">自定义触发字符</code>
-<code src="./demo/readonly.tsx">无效或只读</code>
-<code src="./demo/placement.tsx">向上展开</code>
-<code src="./demo/autoSize.tsx">自动大小</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index e0b1aeda43..09531d48a0 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Menu
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---
 
 A versatile menu for navigation.
@@ -65,19 +63,6 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 <code src="./demo/switch-mode.tsx">Switch the menu type</code>
 <code src="./demo/style-debug.tsx">Style debug</code>
 
-## Examples
-
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
-<code src="./demo/horizontal.tsx">Top Navigation</code>
-<code src="./demo/inline.tsx">Inline menu</code>
-<code src="./demo/inline-collapsed.tsx">Collapsed inline menu</code>
-<code src="./demo/sider-current.tsx">Open current submenu only</code>
-<code src="./demo/vertical.tsx">Vertical menu</code>
-<code src="./demo/theme.tsx">Menu Themes</code>
-<code src="./demo/submenu-theme.tsx">Sub-menu theme</code>
-<code src="./demo/switch-mode.tsx">Switch the menu type</code>
-<code src="./demo/style-debug.tsx">Style debug</code>
-
 ## API
 
 ### Menu
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index da774e343f..f7fe07513a 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 导航
+type: 导航
 title: Menu
 subtitle: 导航菜单
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---
 
 为页面和功能提供导航的菜单列表。
@@ -66,19 +64,6 @@ return <Menu items={items} />;
 <code src="./demo/switch-mode.tsx">切换菜单类型</code>
 <code src="./demo/style-debug.tsx">Style debug</code>
 
-## 代码演示
-
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
-<code src="./demo/horizontal.tsx">顶部导航</code>
-<code src="./demo/inline.tsx">内嵌菜单</code>
-<code src="./demo/inline-collapsed.tsx">缩起内嵌菜单</code>
-<code src="./demo/sider-current.tsx">只展开当前父级菜单</code>
-<code src="./demo/vertical.tsx">垂直菜单</code>
-<code src="./demo/theme.tsx">主题</code>
-<code src="./demo/submenu-theme.tsx">子菜单主题</code>
-<code src="./demo/switch-mode.tsx">切换菜单类型</code>
-<code src="./demo/style-debug.tsx">Style debug</code>
-
 ## API
 
 ### Menu
diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md
index c0d03a23de..00fdfde92b 100644
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 noinstant: true
 title: Message
 cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,18 +27,6 @@ Display global messages as feedback in response to user operations.
 <code src="./demo/info.tsx">Normal prompt</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/hooks.tsx">Hooks usage (recommended)</code>
-<code src="./demo/other.tsx">Other types of message</code>
-<code src="./demo/duration.tsx">Customize duration</code>
-<code src="./demo/loading.tsx">Message with loading indicator</code>
-<code src="./demo/thenable.tsx">Promise interface</code>
-<code src="./demo/custom-style.tsx">Customized style</code>
-<code src="./demo/update.tsx">Update Message Content</code>
-<code src="./demo/info.tsx">Normal prompt</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 This components provides some static methods, with usage and arguments as following:
diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
index afb7882332..10f68f9239 100644
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 全局提示
-group: 反馈
+type: 反馈
 noinstant: true
 title: Message
 cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -30,18 +28,6 @@ demo:
 <code src="./demo/info.tsx">普通提示</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/hooks.tsx">Hooks 调用（推荐）</code>
-<code src="./demo/other.tsx">其他提示类型</code>
-<code src="./demo/duration.tsx">修改延时</code>
-<code src="./demo/loading.tsx">加载中</code>
-<code src="./demo/thenable.tsx">Promise 接口</code>
-<code src="./demo/custom-style.tsx">自定义样式</code>
-<code src="./demo/update.tsx">更新消息内容</code>
-<code src="./demo/info.tsx">普通提示</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 组件提供了一些静态方法，使用方式和参数如下：
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index e218dfe19e..1242690cee 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -1,10 +1,8 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 title: Modal
 cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -33,24 +31,6 @@ When requiring users to interact with the application, but without jumping to a
 <code src="./demo/width.tsx">To customize the width of modal</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/async.tsx">Asynchronously close</code>
-<code src="./demo/footer.tsx">Customized Footer</code>
-<code src="./demo/confirm.tsx">Confirmation modal dialog</code>
-<code src="./demo/info.tsx">Information modal dialog</code>
-<code src="./demo/locale.tsx">Internationalization</code>
-<code src="./demo/manual.tsx">Manual to update destroy</code>
-<code src="./demo/position.tsx">To customize the position of modal</code>
-<code src="./demo/confirm-router.tsx">destroy confirmation modal dialog</code>
-<code src="./demo/dark.tsx">Dark Bg</code>
-<code src="./demo/button-props.tsx">Customize footer buttons props</code>
-<code src="./demo/hooks.tsx">Use hooks to get context</code>
-<code src="./demo/modal-render.tsx">Custom modal content render</code>
-<code src="./demo/width.tsx">To customize the width of modal</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | Property               | Description                                                                                                | Type                                                   | Default                 | Version |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index e3e60601e4..5353fe5ea1 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 subtitle: 对话框
 title: Modal
 cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -36,24 +34,6 @@ demo:
 <code src="./demo/width.tsx">自定义模态的宽度</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/async.tsx">异步关闭</code>
-<code src="./demo/footer.tsx">自定义页脚</code>
-<code src="./demo/confirm.tsx">确认对话框</code>
-<code src="./demo/info.tsx">信息提示</code>
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/manual.tsx">手动更新和移除</code>
-<code src="./demo/position.tsx">自定义位置</code>
-<code src="./demo/confirm-router.tsx">销毁确认对话框</code>
-<code src="./demo/dark.tsx">暗背景</code>
-<code src="./demo/button-props.tsx">自定义页脚按钮属性</code>
-<code src="./demo/hooks.tsx">使用 hooks 获得上下文</code>
-<code src="./demo/modal-render.tsx">自定义渲染对话框</code>
-<code src="./demo/width.tsx">自定义模态的宽度</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | 参数                   | 说明                                                              | 类型                                                   | 默认值               | 版本  |
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
index 200f3f439d..f8e22075e9 100644
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 noinstant: true
 title: Notification
 cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -33,19 +31,6 @@ To display a notification message at any of the four corners of the viewport. Ty
 <code src="./demo/update.tsx">Update Message Content</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/hooks.tsx">Hooks usage (recommended)</code>
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/duration.tsx">Duration after which the notification box is closed</code>
-<code src="./demo/with-icon.tsx">Notification with icon</code>
-<code src="./demo/with-btn.tsx">Custom close button</code>
-<code src="./demo/custom-icon.tsx">Customized Icon</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/custom-style.tsx">Customized style</code>
-<code src="./demo/update.tsx">Update Message Content</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 - `notification.success(config)`
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index 0aef0eb7b6..85c8ef5801 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -1,12 +1,10 @@
 ---
 category: Components
-group: 反馈
+type: 反馈
 noinstant: true
 title: Notification
 subtitle: 通知提醒框
 cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -34,19 +32,6 @@ demo:
 <code src="./demo/update.tsx">更新消息内容</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/hooks.tsx">Hooks 调用（推荐）</code>
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/duration.tsx">自动关闭的延时</code>
-<code src="./demo/with-icon.tsx">带有图标的通知提醒框</code>
-<code src="./demo/with-btn.tsx">自定义按钮</code>
-<code src="./demo/custom-icon.tsx">自定义图标</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/custom-style.tsx">自定义样式</code>
-<code src="./demo/update.tsx">更新消息内容</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 - `notification.success(config)`
diff --git a/components/overview/index.en-US.md b/components/overview/index.en-US.md
index f4ab40dc0a..fd58f0041f 100644
--- a/components/overview/index.en-US.md
+++ b/components/overview/index.en-US.md
@@ -1,8 +1,7 @@
 ---
 category: Components
 title: Components Overview
+type: Overview
 ---
 
 `antd` provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great [Third-Party Libraries](/docs/react/recommendation) additionally.
-
-<ComponentOverview></ComponentOverview>
diff --git a/components/overview/index.zh-CN.md b/components/overview/index.zh-CN.md
index 5c9267da39..3a790c387f 100644
--- a/components/overview/index.zh-CN.md
+++ b/components/overview/index.zh-CN.md
@@ -1,8 +1,7 @@
 ---
 category: Components
 title: 组件总览
+type: 组件总览
 ---
 
 `antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。
-
-<ComponentOverview></ComponentOverview>
diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md
index 46a14c10b1..e80396b255 100644
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Pagination
 cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
-demo:
-  cols: 2
 ---
 
 A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
@@ -27,19 +25,6 @@ A long list can be divided into several pages using `Pagination`, and only one p
 <code src="./demo/all.tsx">Show All</code>
 <code src="./demo/itemRender.tsx">Prev and next</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/more.tsx">More</code>
-<code src="./demo/changer.tsx">Changer</code>
-<code src="./demo/jump.tsx">Jumper</code>
-<code src="./demo/mini.tsx">Mini size</code>
-<code src="./demo/simple.tsx">Simple mode</code>
-<code src="./demo/controlled.tsx">Controlled</code>
-<code src="./demo/total.tsx">Total number</code>
-<code src="./demo/all.tsx">Show All</code>
-<code src="./demo/itemRender.tsx">Prev and next</code>
-
 ## API
 
 ```jsx
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
index 82a4f2beaf..d4df8a622b 100644
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 分页
-group: 导航
+type: 导航
 title: Pagination
 cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
-demo:
-  cols: 2
 ---
 
 采用分页的形式分隔长列表，每次只加载一个页面。
@@ -28,19 +26,6 @@ demo:
 <code src="./demo/all.tsx">全部展示</code>
 <code src="./demo/itemRender.tsx">上一步和下一步</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/more.tsx">更多</code>
-<code src="./demo/changer.tsx">改变</code>
-<code src="./demo/jump.tsx">跳转</code>
-<code src="./demo/mini.tsx">迷你</code>
-<code src="./demo/simple.tsx">简洁</code>
-<code src="./demo/controlled.tsx">受控</code>
-<code src="./demo/total.tsx">总数</code>
-<code src="./demo/all.tsx">全部展示</code>
-<code src="./demo/itemRender.tsx">上一步和下一步</code>
-
 ## API
 
 ```jsx
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
index 7f36ed1408..f7c6648a00 100644
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Popconfirm
 cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,17 +26,6 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 <code src="./demo/promise.tsx">Asynchronously close on Promise</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/locale.tsx">Locale text</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/dynamic-trigger.tsx">Conditional trigger</code>
-<code src="./demo/icon.tsx">Customize icon</code>
-<code src="./demo/async.tsx">Asynchronously close</code>
-<code src="./demo/promise.tsx">Asynchronously close on Promise</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | Param             | Description                                         | Type                                   | Default value            | Version |
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index 48e2571d33..918e24d5a9 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 气泡确认框
-group: 反馈
+type: 反馈
 title: Popconfirm
 cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,17 +27,6 @@ demo:
 <code src="./demo/promise.tsx">基于 Promise 的异步关闭</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/dynamic-trigger.tsx">条件触发</code>
-<code src="./demo/icon.tsx">自定义 Icon 图标</code>
-<code src="./demo/async.tsx">异步关闭</code>
-<code src="./demo/promise.tsx">基于 Promise 的异步关闭</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | 参数              | 说明                                   | 类型                                   | 默认值                   | 版本   |
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
index ae35a5154e..84f75d8a1e 100644
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Popover
 cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,16 +25,6 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 <code src="./demo/hover-with-click.tsx">Hover with click popover</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/triggerType.tsx">Three ways to trigger</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/control.tsx">Controlling the close of the dialog</code>
-<code src="./demo/arrow-point-at-center.tsx">Arrow pointing</code>
-<code src="./demo/hover-with-click.tsx">Hover with click popover</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | Param   | Description         | Type                         | Default value | Version |
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index 311aaddb5c..6c2b0310a7 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 气泡卡片
-group: 数据展示
+type: 数据展示
 title: Popover
 cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,16 +26,6 @@ demo:
 <code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/triggerType.tsx">三种触发方式</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/control.tsx">从浮层内关闭</code>
-<code src="./demo/arrow-point-at-center.tsx">箭头指向</code>
-<code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | 参数    | 说明     | 类型                         | 默认值 | 版本 |
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index 2b0db92e42..0db4ebf9a4 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Progress
 cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -33,21 +31,6 @@ If it will take a long time to complete an operation, you can use `Progress` to
 <code src="./demo/gradient-line.tsx">Custom line gradient</code>
 <code src="./demo/steps.tsx">Progress bar with steps</code>
 
-## Examples
-
-<code src="./demo/line.tsx">Progress bar</code>
-<code src="./demo/circle.tsx">Circular progress bar</code>
-<code src="./demo/line-mini.tsx">Mini size progress bar</code>
-<code src="./demo/circle-mini.tsx">Mini size circular progress bar</code>
-<code src="./demo/circle-dynamic.tsx">Dynamic circular progress bar</code>
-<code src="./demo/dynamic.tsx">Dynamic</code>
-<code src="./demo/format.tsx">Custom text format</code>
-<code src="./demo/dashboard.tsx">Dashboard</code>
-<code src="./demo/segment.tsx">Progress bar with success segment</code>
-<code src="./demo/linecap.tsx">Stroke Linecap</code>
-<code src="./demo/gradient-line.tsx">Custom line gradient</code>
-<code src="./demo/steps.tsx">Progress bar with steps</code>
-
 ## API
 
 Properties that shared by all types.
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 944e87b69d..8a25176588 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 进度条
-group: 反馈
+type: 反馈
 title: Progress
 cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -34,21 +32,6 @@ demo:
 <code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
 <code src="./demo/steps.tsx">步骤进度条</code>
 
-## 代码演示
-
-<code src="./demo/line.tsx">进度条</code>
-<code src="./demo/circle.tsx">进度圈</code>
-<code src="./demo/line-mini.tsx">小型进度条</code>
-<code src="./demo/circle-mini.tsx">小型进度圈</code>
-<code src="./demo/circle-dynamic.tsx">进度圈动态展示</code>
-<code src="./demo/dynamic.tsx">动态展示</code>
-<code src="./demo/format.tsx">自定义文字格式</code>
-<code src="./demo/dashboard.tsx">仪表盘</code>
-<code src="./demo/segment.tsx">分段进度条</code>
-<code src="./demo/linecap.tsx">边缘形状</code>
-<code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
-<code src="./demo/steps.tsx">步骤进度条</code>
-
 ## API
 
 各类型共用的属性。
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index 7394322a1e..86e6b0da67 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Radio
 cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,19 +27,6 @@ Radio.
 <code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
 <code src="./demo/badge.tsx">测试 Badge 的样式</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">disabled</code>
-<code src="./demo/radiogroup.tsx">Radio Group</code>
-<code src="./demo/radiogroup-more.tsx">Vertical Radio.Group</code>
-<code src="./demo/radiogroup-options.tsx">Radio.Group group - optional</code>
-<code src="./demo/radiobutton.tsx">radio style</code>
-<code src="./demo/radiogroup-with-name.tsx">Radio.Group with name</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
-<code src="./demo/badge.tsx">测试 Badge 的样式</code>
-
 ## API
 
 ### Radio/Radio.Button
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index 046fc2396f..1c36d29238 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 单选框
-group: 数据录入
+type: 数据录入
 title: Radio
 cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -30,19 +28,6 @@ demo:
 <code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
 <code src="./demo/badge.tsx">Badge style</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/radiogroup.tsx">单选组合</code>
-<code src="./demo/radiogroup-more.tsx">Radio.Group 垂直</code>
-<code src="./demo/radiogroup-options.tsx">Radio.Group 组合 - 配置方式</code>
-<code src="./demo/radiobutton.tsx">按钮样式</code>
-<code src="./demo/radiogroup-with-name.tsx">单选组合 - 配合 name 使用</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
-<code src="./demo/badge.tsx">Badge style</code>
-
 ## API
 
 ### Radio/Radio.Button
diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md
index c9f0f18ff7..57af4e7b72 100644
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Rate
 cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,16 +24,6 @@ Rate component.
 <code src="./demo/character.tsx">Other Character</code>
 <code src="./demo/character-function.tsx">Customize character</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/half.tsx">Half star</code>
-<code src="./demo/text.tsx">Show copywriting</code>
-<code src="./demo/disabled.tsx">Read only</code>
-<code src="./demo/clear.tsx">Clear star</code>
-<code src="./demo/character.tsx">Other Character</code>
-<code src="./demo/character-function.tsx">Customize character</code>
-
 ## API
 
 | Property      | Description                             | type                                  | Default           | Version           |
diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md
index d3158f5b8f..2d3ed86e42 100644
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 评分
-group: 数据录入
+type: 数据录入
 title: Rate
 cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,16 +25,6 @@ demo:
 <code src="./demo/character.tsx">其他字符</code>
 <code src="./demo/character-function.tsx">自定义字符</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/half.tsx">半星</code>
-<code src="./demo/text.tsx">文案展现</code>
-<code src="./demo/disabled.tsx">只读</code>
-<code src="./demo/clear.tsx">清除</code>
-<code src="./demo/character.tsx">其他字符</code>
-<code src="./demo/character-function.tsx">自定义字符</code>
-
 ## API
 
 | 属性          | 说明                     | 类型                                  | 默认值            | 版本              |
diff --git a/components/result/index.en-US.md b/components/result/index.en-US.md
index ec2130a6fc..171ca01e39 100644
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@@ -1,10 +1,8 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 title: Result
 cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
-demo:
-  cols: 2
 ---
 
 Used to feed back the results of a series of operational tasks.
@@ -24,17 +22,6 @@ Use when important operations need to inform the user to process the results and
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">Custom icon</code>
 
-## Examples
-
-<code src="./demo/success.tsx">Success</code>
-<code src="./demo/info.tsx">Info</code>
-<code src="./demo/warning.tsx">Warning</code>
-<code src="./demo/403.tsx">403</code>
-<code src="./demo/404.tsx">404</code>
-<code src="./demo/500.tsx">500</code>
-<code src="./demo/error.tsx">Error</code>
-<code src="./demo/customIcon.tsx">Custom icon</code>
-
 ## API
 
 | Property | Description                            | Type                                                                   | Default |
diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md
index 367e6295d9..2e6317c006 100644
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 title: Result
 subtitle: 结果
 cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
-demo:
-  cols: 2
 ---
 
 用于反馈一系列操作任务的处理结果。
@@ -25,17 +23,6 @@ demo:
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">自定义 icon</code>
 
-## 代码演示
-
-<code src="./demo/success.tsx">Success</code>
-<code src="./demo/info.tsx">Info</code>
-<code src="./demo/warning.tsx">Warning</code>
-<code src="./demo/403.tsx">403</code>
-<code src="./demo/404.tsx">404</code>
-<code src="./demo/500.tsx">500</code>
-<code src="./demo/error.tsx">Error</code>
-<code src="./demo/customIcon.tsx">自定义 icon</code>
-
 ## API
 
 | 参数     | 说明                       | 类型                                                                   | 默认值 |
diff --git a/components/segmented/index.en-US.md b/components/segmented/index.en-US.md
index 3c1527bd9b..79e999291f 100644
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Segmented
 cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -30,20 +28,6 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 <code src="./demo/controlled-two.tsx">Controlled Synced mode</code>
 <code src="./demo/size-consistent.tsx">Consistent height</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/block.tsx">Block Segmented</code>
-<code src="./demo/disabled.tsx">Basic</code>
-<code src="./demo/controlled.tsx">Controlled mode</code>
-<code src="./demo/custom.tsx">Custom Render</code>
-<code src="./demo/dynamic.tsx">Dynamic</code>
-<code src="./demo/size.tsx">Three sizes of Segmented</code>
-<code src="./demo/with-icon.tsx">With Icon</code>
-<code src="./demo/icon-only.tsx">With Icon only</code>
-<code src="./demo/controlled-two.tsx">Controlled Synced mode</code>
-<code src="./demo/size-consistent.tsx">Consistent height</code>
-
 ## API
 
 > This component is available since `antd@4.20.0`
diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md
index edf5a2c72e..2de0f2a7e5 100644
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 分段控制器
-group: 数据展示
+type: 数据展示
 title: Segmented
 cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -31,20 +29,6 @@ demo:
 <code src="./demo/controlled-two.tsx">受控同步模式</code>
 <code src="./demo/size-consistent.tsx">统一高度</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/block.tsx">Block 分段选择器</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/controlled.tsx">受控模式</code>
-<code src="./demo/custom.tsx">自定义渲染</code>
-<code src="./demo/dynamic.tsx">动态数据</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/with-icon.tsx">设置图标</code>
-<code src="./demo/icon-only.tsx">只设置图标</code>
-<code src="./demo/controlled-two.tsx">受控同步模式</code>
-<code src="./demo/size-consistent.tsx">统一高度</code>
-
 ## API
 
 > 自 `antd@4.20.0` 版本开始提供该组件。
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index 595f7f0187..263bfcd1a0 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Select
 cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -43,33 +41,6 @@ Select component to select value from options.
 <code src="./demo/debug.tsx">4.0 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/search.tsx">Select with search field</code>
-<code src="./demo/multiple.tsx">multiple selection</code>
-<code src="./demo/size.tsx">Sizes</code>
-<code src="./demo/option-label-prop.tsx">Custom selection render</code>
-<code src="./demo/search-sort.tsx">Search with sort</code>
-<code src="./demo/tags.tsx">Tags</code>
-<code src="./demo/optgroup.tsx">Option Group</code>
-<code src="./demo/coordinate.tsx">coordinate</code>
-<code src="./demo/search-box.tsx">Search Box</code>
-<code src="./demo/label-in-value.tsx">Get value of selected item</code>
-<code src="./demo/automatic-tokenization.tsx">Automatic tokenization</code>
-<code src="./demo/select-users.tsx">Search and Select Users</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/custom-dropdown-menu.tsx">Custom dropdown</code>
-<code src="./demo/hide-selected.tsx">Hide Already Selected</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
-<code src="./demo/custom-tag-render.tsx">Custom Tag Render</code>
-<code src="./demo/responsive.tsx">Responsive maxTagCount</code>
-<code src="./demo/big-data.tsx">Big Data</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/debug.tsx">4.0 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 68359a74ba..44388ec88f 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 选择器
-group: 数据录入
+type: 数据录入
 title: Select
 cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -44,33 +42,6 @@ demo:
 <code src="./demo/debug.tsx">4.0 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/search.tsx">带搜索框</code>
-<code src="./demo/multiple.tsx">多选</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/option-label-prop.tsx">定制回填内容</code>
-<code src="./demo/search-sort.tsx">带排序的搜索</code>
-<code src="./demo/tags.tsx">标签</code>
-<code src="./demo/optgroup.tsx">分组</code>
-<code src="./demo/coordinate.tsx">联动</code>
-<code src="./demo/search-box.tsx">搜索框</code>
-<code src="./demo/label-in-value.tsx">获得选项的文本</code>
-<code src="./demo/automatic-tokenization.tsx">自动分词</code>
-<code src="./demo/select-users.tsx">搜索用户</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/custom-dropdown-menu.tsx">扩展菜单</code>
-<code src="./demo/hide-selected.tsx">隐藏已选择选项</code>
-<code src="./demo/bordered.tsx">无边框</code>
-<code src="./demo/custom-tag-render.tsx">自定义选择标签</code>
-<code src="./demo/responsive.tsx">响应式 maxTagCount</code>
-<code src="./demo/big-data.tsx">大数据</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/debug.tsx">4.0 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ```jsx
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index c16691c372..9ee4ebb083 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Skeleton
 cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
-demo:
-  cols: 2
 ---
 
 Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
@@ -25,15 +23,6 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 <code src="./demo/children.tsx">Contains sub component</code>
 <code src="./demo/list.tsx">List</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/complex.tsx">Complex combination</code>
-<code src="./demo/active.tsx">Active Animation</code>
-<code src="./demo/element.tsx">Button/Avatar/Input/Image/Node</code>
-<code src="./demo/children.tsx">Contains sub component</code>
-<code src="./demo/list.tsx">List</code>
-
 ## API
 
 ### Skeleton
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index d9921824bb..a79b5c8b87 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 骨架屏
-group: 反馈
+type: 反馈
 title: Skeleton
 cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
-demo:
-  cols: 2
 ---
 
 在需要等待加载内容的位置提供一个占位图形组合。
@@ -26,15 +24,6 @@ demo:
 <code src="./demo/children.tsx">包含子组件</code>
 <code src="./demo/list.tsx">列表</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/complex.tsx">复杂的组合</code>
-<code src="./demo/active.tsx">动画效果</code>
-<code src="./demo/element.tsx">按钮/头像/输入框/图像/自定义节点</code>
-<code src="./demo/children.tsx">包含子组件</code>
-<code src="./demo/list.tsx">列表</code>
-
 ## API
 
 ### Skeleton
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index 542bcea4d1..ec0e0e22b2 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Slider
 cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,19 +26,6 @@ To input a value in a range.
 <code src="./demo/reverse.tsx">Reverse</code>
 <code src="./demo/dragableTrack.tsx">Draggable track</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/input-number.tsx">Slider with InputNumber</code>
-<code src="./demo/icon-slider.tsx">Slider with icon</code>
-<code src="./demo/tip-formatter.tsx">Customize tooltip</code>
-<code src="./demo/event.tsx">Event</code>
-<code src="./demo/mark.tsx">Graduated slider</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/show-tooltip.tsx">Control visible of ToolTip</code>
-<code src="./demo/reverse.tsx">Reverse</code>
-<code src="./demo/dragableTrack.tsx">Draggable track</code>
-
 ## API
 
 | Property      | Description                                                                                                                                       | Type                        | Default                                                                         | Version |
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index b2eed4c0fa..4351f07280 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 滑动输入条
-group: 数据录入
+type: 数据录入
 title: Slider
 cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,19 +27,6 @@ demo:
 <code src="./demo/reverse.tsx">反向</code>
 <code src="./demo/dragableTrack.tsx">范围可拖拽</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/input-number.tsx">带输入框的滑块</code>
-<code src="./demo/icon-slider.tsx">带 icon 的滑块</code>
-<code src="./demo/tip-formatter.tsx">自定义提示</code>
-<code src="./demo/event.tsx">事件</code>
-<code src="./demo/mark.tsx">带标签的滑块</code>
-<code src="./demo/vertical.tsx">垂直</code>
-<code src="./demo/show-tooltip.tsx">控制 ToolTip 的显示</code>
-<code src="./demo/reverse.tsx">反向</code>
-<code src="./demo/dragableTrack.tsx">范围可拖拽</code>
-
 ## API
 
 | 参数          | 说明                                                                                                                                           | 类型                        | 默认值                                                                          | 版本   |
diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md
index 06ec3c9a78..f690fd4823 100644
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Space
 cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
-demo:
-  cols: 2
 ---
 
 Set components spacing.
@@ -25,18 +23,6 @@ Avoid components clinging together and set a unified space.
 <code src="./demo/gap-in-line.tsx">Flex gap style</code>
 <code src="./demo/split.tsx">Split</code>
 
-## Examples
-
-<code src="./demo/base.tsx">Basic Usage</code>
-<code src="./demo/vertical.tsx">Vertical Space</code>
-<code src="./demo/size.tsx">Space Size</code>
-<code src="./demo/align.tsx">Align</code>
-<code src="./demo/customize.tsx">Customize Size</code>
-<code src="./demo/wrap.tsx">Wrap</code>
-<code src="./demo/debug.tsx">Diverse Child</code>
-<code src="./demo/gap-in-line.tsx">Flex gap style</code>
-<code src="./demo/split.tsx">Split</code>
-
 ## API
 
 | Property  | Description                                 | Type                                     | Default      | Version               |
diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
index e929f5c0f4..9ff49219ea 100644
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 布局
+type: 布局
 subtitle: 间距
 title: Space
 cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
-demo:
-  cols: 2
 ---
 
 设置组件之间的间距。
@@ -29,18 +27,6 @@ demo:
 <code src="./demo/gap-in-line.tsx">Flex gap 样式</code>
 <code src="./demo/split.tsx">分隔符</code>
 
-## 代码演示
-
-<code src="./demo/base.tsx">基本用法</code>
-<code src="./demo/vertical.tsx">垂直间距</code>
-<code src="./demo/size.tsx">间距大小</code>
-<code src="./demo/align.tsx">对齐</code>
-<code src="./demo/customize.tsx">自定义尺寸</code>
-<code src="./demo/wrap.tsx">自动换行</code>
-<code src="./demo/debug.tsx">多样的 Child</code>
-<code src="./demo/gap-in-line.tsx">Flex gap 样式</code>
-<code src="./demo/split.tsx">分隔符</code>
-
 ## API
 
 | 参数      | 说明                                   | 类型                                     | 默认值       | 版本                  |
diff --git a/components/spin/index.en-US.md b/components/spin/index.en-US.md
index 51dfc5f1bf..47b321a05b 100644
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Spin
 cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -25,16 +23,6 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 <code src="./demo/delayAndDebounce.tsx">delay</code>
 <code src="./demo/custom-indicator.tsx">Custom spinning indicator</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">basic Usage</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/inside.tsx">Inside a container</code>
-<code src="./demo/nested.tsx">Embedded mode</code>
-<code src="./demo/tip.tsx">Customized description</code>
-<code src="./demo/delayAndDebounce.tsx">delay</code>
-<code src="./demo/custom-indicator.tsx">Custom spinning indicator</code>
-
 ## API
 
 | Property         | Description                                                         | Type                  | Default   |
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index 8d31e0c708..7f38611de3 100644
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 反馈
+type: 反馈
 title: Spin
 subtitle: 加载中
 cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,16 +24,6 @@ demo:
 <code src="./demo/delayAndDebounce.tsx">延迟</code>
 <code src="./demo/custom-indicator.tsx">自定义指示符</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/size.tsx">各种大小</code>
-<code src="./demo/inside.tsx">容器</code>
-<code src="./demo/nested.tsx">卡片加载中</code>
-<code src="./demo/tip.tsx">自定义描述文案</code>
-<code src="./demo/delayAndDebounce.tsx">延迟</code>
-<code src="./demo/custom-indicator.tsx">自定义指示符</code>
-
 ## API
 
 | 参数             | 说明                                         | 类型          | 默认值    |
diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md
index b5ecd8eaab..7409b2d07b 100644
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Statistic
 cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -23,13 +21,6 @@ Display statistic number.
 <code src="./demo/card.tsx">In Card</code>
 <code src="./demo/countdown.tsx">Countdown</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/unit.tsx">Unit</code>
-<code src="./demo/card.tsx">In Card</code>
-<code src="./demo/countdown.tsx">Countdown</code>
-
 ## API
 
 #### Statistic
diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md
index 2b09fbbf58..c52779c8db 100644
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 统计数值
-group: 数据展示
+type: 数据展示
 title: Statistic
 cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -24,13 +22,6 @@ demo:
 <code src="./demo/card.tsx">在卡片中使用</code>
 <code src="./demo/countdown.tsx">倒计时</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/unit.tsx">单位</code>
-<code src="./demo/card.tsx">在卡片中使用</code>
-<code src="./demo/countdown.tsx">倒计时</code>
-
 ## API
 
 #### Statistic
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index b75cf4e6e9..af7f01e35a 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Steps
 cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
-demo:
-  cols: 2
 ---
 
 `Steps` is a navigation bar that guides users through the steps of a task.
@@ -15,25 +13,6 @@ When a given task is complicated or has a certain sequence in the series of subt
 
 ## Examples
 
-<code src="./demo/simple.tsx">Basic</code>
-<code src="./demo/small-size.tsx">Mini version</code>
-<code src="./demo/icon.tsx">With icon</code>
-<code src="./demo/step-next.tsx">Switch Step</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/vertical-small.tsx">Vertical mini version</code>
-<code src="./demo/error.tsx">Error status</code>
-<code src="./demo/progress-dot.tsx">Dot Style</code>
-<code src="./demo/customized-progress-dot.tsx">Customized Dot Style</code>
-<code src="./demo/progress-dot-small.tsx">Dot Style Size Small</code>
-<code src="./demo/clickable.tsx">Clickable</code>
-<code src="./demo/nav.tsx">Navigation Steps</code>
-<code src="./demo/progress.tsx">Steps with progress</code>
-<code src="./demo/label-placement.tsx">Label Placement</code>
-<code src="./demo/progress-debug.tsx">Progress Debug</code>
-<code src="./demo/steps-in-steps.tsx">Steps inside Steps</code>
-
-## Examples
-
 <code src="./demo/deprecated.tsx">Basic</code>
 <code src="./demo/simple.tsx">Basic</code>
 <code src="./demo/small-size.tsx">Mini version</code>
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index af2b5abb60..3a6c701e39 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 步骤条
-group: 导航
+type: 导航
 title: Steps
 cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
-demo:
-  cols: 2
 ---
 
 引导用户按照流程完成任务的导航条。
@@ -14,25 +12,6 @@ demo:
 
 当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。
 
-## 代码演示
-
-<code src="./demo/simple.tsx">基本用法</code>
-<code src="./demo/small-size.tsx">迷你版</code>
-<code src="./demo/icon.tsx">带图标的步骤条</code>
-<code src="./demo/step-next.tsx">步骤切换</code>
-<code src="./demo/vertical.tsx">竖直方向的步骤条</code>
-<code src="./demo/vertical-small.tsx">竖直方向的小型步骤条</code>
-<code src="./demo/error.tsx">步骤运行错误</code>
-<code src="./demo/progress-dot.tsx">点状步骤条</code>
-<code src="./demo/customized-progress-dot.tsx">自定义点状步骤条</code>
-<code src="./demo/progress-dot-small.tsx">迷你版点状步骤条</code>
-<code src="./demo/clickable.tsx">可点击</code>
-<code src="./demo/nav.tsx">导航步骤</code>
-<code src="./demo/progress.tsx">带有进度的步骤</code>
-<code src="./demo/label-placement.tsx">标签放置位置</code>
-<code src="./demo/progress-debug.tsx">Progress Debug</code>
-<code src="./demo/steps-in-steps.tsx">Steps 嵌套 Steps</code>
-
 ### 4.24.0 用法升级
 
 ```__react
@@ -53,8 +32,6 @@ return <Steps items={items} />;
 </Steps>;
 ```
 
-## API
-
 ### Steps
 
 整体步骤条。
diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md
index 4288271961..ae4fa1a6e9 100644
--- a/components/switch/index.en-US.md
+++ b/components/switch/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Switch
 cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -24,14 +22,6 @@ Switching Selector.
 <code src="./demo/size.tsx">Two sizes</code>
 <code src="./demo/loading.tsx">Loading</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/text.tsx">Text & icon</code>
-<code src="./demo/size.tsx">Two sizes</code>
-<code src="./demo/loading.tsx">Loading</code>
-
 ## API
 
 | Property          | Description                                         | Type                                     | Default   |
diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
index 24bf2c2d61..6a9345990c 100644
--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 开关
-group: 数据录入
+type: 数据录入
 title: Switch
 cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -25,14 +23,6 @@ demo:
 <code src="./demo/size.tsx">两种大小</code>
 <code src="./demo/loading.tsx">加载中</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/text.tsx">文字和图标</code>
-<code src="./demo/size.tsx">两种大小</code>
-<code src="./demo/loading.tsx">加载中</code>
-
 ## API
 
 | 参数              | 说明                                | 类型                                     | 默认值    |
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index d4d1b5df87..6269da81d7 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Table
 cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
-demo:
-  cols: 2
 ---
 
 A table displays rows of data.
@@ -104,49 +102,6 @@ const columns = [
 <code src="./demo/sticky.tsx">Fixed header and scroll bar with the page</code>
 <code src="./demo/dynamic-settings.tsx">Dynamic Settings</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/jsx.tsx">JSX style API</code>
-<code src="./demo/row-selection.tsx">selection</code>
-<code src="./demo/row-selection-and-operation.tsx">Selection and operation</code>
-<code src="./demo/row-selection-custom.tsx">Custom selection</code>
-<code src="./demo/head.tsx">Filter and sorter</code>
-<code src="./demo/filter-in-tree.tsx">Filter in Tree</code>
-<code src="./demo/filter-search.tsx">Filter search</code>
-<code src="./demo/multiple-sorter.tsx">Multiple sorter</code>
-<code src="./demo/reset-filter.tsx">Reset filters and sorters</code>
-<code src="./demo/custom-filter-panel.tsx">Customized filter panel</code>
-<code src="./demo/ajax.tsx">Ajax</code>
-<code src="./demo/size.tsx">size</code>
-<code src="./demo/narrow.tsx">size</code>
-<code src="./demo/bordered.tsx">border, title and footer</code>
-<code src="./demo/expand.tsx">Expandable Row</code>
-<code src="./demo/order-column.tsx">Order Specific Column</code>
-<code src="./demo/colspan-rowspan.tsx">colSpan and rowSpan</code>
-<code src="./demo/tree-data.tsx">Tree data</code>
-<code src="./demo/tree-table-ellipsis.tsx">Tree data ellipsis debug demo</code>
-<code src="./demo/fixed-header.tsx">Fixed Header</code>
-<code src="./demo/fixed-columns.tsx">Fixed Columns</code>
-<code src="./demo/fixed-columns-header.tsx">Fixed Columns and Header</code>
-<code src="./demo/grouping-columns.tsx">Grouping table head</code>
-<code src="./demo/edit-cell.tsx">Editable Cells</code>
-<code src="./demo/edit-row.tsx">Editable Rows</code>
-<code src="./demo/nested-table.tsx">Nested tables</code>
-<code src="./demo/drag-sorting.tsx">Drag sorting</code>
-<code src="./demo/drag-sorting-handler.tsx">Drag sorting with handler</code>
-<code src="./demo/resizable-column.tsx">Resizable column</code>
-<code src="./demo/ellipsis.tsx">ellipsis column</code>
-<code src="./demo/ellipsis-custom-tooltip.tsx">ellipsis column custom tooltip</code>
-<code src="./demo/summary.tsx">Summary</code>
-<code src="./demo/virtual-list.tsx">Virtual list</code>
-<code src="./demo/responsive.tsx">Responsive</code>
-<code src="./demo/nest-table-border-debug.tsx">Nested Bordered Table Debug</code>
-<code src="./demo/pagination.tsx">Pagination Settings</code>
-<code src="./demo/row-selection-custom-debug.tsx">Custom selection group</code>
-<code src="./demo/sticky.tsx">Fixed header and scroll bar with the page</code>
-<code src="./demo/dynamic-settings.tsx">Dynamic Settings</code>
-
 ## API
 
 ### Table
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 85e02aea90..6da170d631 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Table
 subtitle: 表格
 cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
-demo:
-  cols: 2
 ---
 
 展示行列数据。
@@ -105,49 +103,6 @@ const columns = [
 <code src="./demo/sticky.tsx">随页面滚动的固定表头和滚动条</code>
 <code src="./demo/dynamic-settings.tsx">动态控制表格属性</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/jsx.tsx">JSX 风格的 API</code>
-<code src="./demo/row-selection.tsx">可选择</code>
-<code src="./demo/row-selection-and-operation.tsx">选择和操作</code>
-<code src="./demo/row-selection-custom.tsx">自定义选择项</code>
-<code src="./demo/head.tsx">筛选和排序</code>
-<code src="./demo/filter-in-tree.tsx">树型筛选菜单</code>
-<code src="./demo/filter-search.tsx">自定义筛选的搜索</code>
-<code src="./demo/multiple-sorter.tsx">多列排序</code>
-<code src="./demo/reset-filter.tsx">可控的筛选和排序</code>
-<code src="./demo/custom-filter-panel.tsx">自定义筛选菜单</code>
-<code src="./demo/ajax.tsx">远程加载数据</code>
-<code src="./demo/size.tsx">紧凑型</code>
-<code src="./demo/narrow.tsx">紧凑型</code>
-<code src="./demo/bordered.tsx">带边框</code>
-<code src="./demo/expand.tsx">可展开</code>
-<code src="./demo/order-column.tsx">特殊列排序</code>
-<code src="./demo/colspan-rowspan.tsx">表格行/列合并</code>
-<code src="./demo/tree-data.tsx">树形数据展示</code>
-<code src="./demo/tree-table-ellipsis.tsx">树形数据省略情况测试</code>
-<code src="./demo/fixed-header.tsx">固定表头</code>
-<code src="./demo/fixed-columns.tsx">固定列</code>
-<code src="./demo/fixed-columns-header.tsx">固定头和列</code>
-<code src="./demo/grouping-columns.tsx">表头分组</code>
-<code src="./demo/edit-cell.tsx">可编辑单元格</code>
-<code src="./demo/edit-row.tsx">可编辑行</code>
-<code src="./demo/nested-table.tsx">嵌套子表格</code>
-<code src="./demo/drag-sorting.tsx">拖拽排序</code>
-<code src="./demo/drag-sorting-handler.tsx">拖拽手柄列</code>
-<code src="./demo/resizable-column.tsx">可伸缩列</code>
-<code src="./demo/ellipsis.tsx">单元格自动省略</code>
-<code src="./demo/ellipsis-custom-tooltip.tsx">自定义单元格省略提示</code>
-<code src="./demo/summary.tsx">总结栏</code>
-<code src="./demo/virtual-list.tsx">虚拟列表</code>
-<code src="./demo/responsive.tsx">响应式</code>
-<code src="./demo/nest-table-border-debug.tsx">嵌套带边框的表格 Debug</code>
-<code src="./demo/pagination.tsx">分页设置</code>
-<code src="./demo/row-selection-custom-debug.tsx">自定义选择项组</code>
-<code src="./demo/sticky.tsx">随页面滚动的固定表头和滚动条</code>
-<code src="./demo/dynamic-settings.tsx">动态控制表格属性</code>
-
 ## API
 
 ### Table
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 631598a48a..cb097dce79 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Tabs
 cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
-demo:
-  cols: 2
 ---
 
 Tabs make it easy to switch between different views.
@@ -63,26 +61,6 @@ return <Tabs items={items} />;
 <code src="./demo/animated.tsx">Animated</code>
 <code src="./demo/nest.tsx">Nest</code>
 
-## Examples
-
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/centered.tsx">Centered</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/slide.tsx">Slide</code>
-<code src="./demo/extra.tsx">Extra content</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/position.tsx">Position</code>
-<code src="./demo/card.tsx">Card type tab</code>
-<code src="./demo/editable-card.tsx">Add & close tab</code>
-<code src="./demo/card-top.tsx">Container of card type Tab</code>
-<code src="./demo/custom-add-trigger.tsx">Customized trigger of new tab</code>
-<code src="./demo/custom-tab-bar.tsx">Customized bar of tab</code>
-<code src="./demo/custom-tab-bar-node.tsx">Draggable Tabs</code>
-<code src="./demo/animated.tsx">Animated</code>
-<code src="./demo/nest.tsx">Nest</code>
-
 ## API
 
 ### Tabs
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index 7f29940b36..4070a2f79e 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 标签页
-group: 数据展示
+type: 数据展示
 title: Tabs
 cover: https://gw.alipayobjects.com/zos/antfincdn/lkI2hNEDr2V/Tabs.svg
-demo:
-  cols: 2
 ---
 
 选项卡切换组件。
@@ -66,26 +64,6 @@ return <Tabs items={items} />;
 <code src="./demo/animated.tsx">动画</code>
 <code src="./demo/nest.tsx">嵌套</code>
 
-## 代码演示
-
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/disabled.tsx">禁用</code>
-<code src="./demo/centered.tsx">居中</code>
-<code src="./demo/icon.tsx">图标</code>
-<code src="./demo/slide.tsx">滑动</code>
-<code src="./demo/extra.tsx">附加内容</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/position.tsx">位置</code>
-<code src="./demo/card.tsx">卡片式页签</code>
-<code src="./demo/editable-card.tsx">新增和关闭页签</code>
-<code src="./demo/card-top.tsx">卡片式页签容器</code>
-<code src="./demo/custom-add-trigger.tsx">自定义新增页签触发器</code>
-<code src="./demo/custom-tab-bar.tsx">自定义页签头</code>
-<code src="./demo/custom-tab-bar-node.tsx">可拖拽标签</code>
-<code src="./demo/animated.tsx">动画</code>
-<code src="./demo/nest.tsx">嵌套</code>
-
 ## API
 
 ### Tabs
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index d31517830b..5a358d24a0 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Tag
 cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,18 +27,6 @@ Tag for categorizing or markup.
 <code src="./demo/status.tsx">Status Tag</code>
 <code src="./demo/customize.tsx">Customize close</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/colorful.tsx">Colorful Tag</code>
-<code src="./demo/colorful-inverse.tsx">Inverse Colorful Tag</code>
-<code src="./demo/control.tsx">Add & Remove Dynamically</code>
-<code src="./demo/checkable.tsx">Checkable</code>
-<code src="./demo/animation.tsx">Animate</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/status.tsx">Status Tag</code>
-<code src="./demo/customize.tsx">Customize close</code>
-
 ## API
 
 ### Tag
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index dbd2c6562f..2b9df1c505 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 标签
-group: 数据展示
+type: 数据展示
 title: Tag
 cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,18 +27,6 @@ demo:
 <code src="./demo/status.tsx">预设状态的标签</code>
 <code src="./demo/customize.tsx">自定义关闭按钮</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/colorful.tsx">多彩标签</code>
-<code src="./demo/colorful-inverse.tsx">反色多彩标签</code>
-<code src="./demo/control.tsx">动态添加和删除</code>
-<code src="./demo/checkable.tsx">可选择标签</code>
-<code src="./demo/animation.tsx">添加动画</code>
-<code src="./demo/icon.tsx">图标按钮</code>
-<code src="./demo/status.tsx">预设状态的标签</code>
-<code src="./demo/customize.tsx">自定义关闭按钮</code>
-
 ## API
 
 ### Tag
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index cf435fd037..10d6d754d2 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: TimePicker
 cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -34,23 +32,6 @@ By clicking the input box, you can select a time from a popup panel.
 <code src="./demo/suffix.tsx">Suffix</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/value.tsx">Under Control</code>
-<code src="./demo/size.tsx">Three Sizes</code>
-<code src="./demo/disabled.tsx">disabled</code>
-<code src="./demo/hide-column.tsx">Hour and minute</code>
-<code src="./demo/interval-options.tsx">interval option</code>
-<code src="./demo/addon.tsx">Addon</code>
-<code src="./demo/12hours.tsx">12 hours</code>
-<code src="./demo/colored-popup.tsx">Colored Popup</code>
-<code src="./demo/range-picker.tsx">Time Range Picker</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ---
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index e15b792c93..24067e0609 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 时间选择框
-group: 数据录入
+type: 数据录入
 title: TimePicker
 cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -35,23 +33,6 @@ demo:
 <code src="./demo/suffix.tsx">后缀图标</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/value.tsx">受控组件</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/disabled.tsx">禁用</code>
-<code src="./demo/hide-column.tsx">选择时分</code>
-<code src="./demo/interval-options.tsx">步长选项</code>
-<code src="./demo/addon.tsx">附加内容</code>
-<code src="./demo/12hours.tsx">12 小时制</code>
-<code src="./demo/colored-popup.tsx">色付きポップアップ</code>
-<code src="./demo/range-picker.tsx">范围选择器</code>
-<code src="./demo/bordered.tsx">无边框</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ---
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
index f49b70f449..a92acdf895 100644
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Timeline
 cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,16 +24,6 @@ Vertical display timeline.
 <code src="./demo/right.tsx">Right alternate</code>
 <code src="./demo/label.tsx">Label</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/color.tsx">Color</code>
-<code src="./demo/pending.tsx">Last node and Reversing</code>
-<code src="./demo/alternate.tsx">Alternate</code>
-<code src="./demo/custom.tsx">Custom</code>
-<code src="./demo/right.tsx">Right alternate</code>
-<code src="./demo/label.tsx">Label</code>
-
 ## API
 
 ```jsx
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
index 1c0b50a1e1..714cee4068 100644
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 时间轴
-group: 数据展示
+type: 数据展示
 title: Timeline
 cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -27,16 +25,6 @@ demo:
 <code src="./demo/right.tsx">右侧时间轴点</code>
 <code src="./demo/label.tsx">标签</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/color.tsx">圆圈颜色</code>
-<code src="./demo/pending.tsx">最后一个及排序</code>
-<code src="./demo/alternate.tsx">交替展现</code>
-<code src="./demo/custom.tsx">自定义时间轴点</code>
-<code src="./demo/right.tsx">右侧时间轴点</code>
-<code src="./demo/label.tsx">标签</code>
-
 ## API
 
 ```jsx
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index 16a0d38a75..8fa12e1fff 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Tooltip
 cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -26,16 +24,6 @@ A simple text popup tip.
 <code src="./demo/colorful.tsx">Colorful Tooltip</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/arrow-point-at-center.tsx">Arrow pointing at the center</code>
-<code src="./demo/auto-adjust-overflow.tsx">Adjust placement automatically</code>
-<code src="./demo/destroy-tooltip-on-hide.tsx">Destroy tooltip when hidden</code>
-<code src="./demo/colorful.tsx">Colorful Tooltip</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | Property | Description                   | Type                         | Default |
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index d18d712900..604e87c10b 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 文字提示
-group: 数据展示
+type: 数据展示
 title: Tooltip
 cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,16 +26,6 @@ demo:
 <code src="./demo/colorful.tsx">多彩文字提示</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/arrow-point-at-center.tsx">箭头指向</code>
-<code src="./demo/auto-adjust-overflow.tsx">自动调整位置</code>
-<code src="./demo/destroy-tooltip-on-hide.tsx">隐藏后销毁</code>
-<code src="./demo/colorful.tsx">多彩文字提示</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 | 参数  | 说明     | 类型                         | 默认值 |
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
index 686c8cf3d4..d0548ac9b4 100644
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Transfer
 cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
-demo:
-  cols: 2
 ---
 
 Double column transfer choice box.
@@ -31,19 +29,6 @@ One or more elements can be selected from either column, one click on the proper
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/custom-select-all-labels.tsx">Custom Select All Labels</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/oneWay.tsx">One Way</code>
-<code src="./demo/search.tsx">Search</code>
-<code src="./demo/advanced.tsx">Advanced</code>
-<code src="./demo/custom-item.tsx">Custom datasource</code>
-<code src="./demo/large-data.tsx">Pagination</code>
-<code src="./demo/table-transfer.tsx">Table Transfer</code>
-<code src="./demo/tree-transfer.tsx">Tree Transfer</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/custom-select-all-labels.tsx">Custom Select All Labels</code>
-
 ## API
 
 | Property        | Description                                                                                                                                                                                                                                                                                                  | Type                                                                                                                                                                          | Default                                                                                                          | Version           |
diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
index 081e9d15ce..a2a762c393 100644
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 穿梭框
-group: 数据录入
+type: 数据录入
 title: Transfer
 cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
-demo:
-  cols: 2
 ---
 
 双栏穿梭选择框。
@@ -32,19 +30,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/custom-select-all-labels.tsx">自定义全选文字</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/oneWay.tsx">单向样式</code>
-<code src="./demo/search.tsx">带搜索框</code>
-<code src="./demo/advanced.tsx">高级用法</code>
-<code src="./demo/custom-item.tsx">自定义渲染行数据</code>
-<code src="./demo/large-data.tsx">分页</code>
-<code src="./demo/table-transfer.tsx">表格穿梭框</code>
-<code src="./demo/tree-transfer.tsx">树穿梭框</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/custom-select-all-labels.tsx">自定义全选文字</code>
-
 ## API
 
 ### Transfer
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index 6d85b7cf94..84f666a8c2 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: TreeSelect
 cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -28,19 +26,6 @@ Tree selection control.
 <code src="./demo/suffix.tsx">Suffix</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/multiple.tsx">Multiple Selection</code>
-<code src="./demo/treeData.tsx">Generate from tree data</code>
-<code src="./demo/checkable.tsx">Checkable</code>
-<code src="./demo/async.tsx">Asynchronous loading</code>
-<code src="./demo/treeLine.tsx">Show Tree Line</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ### Tree props
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index b4626e6e63..d65c06bd54 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 树选择
-group: 数据录入
+type: 数据录入
 title: TreeSelect
 cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -29,19 +27,6 @@ demo:
 <code src="./demo/suffix.tsx">后缀图标</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/multiple.tsx">多选</code>
-<code src="./demo/treeData.tsx">从数据直接生成</code>
-<code src="./demo/checkable.tsx">可勾选</code>
-<code src="./demo/async.tsx">异步加载</code>
-<code src="./demo/treeLine.tsx">线性样式</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API
 
 ### Tree props
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index cb78ccb26f..9539627f06 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Tree
 cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -30,21 +28,6 @@ Almost anything can be represented in a tree structure. Examples include directo
 <code src="./demo/drag-debug.tsx">Drag Debug</code>
 <code src="./demo/big-data.tsx">Big data</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/basic-controlled.tsx">Controlled Tree</code>
-<code src="./demo/draggable.tsx">draggable</code>
-<code src="./demo/dynamic.tsx">load data asynchronously</code>
-<code src="./demo/search.tsx">Searchable</code>
-<code src="./demo/line.tsx">Tree with line</code>
-<code src="./demo/customized-icon.tsx">Customize Icon</code>
-<code src="./demo/directory.tsx">directory</code>
-<code src="./demo/switcher-icon.tsx">Customize collapse/expand icon</code>
-<code src="./demo/virtual-scroll.tsx">Virtual scroll</code>
-<code src="./demo/drag-debug.tsx">Drag Debug</code>
-<code src="./demo/big-data.tsx">Big data</code>
-
 ## API
 
 ### Tree props
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index 0f7b3a9b97..01efd9ef6f 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Tree
 subtitle: 树形控件
 cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -31,21 +29,6 @@ demo:
 <code src="./demo/drag-debug.tsx">Drag Debug</code>
 <code src="./demo/big-data.tsx">大数据</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/basic-controlled.tsx">受控操作示例</code>
-<code src="./demo/draggable.tsx">拖动示例</code>
-<code src="./demo/dynamic.tsx">异步数据加载</code>
-<code src="./demo/search.tsx">可搜索</code>
-<code src="./demo/line.tsx">连接线</code>
-<code src="./demo/customized-icon.tsx">自定义图标</code>
-<code src="./demo/directory.tsx">目录</code>
-<code src="./demo/switcher-icon.tsx">自定义展开/折叠图标</code>
-<code src="./demo/virtual-scroll.tsx">虚拟滚动</code>
-<code src="./demo/drag-debug.tsx">Drag Debug</code>
-<code src="./demo/big-data.tsx">大数据</code>
-
 ## API
 
 ### Tree props
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index 57232b26d2..5cb680eab7 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: General
+type: General
 title: Typography
 cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
-demo:
-  cols: 2
 ---
 
 Basic text writing, including headings, body text, lists, and more.
@@ -26,18 +24,6 @@ Basic text writing, including headings, body text, lists, and more.
 <code src="./demo/ellipsis-debug.tsx">Ellipsis Debug</code>
 <code src="./demo/suffix.tsx">suffix</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/title.tsx">Title Component</code>
-<code src="./demo/paragraph-debug.tsx">Title and Paragraph</code>
-<code src="./demo/text.tsx">Text and Link Component</code>
-<code src="./demo/interactive.tsx">Interactive</code>
-<code src="./demo/ellipsis.tsx">Ellipsis</code>
-<code src="./demo/ellipsis-middle.tsx">Ellipsis from middle</code>
-<code src="./demo/ellipsis-debug.tsx">Ellipsis Debug</code>
-<code src="./demo/suffix.tsx">suffix</code>
-
 ## API
 
 ### Typography.Text
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index 9ee7b29727..730c078548 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 排版
-group: 通用
+type: 通用
 title: Typography
 cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
-demo:
-  cols: 2
 ---
 
 文本的基本格式。
@@ -27,18 +25,6 @@ demo:
 <code src="./demo/ellipsis-debug.tsx">省略号 Debug</code>
 <code src="./demo/suffix.tsx">后缀</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/title.tsx">标题组件</code>
-<code src="./demo/paragraph-debug.tsx">标题与段落</code>
-<code src="./demo/text.tsx">文本与超链接组件</code>
-<code src="./demo/interactive.tsx">可交互</code>
-<code src="./demo/ellipsis.tsx">省略号</code>
-<code src="./demo/ellipsis-middle.tsx">省略中间</code>
-<code src="./demo/ellipsis-debug.tsx">省略号 Debug</code>
-<code src="./demo/suffix.tsx">后缀</code>
-
 ## API
 
 ### Typography.Text
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 0967ae43ea..fe6f128dee 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Upload
 cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -41,28 +39,6 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 <code src="./demo/crop-image.tsx">Crop image before uploading</code>
 <code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
 
-## Examples
-
-<code src="./demo/basic.tsx">Upload by clicking</code>
-<code src="./demo/avatar.tsx">Avatar</code>
-<code src="./demo/defaultFileList.tsx">Default Files</code>
-<code src="./demo/picture-card.tsx">Pictures Wall</code>
-<code src="./demo/fileList.tsx">Complete control over file list</code>
-<code src="./demo/drag.tsx">Drag and Drop</code>
-<code src="./demo/directory.tsx">Upload directory</code>
-<code src="./demo/upload-manually.tsx">Upload manually</code>
-<code src="./demo/upload-png-only.tsx">Upload png file only</code>
-<code src="./demo/picture-style.tsx">Pictures with list style</code>
-<code src="./demo/preview-file.tsx">Customize preview file</code>
-<code src="./demo/max-count.tsx">Max Count</code>
-<code src="./demo/transform-file.tsx">Transform file before request</code>
-<code src="./demo/upload-with-aliyun-oss.tsx">Aliyun OSS</code>
-<code src="./demo/file-type.tsx">custom show icon</code>
-<code src="./demo/upload-custom-action-icon.tsx">custom action icon</code>
-<code src="./demo/drag-sorting.tsx">Drag sorting of uploadList</code>
-<code src="./demo/crop-image.tsx">Crop image before uploading</code>
-<code src="./demo/customize-progress-bar.tsx">Customize Progress Bar</code>
-
 ## API
 
 | Property              | Description                                                                                                                                                                                                                                                                             | Type                                                                                                                                                                                                                                                                               | Default                                                                                                                                               | Version         |
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 25533e25ce..b9a3dd8239 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 上传
-group: 数据录入
+type: 数据录入
 title: Upload
 cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
-demo:
-  cols: 2
 demo:
   cols: 2
 ---
@@ -42,28 +40,6 @@ demo:
 <code src="./demo/crop-image.tsx">上传前裁切图片</code>
 <code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
 
-## 代码演示
-
-<code src="./demo/basic.tsx">点击上传</code>
-<code src="./demo/avatar.tsx">用户头像</code>
-<code src="./demo/defaultFileList.tsx">已上传的文件列表</code>
-<code src="./demo/picture-card.tsx">照片墙</code>
-<code src="./demo/fileList.tsx">完全控制的上传列表</code>
-<code src="./demo/drag.tsx">拖拽上传</code>
-<code src="./demo/directory.tsx">文件夹上传</code>
-<code src="./demo/upload-manually.tsx">手动上传</code>
-<code src="./demo/upload-png-only.tsx">只上传 png 图片</code>
-<code src="./demo/picture-style.tsx">图片列表样式</code>
-<code src="./demo/preview-file.tsx">自定义预览</code>
-<code src="./demo/max-count.tsx">限制数量</code>
-<code src="./demo/transform-file.tsx">上传前转换文件</code>
-<code src="./demo/upload-with-aliyun-oss.tsx">阿里云 OSS</code>
-<code src="./demo/file-type.tsx">自定义显示 icon</code>
-<code src="./demo/upload-custom-action-icon.tsx">自定义交互图标</code>
-<code src="./demo/drag-sorting.tsx">上传列表拖拽排序</code>
-<code src="./demo/crop-image.tsx">上传前裁切图片</code>
-<code src="./demo/customize-progress-bar.tsx">自定义进度条样式</code>
-
 ## API
 
 | 参数                  | 说明                                                                                                                                                                                                                                                                                                   | 类型                                                                                                                                                                                                                                                                               | 默认值                                                                                                                                   | 版本            |
diff --git a/scripts/migrate.js b/scripts/migrate.js
index bcf2cdd002..91cbafd3e7 100644
--- a/scripts/migrate.js
+++ b/scripts/migrate.js
@@ -7,10 +7,14 @@ const yaml = require('dumi/node_modules/js-yaml');
 const tmpFolder = `~demo`;
 
 if (fs.existsSync(tmpFolder)) {
-  console.log('存在 ~demo 文件夹，先做迁移');
-  let fileCount = 0;
+  let demoFileCount = 0;
+  let apiFileCount = 0;
+
+  const files = glob
+    .sync(path.join(tmpFolder, `components/**`))
+    .filter(file => file.endsWith('.md'));
+  console.log('存在 ~demo 文件夹，先做迁移', files.length, '个文件');
 
-  const files = glob.sync(path.join(tmpFolder, `components/**`));
   files.forEach(file => {
     const filePath = file.split(path.sep).splice(1).join(path.sep);
     if (fs.statSync(filePath).isDirectory()) {
@@ -23,10 +27,15 @@ if (fs.existsSync(tmpFolder)) {
 
     fs.ensureDirSync(path.dirname(filePath));
     fs.copyFileSync(file, filePath);
-    fileCount += 1;
+
+    if (filePath.includes('demo')) {
+      demoFileCount += 1;
+    } else {
+      apiFileCount += 1;
+    }
   });
 
-  console.log('迁移完成，共迁移文件数：', fileCount);
+  console.log('迁移完成，共迁移文件数：', apiFileCount, '个介绍文档', demoFileCount, '个 demo');
 }
 
 // 重新生成所有的 Demo 文件