diff --git a/.changeset/mean-taxis-tie.md b/.changeset/mean-taxis-tie.md
index 8cd353a316..4ba331699d 100644
--- a/.changeset/mean-taxis-tie.md
+++ b/.changeset/mean-taxis-tie.md
@@ -3,4 +3,5 @@
 ---
 
 - add support for custom tailwind prefix
+- add `extend` and `create` to `lib/utils.tsx`
 - minify build
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
index f9db7f80a3..ac35337496 100644
--- a/apps/www/content/docs/components/changelog.mdx
+++ b/apps/www/content/docs/components/changelog.mdx
@@ -10,6 +10,10 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## December 2023 #6
 
+### December 23 #6.2
+
+- add `extend` and `create` to `lib/utils.tsx`
+
 ### December 10 #6.1
 
 - `image-element`: wrap the component with `withHOC(ResizableProvide, ...)`
diff --git a/apps/www/src/lib/utils.ts b/apps/www/src/lib/utils.ts
deleted file mode 100644
index bf6e9cf52e..0000000000
--- a/apps/www/src/lib/utils.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-import type { ClassValue } from 'clsx';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-export function formatDate(input: string | number): string {
-  const date = new Date(input);
-  return date.toLocaleDateString('en-US', {
-    month: 'long',
-    day: 'numeric',
-    year: 'numeric',
-  });
-}
-
-export function absoluteUrl(path: string) {
-  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
-}
diff --git a/apps/www/src/lib/utils.tsx b/apps/www/src/lib/utils.tsx
new file mode 100644
index 0000000000..a6d615d55c
--- /dev/null
+++ b/apps/www/src/lib/utils.tsx
@@ -0,0 +1,53 @@
+import {
+  createElement,
+  ElementRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+} from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+import type { ClassValue } from 'clsx';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function extend<T extends { className?: string }>(
+  Component: ForwardRefExoticComponent<T>,
+  defaultProps: T
+) {
+  return forwardRef<ElementRef<typeof Component>, T>(
+    function ExtendComponent(props, ref) {
+      return (
+        <Component
+          ref={ref}
+          {...defaultProps}
+          {...props}
+          className={cn(defaultProps.className, props.className)}
+        />
+      );
+    }
+  );
+}
+
+export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
+  return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
+    function CreateComponent(props, ref) {
+      return createElement(tag, { ...props, ref });
+    }
+  );
+}
+
+export function formatDate(input: string | number): string {
+  const date = new Date(input);
+  return date.toLocaleDateString('en-US', {
+    month: 'long',
+    day: 'numeric',
+    year: 'numeric',
+  });
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
+}
diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts
index 8ab4bc92d8..e38c388008 100644
--- a/packages/cli/src/commands/init.ts
+++ b/packages/cli/src/commands/init.ts
@@ -266,9 +266,9 @@ export async function runInit(cwd: string, config: Config) {
     );
   }
 
-  // Write cn file.
+  // Write utils file.
   await fs.writeFile(
-    `${config.resolvedPaths.utils}.ts`,
+    `${config.resolvedPaths.utils}.tsx`,
     templates.UTILS,
     'utf8'
   );
diff --git a/packages/cli/src/utils/templates.ts b/packages/cli/src/utils/templates.ts
index f3a115ef19..717d2d36f7 100644
--- a/packages/cli/src/utils/templates.ts
+++ b/packages/cli/src/utils/templates.ts
@@ -1,9 +1,41 @@
-export const UTILS = `import { type ClassValue, clsx } from 'clsx'
+export const UTILS = `import {
+  createElement,
+  ElementRef,
+  forwardRef,
+  ForwardRefExoticComponent,
+} from 'react';
+import { type ClassValue, clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function extend<T extends { className?: string }>(
+  Component: ForwardRefExoticComponent<T>,
+  defaultProps: T
+) {
+  return forwardRef<ElementRef<typeof Component>, T>(
+    function ExtendComponent(props, ref) {
+      return (
+        <Component
+          ref={ref}
+          {...defaultProps}
+          {...props}
+          className={cn(defaultProps.className, props.className)}
+        />
+      );
+    }
+  );
+}
+
+export function create<T extends keyof HTMLElementTagNameMap>(tag: T) {
+  return forwardRef<HTMLElementTagNameMap[T], JSX.IntrinsicElements[T]>(
+    function CreateComponent(props, ref) {
+      return createElement(tag, { ...props, ref });
+    }
+  );
+}
 `;
 
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
diff --git a/packages/cli/test/commands/init.test.ts b/packages/cli/test/commands/init.test.ts
index e907a0186d..3f7eb5e954 100644
--- a/packages/cli/test/commands/init.test.ts
+++ b/packages/cli/test/commands/init.test.ts
@@ -68,7 +68,7 @@ test('init config-full', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/src\/lib\/utils.ts$/),
+    expect.stringMatching(/src\/lib\/utils.tsx$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );
@@ -138,7 +138,7 @@ test('init config-partial', async () => {
   );
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
-    expect.stringMatching(/utils.ts$/),
+    expect.stringMatching(/utils.tsx$/),
     expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
     'utf8'
   );