diff --git a/packages/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/client/src/schema-component/antd/block-item/BlockItem.tsx
index 3e5cb497d..69aefe9f9 100644
--- a/packages/client/src/schema-component/antd/block-item/BlockItem.tsx
+++ b/packages/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
-import { useDesignable } from '../..';
 import { SortableItem } from '../../common';
 
 export const BlockItem: React.FC<any> = (props) => {
-  const { DesignableBar } = useDesignable();
   return (
-    <SortableItem>
+    <SortableItem className={'nb-block-item'} style={{ position: 'relative' }}>
       {props.children}
-      <DesignableBar />
     </SortableItem>
   );
 };
diff --git a/packages/client/src/schema-component/antd/grid/demos/demo2.tsx b/packages/client/src/schema-component/antd/grid/demos/demo2.tsx
index 99ec6eafa..0bbb08fe9 100644
--- a/packages/client/src/schema-component/antd/grid/demos/demo2.tsx
+++ b/packages/client/src/schema-component/antd/grid/demos/demo2.tsx
@@ -9,6 +9,7 @@ import {
   SchemaComponent,
   SchemaComponentProvider,
   SchemaInitializer,
+  SchemaInitializerItemOptions,
   useDesignable
 } from '@nocobase/client';
 import { Switch } from 'antd';
@@ -67,10 +68,11 @@ const schema: ISchema = {
 const useFormItemInitializerFields = () => {
   return [
     {
-      key: 'name',
+      type: 'item',
       title: 'Name',
       component: InitializeFormItem,
       schema: {
+        name: 'name',
         type: 'string',
         title: 'Name',
         'x-component': 'Input',
@@ -79,10 +81,11 @@ const useFormItemInitializerFields = () => {
       },
     },
     {
-      key: 'title',
+      type: 'item',
       title: 'Title',
       component: InitializeFormItem,
       schema: {
+        name: 'title',
         type: 'string',
         title: 'Title',
         'x-component': 'Input',
@@ -90,7 +93,7 @@ const useFormItemInitializerFields = () => {
         'x-collection-field': 'posts.title',
       },
     },
-  ];
+  ] as SchemaInitializerItemOptions[];
 };
 
 const gridRowColWrap = (schema: ISchema) => {
@@ -116,6 +119,7 @@ const AddGridFormItem = observer((props: any) => {
       insertPosition={'beforeEnd'}
       items={[
         {
+          type: 'itemGroup',
           title: 'Display fields',
           children: useFormItemInitializerFields(),
         },
@@ -123,6 +127,7 @@ const AddGridFormItem = observer((props: any) => {
           type: 'divider',
         },
         {
+          type: 'item',
           title: 'Add text',
           component: InitializeTextFormItem,
         },
@@ -161,9 +166,11 @@ const useCurrentFieldSchema = (path: string) => {
   };
 };
 
-const InitializeFormItem = (props) => {
-  const { title, schema, insert } = props;
-  const { exists, remove } = useCurrentFieldSchema(schema['x-collection-field']);
+const itemWrap = SchemaInitializer.itemWrap;
+
+const InitializeFormItem = itemWrap((props) => {
+  const { item, insert } = props;
+  const { schema, exists, remove } = useCurrentFieldSchema(item.schema['x-collection-field']);
   return (
     <SchemaInitializer.Item
       onClick={() => {
@@ -171,22 +178,22 @@ const InitializeFormItem = (props) => {
           return remove();
         }
         insert({
-          ...schema,
+          ...item.schema,
         });
       }}
     >
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        {title} <Switch size={'small'} checked={exists} />
+        {item.title} <Switch size={'small'} checked={exists} />
       </div>
     </SchemaInitializer.Item>
   );
-};
+});
 
-const InitializeTextFormItem = (props) => {
-  const { title, insert } = props;
+const InitializeTextFormItem = itemWrap((props) => {
+  const { insert } = props;
   return (
     <SchemaInitializer.Item
-      onClick={(info) => {
+      onClick={() => {
         insert({
           type: 'void',
           'x-component': 'Markdown.Void',
@@ -194,11 +201,9 @@ const InitializeTextFormItem = (props) => {
           // 'x-editable': false,
         });
       }}
-    >
-      {title}
-    </SchemaInitializer.Item>
+    />
   );
-};
+});
 
 export default function App() {
   return (
diff --git a/packages/client/src/schema-component/antd/grid/demos/demo3.tsx b/packages/client/src/schema-component/antd/grid/demos/demo3.tsx
index 103140156..053f5d660 100644
--- a/packages/client/src/schema-component/antd/grid/demos/demo3.tsx
+++ b/packages/client/src/schema-component/antd/grid/demos/demo3.tsx
@@ -51,15 +51,16 @@ const AddGridBlockItem = observer((props: any) => {
       insertPosition={'beforeEnd'}
       items={[
         {
+          type: 'itemGroup',
           title: 'Data blocks',
           children: [
             {
-              key: 'table',
+              type: 'item',
               title: 'Table',
               component: TableBlockInitializerItem,
             },
             {
-              key: 'form',
+              type: 'item',
               title: 'Form',
               component: FormBlockInitializerItem,
             },
@@ -72,12 +73,14 @@ const AddGridBlockItem = observer((props: any) => {
   );
 });
 
-const TableBlockInitializerItem = (props) => {
+const itemWrap = SchemaInitializer.itemWrap;
+
+const TableBlockInitializerItem = itemWrap((props) => {
   const { insert } = props;
   return (
     <SchemaInitializer.Item
       icon={<TableOutlined />}
-      onClick={(info) => {
+      onClick={() => {
         insert({
           type: 'void',
           'x-component': 'VoidTable',
@@ -90,11 +93,13 @@ const TableBlockInitializerItem = (props) => {
           title: 'select a data source',
           children: [
             {
-              key: 'users',
+              type: 'item',
+              name: 'users',
               title: 'Users',
             },
             {
-              key: 'posts',
+              type: 'item',
+              name: 'posts',
               title: 'Posts',
             },
           ],
@@ -104,14 +109,14 @@ const TableBlockInitializerItem = (props) => {
       Table
     </SchemaInitializer.Item>
   );
-};
+});
 
-const FormBlockInitializerItem = (props) => {
+const FormBlockInitializerItem = itemWrap((props) => {
   const { insert } = props;
   return (
     <SchemaInitializer.Item
       icon={<FormOutlined />}
-      onClick={(info) => {
+      onClick={() => {
         insert({
           type: 'void',
           'x-component': 'Form',
@@ -124,11 +129,13 @@ const FormBlockInitializerItem = (props) => {
           title: 'select a data source',
           children: [
             {
-              key: 'users',
+              type: 'item',
+              name: 'users',
               title: 'Users',
             },
             {
-              key: 'posts',
+              type: 'item',
+              name: 'posts',
               title: 'Posts',
             },
           ],
@@ -138,7 +145,7 @@ const FormBlockInitializerItem = (props) => {
       Form
     </SchemaInitializer.Item>
   );
-};
+});
 
 export default function App() {
   return (
diff --git a/packages/client/src/schema-component/common/sortable-item/SortableItem.tsx b/packages/client/src/schema-component/common/sortable-item/SortableItem.tsx
index 88f6aeb23..0f9517ef8 100644
--- a/packages/client/src/schema-component/common/sortable-item/SortableItem.tsx
+++ b/packages/client/src/schema-component/common/sortable-item/SortableItem.tsx
@@ -5,30 +5,33 @@ import React, { createContext, useContext } from 'react';
 export const DraggableContext = createContext(null);
 
 export const Sortable = (props: any) => {
+  const { id, data, style, children, ...others } = props;
   const draggable = useDraggable({
-    id: props.id,
-    data: props.data,
+    id,
+    data,
   });
 
   const { isOver, setNodeRef } = useDroppable({
-    id: props.id,
-    data: props.data,
+    id,
+    data,
   });
 
-  const droppableStyle = {
-    color: isOver ? 'green' : undefined,
-  };
+  const droppableStyle = { ...style };
+
+  if (isOver) {
+    droppableStyle['color'] = 'green';
+  }
 
   return (
     <DraggableContext.Provider value={draggable}>
-      <div ref={setNodeRef} style={droppableStyle}>
-        {props.children}
+      <div {...others} ref={setNodeRef} style={droppableStyle}>
+        {children}
       </div>
     </DraggableContext.Provider>
   );
 };
 
-export const SortableItem = observer((props) => {
+export const SortableItem: React.FC<any> = observer((props) => {
   const field = useField();
   const fieldSchema = useFieldSchema();
   const onInsertAdjacent = ({ dn, orginDraggedParentSchema }) => {
@@ -38,6 +41,7 @@ export const SortableItem = observer((props) => {
   };
   return (
     <Sortable
+      {...props}
       id={field.address.toString()}
       data={{ insertAdjacent: 'afterEnd', onInsertAdjacent, schema: fieldSchema }}
     >
diff --git a/packages/client/src/schema-initializer/demos/demo3.tsx b/packages/client/src/schema-initializer/demos/demo3.tsx
index 9f6e82a89..6932527d4 100644
--- a/packages/client/src/schema-initializer/demos/demo3.tsx
+++ b/packages/client/src/schema-initializer/demos/demo3.tsx
@@ -21,6 +21,7 @@ const useFormItemInitializerFields = () => {
       schema: {
         type: 'string',
         title: 'Name',
+        name: 'name',
         'x-component': 'Input',
         'x-decorator': 'FormItem',
         'x-collection-field': 'posts.name',
@@ -33,6 +34,7 @@ const useFormItemInitializerFields = () => {
       schema: {
         type: 'string',
         title: 'Title',
+        name: 'title',
         'x-component': 'Input',
         'x-decorator': 'FormItem',
         'x-collection-field': 'posts.title',