diff --git a/apps/www/public/r/styles/default/blockquote-element.json b/apps/www/public/r/styles/default/blockquote-element.json
index fe52c725a3..1ce2e158f5 100644
--- a/apps/www/public/r/styles/default/blockquote-element.json
+++ b/apps/www/public/r/styles/default/blockquote-element.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"blockquote\"\n        className={cn('my-1 border-l-2 pl-6 italic', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const BlockquoteElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateElement\n        ref={ref}\n        as=\"blockquote\"\n        className={cn('my-1 border-l-2 pl-6 italic', className)}\n        {...props}\n      >\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/blockquote-element.tsx",
       "target": "components/plate-ui/blockquote-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/code-block-element.json b/apps/www/public/r/styles/default/code-block-element.json
index cd725717c0..1c4dc95286 100644
--- a/apps/www/public/r/styles/default/code-block-element.json
+++ b/apps/www/public/r/styles/default/code-block-element.json
@@ -19,7 +19,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n\n    const state = useCodeBlockElementState({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative py-1', state.className, className)}\n        {...props}\n      >\n        <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n          <code>{children}</code>\n        </pre>\n\n        {state.syntax && (\n          <div\n            className=\"absolute right-2 top-2 z-10 select-none\"\n            contentEditable={false}\n          >\n            <CodeBlockCombobox />\n          </div>\n        )}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { useCodeBlockElementState } from '@udecode/plate-code-block/react';\n\nimport { CodeBlockCombobox } from './code-block-combobox';\nimport { PlateElement } from './plate-element';\n\nimport './code-block-element.css';\n\nexport const CodeBlockElement = withRef<typeof PlateElement>(\n  ({ children, className, ...props }, ref) => {\n    const { element } = props;\n\n    const state = useCodeBlockElementState({ element });\n\n    return (\n      <PlateElement\n        ref={ref}\n        className={cn('relative py-1', state.className, className)}\n        {...props}\n      >\n        <pre className=\"overflow-x-auto rounded-md bg-muted px-6 py-8 font-mono text-sm leading-[normal] [tab-size:2]\">\n          <code>{children}</code>\n        </pre>\n\n        {state.syntax && (\n          <div\n            className=\"absolute right-2 top-2 z-10 select-none\"\n            contentEditable={false}\n          >\n            <CodeBlockCombobox />\n          </div>\n        )}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/code-block-element.tsx",
       "target": "components/plate-ui/code-block-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/code-leaf.json b/apps/www/public/r/styles/default/code-leaf.json
index f4b4071eed..86d16f678f 100644
--- a/apps/www/public/r/styles/default/code-leaf.json
+++ b/apps/www/public/r/styles/default/code-leaf.json
@@ -16,7 +16,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateLeaf\n        ref={ref}\n        asChild\n        className={cn(\n          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',\n          className\n        )}\n        {...props}\n      >\n        <code>{children}</code>\n      </PlateLeaf>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { cn, withRef } from '@udecode/cn';\nimport { PlateLeaf } from '@udecode/plate-common/react';\n\nexport const CodeLeaf = withRef<typeof PlateLeaf>(\n  ({ children, className, ...props }, ref) => {\n    return (\n      <PlateLeaf\n        ref={ref}\n        asChild\n        className={cn(\n          'whitespace-pre-wrap rounded-md bg-muted px-[0.3em] py-[0.2em] font-mono text-sm',\n          className\n        )}\n        {...props}\n      >\n        <code>{children}</code>\n      </PlateLeaf>\n    );\n  }\n);\n",
       "path": "plate-ui/code-leaf.tsx",
       "target": "components/plate-ui/code-leaf.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/code-line-element.json b/apps/www/public/r/styles/default/code-line-element.json
index 50836f0127..402b44c06e 100644
--- a/apps/www/public/r/styles/default/code-line-element.json
+++ b/apps/www/public/r/styles/default/code-line-element.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n  <PlateElement ref={ref} {...props} />\n));\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\n\nimport { PlateElement } from './plate-element';\n\nexport const CodeLineElement = withRef<typeof PlateElement>((props, ref) => (\n  <PlateElement ref={ref} {...props} />\n));\n",
       "path": "plate-ui/code-line-element.tsx",
       "target": "components/plate-ui/code-line-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/excalidraw-element.json b/apps/www/public/r/styles/default/excalidraw-element.json
index f8c27fdd12..86aa4d04ed 100644
--- a/apps/www/public/r/styles/default/excalidraw-element.json
+++ b/apps/www/public/r/styles/default/excalidraw-element.json
@@ -12,7 +12,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ExcalidrawElement = withRef<typeof PlateElement>(\n  ({ nodeProps, ...props }, ref) => {\n    const { children, element } = props;\n\n    const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n      element,\n    });\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div contentEditable={false}>\n          <div className=\"mx-auto aspect-video h-[600px] w-[min(100%,600px)] overflow-hidden rounded-sm border\">\n            {Excalidraw && (\n              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />\n            )}\n          </div>\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef } from '@udecode/cn';\nimport { useExcalidrawElement } from '@udecode/plate-excalidraw/react';\n\nimport { PlateElement } from './plate-element';\n\nexport const ExcalidrawElement = withRef<typeof PlateElement>(\n  ({ nodeProps, ...props }, ref) => {\n    const { children, element } = props;\n\n    const { Excalidraw, excalidrawProps } = useExcalidrawElement({\n      element,\n    });\n\n    return (\n      <PlateElement ref={ref} {...props}>\n        <div contentEditable={false}>\n          <div className=\"mx-auto aspect-video h-[600px] w-[min(100%,600px)] overflow-hidden rounded-sm border\">\n            {Excalidraw && (\n              <Excalidraw {...nodeProps} {...(excalidrawProps as any)} />\n            )}\n          </div>\n        </div>\n        {children}\n      </PlateElement>\n    );\n  }\n);\n",
       "path": "plate-ui/excalidraw-element.tsx",
       "target": "components/plate-ui/excalidraw-element.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/indent-fire-marker.json b/apps/www/public/r/styles/default/indent-fire-marker.json
index 583de8c741..7a321d114b 100644
--- a/apps/www/public/r/styles/default/indent-fire-marker.json
+++ b/apps/www/public/r/styles/default/indent-fire-marker.json
@@ -4,7 +4,7 @@
   ],
   "files": [
     {
-      "content": "import type { PlateRenderElementProps } from '@udecode/plate-common/react';\nimport type { TIndentElement } from '@udecode/plate-indent';\n\nexport const FireMarker = (\n  props: Omit<PlateRenderElementProps, 'children'>\n) => {\n  const { element } = props;\n\n  return (\n    <div contentEditable={false}>\n      <span style={{ left: -26, position: 'absolute', top: -1 }}>\n        {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}\n      </span>\n    </div>\n  );\n};\n\nexport const FireLiComponent = (props: PlateRenderElementProps) => {\n  const { children } = props;\n\n  return <span>{children}</span>;\n};\n",
+      "content": "import type { PlateRenderElementStaticProps } from '@udecode/plate-common';\nimport type { TIndentElement } from '@udecode/plate-indent';\n\nexport const FireMarker = (\n  props: Omit<PlateRenderElementStaticProps, 'children'>\n) => {\n  const { element } = props;\n\n  return (\n    <div contentEditable={false}>\n      <span style={{ left: -26, position: 'absolute', top: -1 }}>\n        {(element as TIndentElement).indent % 2 === 0 ? '🔥' : '🚀'}\n      </span>\n    </div>\n  );\n};\n\nexport const FireLiComponent = (props: PlateRenderElementStaticProps) => {\n  const { children } = props;\n\n  return <span>{children}</span>;\n};\n",
       "path": "plate-ui/indent-fire-marker.tsx",
       "target": "components/plate-ui/indent-fire-marker.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/indent-todo-marker.json b/apps/www/public/r/styles/default/indent-todo-marker.json
index 53c9ce2736..67e73c17a7 100644
--- a/apps/www/public/r/styles/default/indent-todo-marker.json
+++ b/apps/www/public/r/styles/default/indent-todo-marker.json
@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport type { PlateRenderElementProps } from '@udecode/plate-common/react';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useIndentTodoListElement,\n  useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n  element,\n}: Omit<PlateRenderElementProps, 'children'>) => {\n  const state = useIndentTodoListElementState({ element });\n  const { checkboxProps } = useIndentTodoListElement(state);\n\n  return (\n    <div contentEditable={false}>\n      <Checkbox\n        style={{ left: -24, position: 'absolute', top: 4 }}\n        {...checkboxProps}\n      />\n    </div>\n  );\n};\n\nexport const TodoLi = (props: PlateRenderElementProps) => {\n  const { children, element } = props;\n\n  return (\n    <span\n      className={cn(\n        (element.checked as boolean) && 'text-muted-foreground line-through'\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n",
+      "content": "'use client';\n\nimport type { PlateRenderElementStaticProps } from '@udecode/plate-common';\n\nimport { cn } from '@udecode/cn';\nimport {\n  useIndentTodoListElement,\n  useIndentTodoListElementState,\n} from '@udecode/plate-indent-list/react';\n\nimport { Checkbox } from './checkbox';\n\nexport const TodoMarker = ({\n  element,\n}: Omit<PlateRenderElementStaticProps, 'children'>) => {\n  const state = useIndentTodoListElementState({ element });\n  const { checkboxProps } = useIndentTodoListElement(state);\n\n  return (\n    <div contentEditable={false}>\n      <Checkbox\n        style={{ left: -24, position: 'absolute', top: 4 }}\n        {...checkboxProps}\n      />\n    </div>\n  );\n};\n\nexport const TodoLi = (props: PlateRenderElementStaticProps) => {\n  const { children, element } = props;\n\n  return (\n    <span\n      className={cn(\n        (element.checked as boolean) && 'text-muted-foreground line-through'\n      )}\n    >\n      {children}\n    </span>\n  );\n};\n",
       "path": "plate-ui/indent-todo-marker.tsx",
       "target": "components/plate-ui/indent-todo-marker.tsx",
       "type": "registry:ui"
diff --git a/apps/www/public/r/styles/default/more-dropdown-menu.json b/apps/www/public/r/styles/default/more-dropdown-menu.json
index 4c38f4be21..64020aeb8c 100644
--- a/apps/www/public/r/styles/default/more-dropdown-menu.json
+++ b/apps/www/public/r/styles/default/more-dropdown-menu.json
@@ -18,7 +18,7 @@
   },
   "files": [
     {
-      "content": "'use client';\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  SubscriptPlugin,\n  SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\">\n          <MoreHorizontalIcon />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({ key: KbdPlugin.key });\n              collapseSelection(editor, { edge: 'end' });\n              focusEditor(editor);\n            }}\n          >\n            <KeyboardIcon />\n            Keyboard input\n          </DropdownMenuItem>\n\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SuperscriptPlugin.key,\n                clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SuperscriptIcon />\n            Superscript\n            {/* (⌘+,) */}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SubscriptPlugin.key,\n                clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SubscriptIcon />\n            Subscript\n            {/* (⌘+.) */}\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport type { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\n\nimport {\n  SubscriptPlugin,\n  SuperscriptPlugin,\n} from '@udecode/plate-basic-marks/react';\nimport { collapseSelection } from '@udecode/plate-common';\nimport { focusEditor, useEditorRef } from '@udecode/plate-common/react';\nimport { KbdPlugin } from '@udecode/plate-kbd/react';\nimport {\n  KeyboardIcon,\n  MoreHorizontalIcon,\n  SubscriptIcon,\n  SuperscriptIcon,\n} from 'lucide-react';\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n  useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function MoreDropdownMenu(props: DropdownMenuProps) {\n  const editor = useEditorRef();\n  const openState = useOpenState();\n\n  return (\n    <DropdownMenu modal={false} {...openState} {...props}>\n      <DropdownMenuTrigger asChild>\n        <ToolbarButton pressed={openState.open} tooltip=\"Insert\">\n          <MoreHorizontalIcon />\n        </ToolbarButton>\n      </DropdownMenuTrigger>\n\n      <DropdownMenuContent\n        className=\"ignore-click-outside/toolbar flex max-h-[500px] min-w-[180px] flex-col overflow-y-auto\"\n        align=\"start\"\n      >\n        <DropdownMenuGroup>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({ key: KbdPlugin.key });\n              collapseSelection(editor, { edge: 'end' });\n              focusEditor(editor);\n            }}\n          >\n            <KeyboardIcon />\n            Keyboard input\n          </DropdownMenuItem>\n\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SuperscriptPlugin.key,\n                clear: [SubscriptPlugin.key, SuperscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SuperscriptIcon />\n            Superscript\n            {/* (⌘+,) */}\n          </DropdownMenuItem>\n          <DropdownMenuItem\n            onSelect={() => {\n              editor.tf.toggle.mark({\n                key: SubscriptPlugin.key,\n                clear: [SuperscriptPlugin.key, SubscriptPlugin.key],\n              });\n              focusEditor(editor);\n            }}\n          >\n            <SubscriptIcon />\n            Subscript\n            {/* (⌘+.) */}\n          </DropdownMenuItem>\n        </DropdownMenuGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n",
       "path": "plate-ui/more-dropdown-menu.tsx",
       "target": "components/plate-ui/more-dropdown-menu.tsx",
       "type": "registry:ui"
diff --git a/apps/www/src/app/(app)/dev/page.tsx b/apps/www/src/app/(app)/dev/page.tsx
index 5607644951..388284ca36 100644
--- a/apps/www/src/app/(app)/dev/page.tsx
+++ b/apps/www/src/app/(app)/dev/page.tsx
@@ -291,8 +291,8 @@ export default function DevPage() {
   return (
     <PlateStatic
       variant="demo"
+      components={staticComponents}
       editor={editorStatic}
-      staticComponents={staticComponents}
     />
   );
 }
diff --git a/apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx b/apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx
index c7fdd4f91b..3cf6d3b62a 100644
--- a/apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx
+++ b/apps/www/src/registry/default/plate-ui/code-syntax-leaf-static.tsx
@@ -4,6 +4,9 @@ import type { PlateLeafStaticProps } from '@udecode/plate-common';
 
 import { PlateLeafStatic } from '@udecode/plate-common';
 
-export function CodeSyntaxLeafStatic({ children, ...props }: PlateLeafStaticProps) {
+export function CodeSyntaxLeafStatic({
+  children,
+  ...props
+}: PlateLeafStaticProps) {
   return <PlateLeafStatic {...props}>{children}</PlateLeafStatic>;
 }
diff --git a/apps/www/src/registry/default/plate-ui/editor-static.tsx b/apps/www/src/registry/default/plate-ui/editor-static.tsx
index e01f43e7d4..40fcfa7d76 100644
--- a/apps/www/src/registry/default/plate-ui/editor-static.tsx
+++ b/apps/www/src/registry/default/plate-ui/editor-static.tsx
@@ -58,6 +58,7 @@ export function PlateStatic({
         }),
         className
       )}
+      disableDefaultStyles
       {...props}
     />
   );
diff --git a/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx b/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx
index f7114f06a1..2a84e65801 100644
--- a/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-fire-marker-static.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 import type { TIndentElement } from '@udecode/plate-indent';
 
 export function FireMarkerStatic({
   element,
-}: Omit<PlateRenderElementProps, 'children'>) {
+}: Omit<PlateRenderElementStaticProps, 'children'>) {
   return (
     <div contentEditable={false}>
       <span style={{ left: -26, position: 'absolute', top: -1 }}>
@@ -15,8 +15,8 @@ export function FireMarkerStatic({
   );
 }
 
-export function FireLiComponentStatic(props: PlateRenderElementProps) {
-  const { children } = props;
-
+export function FireLiComponentStatic({
+  children,
+}: PlateRenderElementStaticProps) {
   return <span>{children}</span>;
 }
diff --git a/apps/www/src/registry/default/plate-ui/indent-fire-marker.tsx b/apps/www/src/registry/default/plate-ui/indent-fire-marker.tsx
index 5887dcd5ac..3949a08291 100644
--- a/apps/www/src/registry/default/plate-ui/indent-fire-marker.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-fire-marker.tsx
@@ -1,8 +1,8 @@
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 import type { TIndentElement } from '@udecode/plate-indent';
 
 export const FireMarker = (
-  props: Omit<PlateRenderElementProps, 'children'>
+  props: Omit<PlateRenderElementStaticProps, 'children'>
 ) => {
   const { element } = props;
 
@@ -15,7 +15,7 @@ export const FireMarker = (
   );
 };
 
-export const FireLiComponent = (props: PlateRenderElementProps) => {
+export const FireLiComponent = (props: PlateRenderElementStaticProps) => {
   const { children } = props;
 
   return <span>{children}</span>;
diff --git a/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx b/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx
index ec8692a5da..3c49acc275 100644
--- a/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-todo-marker-static.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
 
@@ -8,7 +8,7 @@ import { CheckboxStatic } from './checkbox-static';
 
 export const TodoMarkerStatic = ({
   element,
-}: Omit<PlateRenderElementProps, 'children'>) => {
+}: Omit<PlateRenderElementStaticProps, 'children'>) => {
   return (
     <div contentEditable={false}>
       <CheckboxStatic
@@ -19,7 +19,7 @@ export const TodoMarkerStatic = ({
   );
 };
 
-export const TodoLiStatic = (props: PlateRenderElementProps) => {
+export const TodoLiStatic = (props: PlateRenderElementStaticProps) => {
   const { children, element } = props;
 
   return (
diff --git a/apps/www/src/registry/default/plate-ui/indent-todo-marker.tsx b/apps/www/src/registry/default/plate-ui/indent-todo-marker.tsx
index 9d441367b1..42496ba221 100644
--- a/apps/www/src/registry/default/plate-ui/indent-todo-marker.tsx
+++ b/apps/www/src/registry/default/plate-ui/indent-todo-marker.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import type { PlateRenderElementProps } from '@udecode/plate-common/react';
+import type { PlateRenderElementStaticProps } from '@udecode/plate-common';
 
 import { cn } from '@udecode/cn';
 import {
@@ -12,7 +12,7 @@ import { Checkbox } from './checkbox';
 
 export const TodoMarker = ({
   element,
-}: Omit<PlateRenderElementProps, 'children'>) => {
+}: Omit<PlateRenderElementStaticProps, 'children'>) => {
   const state = useIndentTodoListElementState({ element });
   const { checkboxProps } = useIndentTodoListElement(state);
 
@@ -26,7 +26,7 @@ export const TodoMarker = ({
   );
 };
 
-export const TodoLi = (props: PlateRenderElementProps) => {
+export const TodoLi = (props: PlateRenderElementStaticProps) => {
   const { children, element } = props;
 
   return (
diff --git a/packages/core/src/lib/static/components/PlateStatic.tsx b/packages/core/src/lib/static/components/PlateStatic.tsx
index 375faf6d05..41d472800a 100644
--- a/packages/core/src/lib/static/components/PlateStatic.tsx
+++ b/packages/core/src/lib/static/components/PlateStatic.tsx
@@ -5,11 +5,14 @@ import {
   type TElement,
   type TText,
   isElement,
+  isInline,
+  isVoid,
 } from '@udecode/slate';
 import clsx from 'clsx';
 
 import type { SlateEditor } from '../../editor';
 import type { NodeComponents } from '../../plugin';
+import type { RenderElementStaticProps } from '../pluginRenderElementStatic';
 
 import { pipeRenderElementStatic } from '../pipeRenderElementStatic';
 import { pipeRenderLeafStatic } from '../pluginRenderLeafStatic';
@@ -28,10 +31,21 @@ function ElementStatic({
     components,
   });
 
+  const attributes: RenderElementStaticProps['attributes'] = {
+    'data-slate-node': 'element',
+    ref: null,
+  };
+
+  if (isVoid(editor, element)) {
+    attributes['data-slate-void'] = true;
+  } else if (isInline(editor, element)) {
+    attributes['data-slate-inline'] = true;
+  }
+
   return (
     <React.Fragment>
       {renderElement?.({
-        attributes: { 'data-slate-node': 'element', ref: null },
+        attributes,
         children: (
           <Children components={components} editor={editor}>
             {element.children}
diff --git a/packages/core/src/lib/static/pluginRenderElementStatic.tsx b/packages/core/src/lib/static/pluginRenderElementStatic.tsx
index 0d1ccbebf6..0ada9f9cc4 100644
--- a/packages/core/src/lib/static/pluginRenderElementStatic.tsx
+++ b/packages/core/src/lib/static/pluginRenderElementStatic.tsx
@@ -8,7 +8,7 @@ import type { AnyEditorPlugin, NodeComponents } from '../plugin';
 import { PlateElementStatic } from './components/PlateElementStatic';
 import { getRenderNodeStaticProps } from './utils/getRenderNodeStaticProps';
 
-export type RenderElementStatic = (props: {
+export type RenderElementStaticProps = {
   attributes: {
     'data-slate-node': 'element';
     ref: any;
@@ -18,7 +18,11 @@ export type RenderElementStatic = (props: {
   };
   children: any;
   element: TElement;
-}) => React.ReactElement | undefined;
+};
+
+export type RenderElementStatic = (
+  props: RenderElementStaticProps
+) => React.ReactElement | undefined;
 
 export const pluginRenderElementStatic = (
   editor: SlateEditor,
diff --git a/packages/indent-list/src/lib/BaseIndentListPlugin.ts b/packages/indent-list/src/lib/BaseIndentListPlugin.ts
index 79ff26f4e2..29d56e7701 100644
--- a/packages/indent-list/src/lib/BaseIndentListPlugin.ts
+++ b/packages/indent-list/src/lib/BaseIndentListPlugin.ts
@@ -1,4 +1,5 @@
 import {
+  type PlateRenderElementStaticProps,
   type PluginConfig,
   type TElement,
   BaseParagraphPlugin,
diff --git a/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx b/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
index 142473fcff..ccc8880f76 100644
--- a/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
+++ b/packages/indent-list/src/lib/renderIndentListBelowNodes.tsx
@@ -1,9 +1,10 @@
 import React from 'react';
 
 import type {
-  NodeWrapperComponentProps,
-  NodeWrapperComponentReturnType,
-} from '@udecode/plate-common/react';
+  NodeStaticWrapperComponent,
+  NodeStaticWrapperComponentProps,
+  NodeStaticWrapperComponentReturnType,
+} from '@udecode/plate-common';
 
 import { clsx } from 'clsx';
 
@@ -14,9 +15,9 @@ import {
 } from '../lib';
 import { ULIST_STYLE_TYPES } from '../lib/types';
 
-export const renderIndentListBelowNodes = (
-  injectProps: NodeWrapperComponentProps<BaseIndentListConfig>
-): NodeWrapperComponentReturnType => {
+export const renderIndentListBelowNodes: NodeStaticWrapperComponent = (
+  injectProps: NodeStaticWrapperComponentProps<BaseIndentListConfig>
+): NodeStaticWrapperComponentReturnType => {
   const { element } = injectProps;
 
   const listStyleType = element[BaseIndentListPlugin.key] as string;