diff --git a/packages/client/package.json b/packages/client/package.json
index 4ab9a07f1..8ca73b55d 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -17,8 +17,8 @@
     "npm": ">=3.0.0"
   },
   "dependencies": {
-    "@dnd-kit/core": "^4.0.3",
-    "@dnd-kit/sortable": "^5.1.0",
+    "@dnd-kit/core": "^5.0.1",
+    "@dnd-kit/sortable": "^6.0.0",
     "@emotion/css": "^11.7.1",
     "@formily/antd": "^2.0.7",
     "@formily/core": "^2.0.7",
diff --git a/packages/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/client/src/schema-component/antd/block-item/BlockItem.tsx
new file mode 100644
index 000000000..bf4f65a05
--- /dev/null
+++ b/packages/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { useDesignable } from '../..';
+
+export const BlockItem: React.FC<any> = (props) => {
+  const { DesignableBar } = useDesignable();
+  return (
+    <div className="nb-block-item">
+      {props.children}
+      <DesignableBar />
+    </div>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/block-item/index.tsx b/packages/client/src/schema-component/antd/block-item/index.tsx
index bf4f65a05..b33e1d49a 100644
--- a/packages/client/src/schema-component/antd/block-item/index.tsx
+++ b/packages/client/src/schema-component/antd/block-item/index.tsx
@@ -1,12 +1 @@
-import React from 'react';
-import { useDesignable } from '../..';
-
-export const BlockItem: React.FC<any> = (props) => {
-  const { DesignableBar } = useDesignable();
-  return (
-    <div className="nb-block-item">
-      {props.children}
-      <DesignableBar />
-    </div>
-  );
-};
+export * from './BlockItem';
diff --git a/packages/client/src/schema-component/antd/calendar/Calendar.tsx b/packages/client/src/schema-component/antd/calendar/Calendar.tsx
new file mode 100644
index 000000000..bf6aaf988
--- /dev/null
+++ b/packages/client/src/schema-component/antd/calendar/Calendar.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Calendar = () => {
+  return <div>Calendar</div>;
+};
diff --git a/packages/client/src/schema-component/antd/calendar/index.ts b/packages/client/src/schema-component/antd/calendar/index.ts
new file mode 100644
index 000000000..a72338059
--- /dev/null
+++ b/packages/client/src/schema-component/antd/calendar/index.ts
@@ -0,0 +1 @@
+export * from './Calendar';
diff --git a/packages/client/src/schema-component/antd/card-item/index.tsx b/packages/client/src/schema-component/antd/card-item/CardItem.tsx
similarity index 100%
rename from packages/client/src/schema-component/antd/card-item/index.tsx
rename to packages/client/src/schema-component/antd/card-item/CardItem.tsx
index ae00a8a51..1b347bcf7 100644
--- a/packages/client/src/schema-component/antd/card-item/index.tsx
+++ b/packages/client/src/schema-component/antd/card-item/CardItem.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Card } from 'antd';
+import React from 'react';
 import { BlockItem } from '../block-item';
 
 export const CardItem: React.FC = (props) => {
diff --git a/packages/client/src/schema-component/antd/card-item/index.ts b/packages/client/src/schema-component/antd/card-item/index.ts
new file mode 100644
index 000000000..1f55f58c6
--- /dev/null
+++ b/packages/client/src/schema-component/antd/card-item/index.ts
@@ -0,0 +1 @@
+export * from './CardItem';
diff --git a/packages/client/src/schema-component/antd/chart/Chart.tsx b/packages/client/src/schema-component/antd/chart/Chart.tsx
new file mode 100644
index 000000000..6a813f227
--- /dev/null
+++ b/packages/client/src/schema-component/antd/chart/Chart.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Chart = () => {
+  return <div>Chart</div>;
+};
diff --git a/packages/client/src/schema-component/antd/chart/index.ts b/packages/client/src/schema-component/antd/chart/index.ts
new file mode 100644
index 000000000..c9f6de63f
--- /dev/null
+++ b/packages/client/src/schema-component/antd/chart/index.ts
@@ -0,0 +1 @@
+export * from './Chart';
diff --git a/packages/client/src/schema-component/antd/form-item/FormItem.tsx b/packages/client/src/schema-component/antd/form-item/FormItem.tsx
new file mode 100644
index 000000000..08a10fb7d
--- /dev/null
+++ b/packages/client/src/schema-component/antd/form-item/FormItem.tsx
@@ -0,0 +1,11 @@
+import { FormItem as Item } from '@formily/antd';
+import React from 'react';
+import { BlockItem } from '../block-item';
+
+export const FormItem: React.FC = (props) => {
+  return (
+    <BlockItem className={'nb-form-item'}>
+      <Item {...props} />
+    </BlockItem>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/form-item/index.tsx b/packages/client/src/schema-component/antd/form-item/index.tsx
index ae9aa183b..4de2971fb 100644
--- a/packages/client/src/schema-component/antd/form-item/index.tsx
+++ b/packages/client/src/schema-component/antd/form-item/index.tsx
@@ -1,11 +1 @@
-import React from 'react';
-import { BlockItem } from '../block-item';
-import { FormItem as FormilyFormItem } from '@formily/antd';
-
-export const FormItem: React.FC = (props) => {
-  return (
-    <BlockItem className={'nb-form-item'}>
-      <FormilyFormItem {...props} />
-    </BlockItem>
-  );
-};
+export * from './FormItem';
diff --git a/packages/client/src/schema-component/antd/index.ts b/packages/client/src/schema-component/antd/index.ts
index 7a03d105a..4b73eeff9 100644
--- a/packages/client/src/schema-component/antd/index.ts
+++ b/packages/client/src/schema-component/antd/index.ts
@@ -1,7 +1,10 @@
 export * from './action';
 export * from './array-table';
 export * from './block-item';
+export * from './calendar';
+export * from './card-item';
 export * from './cascader';
+export * from './chart';
 export * from './checkbox';
 export * from './color-select';
 export * from './date-picker';
@@ -12,6 +15,7 @@ export * from './grid';
 export * from './icon-picker';
 export * from './input';
 export * from './input-number';
+export * from './kanban';
 export * from './markdown';
 export * from './menu';
 export * from './page';
@@ -20,6 +24,7 @@ export * from './radio';
 export * from './record-picker';
 export * from './row-selection';
 export * from './select';
+export * from './tabs';
 export * from './time-picker';
 export * from './tree-select';
 export * from './upload';
diff --git a/packages/client/src/schema-component/antd/kanban/Kanban.tsx b/packages/client/src/schema-component/antd/kanban/Kanban.tsx
new file mode 100644
index 000000000..076d07afb
--- /dev/null
+++ b/packages/client/src/schema-component/antd/kanban/Kanban.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const Kanban = () => {
+  return <div>Kanban</div>;
+};
diff --git a/packages/client/src/schema-component/antd/kanban/index.ts b/packages/client/src/schema-component/antd/kanban/index.ts
new file mode 100644
index 000000000..ce4b30166
--- /dev/null
+++ b/packages/client/src/schema-component/antd/kanban/index.ts
@@ -0,0 +1 @@
+export * from './Kanban';
diff --git a/packages/client/src/schema-component/antd/tabs/Tabs.tsx b/packages/client/src/schema-component/antd/tabs/Tabs.tsx
new file mode 100644
index 000000000..7a3aa0f96
--- /dev/null
+++ b/packages/client/src/schema-component/antd/tabs/Tabs.tsx
@@ -0,0 +1,25 @@
+import { observer, RecursionField, useField, useFieldSchema } from '@formily/react';
+import { TabPaneProps, Tabs as AntdTabs, TabsProps } from 'antd';
+import React from 'react';
+
+export const Tabs: any = observer((props: TabsProps) => {
+  const fieldSchema = useFieldSchema();
+  return (
+    <div>
+      <AntdTabs>
+        {fieldSchema.mapProperties((schema, key) => {
+          return (
+            <AntdTabs.TabPane tab={<RecursionField name={key} schema={schema} onlyRenderSelf />} key={key}>
+              <RecursionField name={key} schema={schema} onlyRenderProperties />
+            </AntdTabs.TabPane>
+          );
+        })}
+      </AntdTabs>
+    </div>
+  );
+});
+
+Tabs.TabPane = observer((props: TabPaneProps) => {
+  const field = useField();
+  return <>{props.tab || field.title}</>;
+});
diff --git a/packages/client/src/schema-component/antd/tabs/demos/demo1.tsx b/packages/client/src/schema-component/antd/tabs/demos/demo1.tsx
new file mode 100644
index 000000000..a91c59303
--- /dev/null
+++ b/packages/client/src/schema-component/antd/tabs/demos/demo1.tsx
@@ -0,0 +1,53 @@
+/**
+ * title: Tabs
+ */
+import { ISchema } from '@formily/react';
+import { SchemaComponent, SchemaComponentProvider, Tabs } from '@nocobase/client';
+import React from 'react';
+
+const schema: ISchema = {
+  type: 'object',
+  properties: {
+    tabs1: {
+      type: 'void',
+      'x-component': 'Tabs',
+      'x-component-props': {},
+      properties: {
+        tab1: {
+          type: 'void',
+          title: 'Tab1',
+          'x-component': 'Tabs.TabPane',
+          'x-component-props': {
+            tab: 'Tab1',
+          },
+          properties: {
+            aaa: {
+              'x-content': 'Hello1',
+            },
+          },
+        },
+        tab2: {
+          type: 'void',
+          title: 'Tab2',
+          'x-component': 'Tabs.TabPane',
+          'x-component-props': {
+            tab: 'Tab2',
+          },
+          properties: {
+            aaa: {
+              'x-content': 'Hello2',
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export default () => {
+  return (
+    <SchemaComponentProvider components={{ Tabs }}>
+      <SchemaComponent schema={schema} />
+    </SchemaComponentProvider>
+  );
+};
diff --git a/packages/client/src/schema-component/antd/tabs/index.md b/packages/client/src/schema-component/antd/tabs/index.md
index b97a90eb3..bdfa29075 100644
--- a/packages/client/src/schema-component/antd/tabs/index.md
+++ b/packages/client/src/schema-component/antd/tabs/index.md
@@ -9,3 +9,7 @@ group:
 
 - Tabs
 - Tabs.TabPane
+
+## Examples
+
+<code src="./demos/demo1.tsx" />
diff --git a/packages/client/src/schema-component/antd/tabs/index.ts b/packages/client/src/schema-component/antd/tabs/index.ts
new file mode 100644
index 000000000..856dbbb34
--- /dev/null
+++ b/packages/client/src/schema-component/antd/tabs/index.ts
@@ -0,0 +1 @@
+export * from './Tabs';
diff --git a/yarn.lock b/yarn.lock
index f3bdbbdb1..ffb2f7814 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1257,27 +1257,27 @@
   dependencies:
     tslib "^2.0.0"
 
-"@dnd-kit/core@^4.0.3":
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-4.0.3.tgz#49abe3c9b481b6e07909df1781e88b20f3dd25b0"
-  integrity sha512-uT1uHZxKx3iEkupmLfknMIvbykMJSetoXXmra6sGGvtWy+OMKrWm3axH2c90+JC/q6qaeKs2znd3Qs8GLnCa5Q==
+"@dnd-kit/core@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/@dnd-kit/core/-/core-5.0.1.tgz#ae8c01ca5a91083ab31bbd8c839c552e5cf62c26"
+  integrity sha512-h02GyHb2KqbpqbELA9QW5WVLdnAQODgZs8Nv15PTg/VpEpQxEkLPn0QHqiMSSOOFBx0qJOowwYh6ggfL1ZIJPQ==
   dependencies:
     "@dnd-kit/accessibility" "^3.0.0"
-    "@dnd-kit/utilities" "^3.0.1"
+    "@dnd-kit/utilities" "^3.1.0"
     tslib "^2.0.0"
 
-"@dnd-kit/sortable@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-5.1.0.tgz#f30ec12c95ca5aa90e2e4d9ef3dbe16b3eb26d69"
-  integrity sha512-CPyiUHbTrSYzhddfgdeoX0ERg/dEyVKIWx9+4O6uqpoppo84SXCBHVFiFBRVpQ9wtpsXs7prtUAnAUTcvFQTZg==
+"@dnd-kit/sortable@^6.0.0":
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-6.0.0.tgz#289c06ec594fb519d75cdf04ac5de7359b14f068"
+  integrity sha512-Kf0HO/rbFpd7HxXGEvxXtxBgPI6+IQuxRXDdFz6XKLhylxuDMEomi1netrhS+253KrOZ68V+sjqOmfE2RreLeQ==
   dependencies:
-    "@dnd-kit/utilities" "^3.0.0"
+    "@dnd-kit/utilities" "^3.1.0"
     tslib "^2.0.0"
 
-"@dnd-kit/utilities@^3.0.0", "@dnd-kit/utilities@^3.0.1":
-  version "3.0.2"
-  resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.0.2.tgz#24fd796491a85c2904e9c97f1fdb42005df645f2"
-  integrity sha512-J4WpZXKbLJzBkuALqsIy5KmQr6PQk86ixoPKoixzjWj1+XGE5KdA2vga9Vf43EB/Ewpng+E5SmXVLfTs7ukbhw==
+"@dnd-kit/utilities@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.1.0.tgz#330ef24303da05f85ff20bb8f74b385c96caee58"
+  integrity sha512-2JBdIgjJ7xjMRpKagdMuYKWJdDoVVw9Wc6lfMrLjrq8t4QlMEjtsab5JVUlzWvHgANn7w3Y3VhalFfbp4dQrKg==
   dependencies:
     tslib "^2.0.0"