diff --git a/apps/docs/content/components/divider/usage.raw.jsx b/apps/docs/content/components/divider/usage.raw.jsx
new file mode 100644
index 0000000000..580e85126f
--- /dev/null
+++ b/apps/docs/content/components/divider/usage.raw.jsx
@@ -0,0 +1,20 @@
+import {Divider} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="max-w-md">
+      <div className="space-y-1">
+        <h4 className="text-medium font-medium">NextUI Components</h4>
+        <p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
+      </div>
+      <Divider className="my-4" />
+      <div className="flex h-5 items-center space-x-4 text-small">
+        <div>Blog</div>
+        <Divider orientation="vertical" />
+        <div>Docs</div>
+        <Divider orientation="vertical" />
+        <div>Source</div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/divider/usage.ts b/apps/docs/content/components/divider/usage.ts
index d3509c6414..1118304c37 100644
--- a/apps/docs/content/components/divider/usage.ts
+++ b/apps/docs/content/components/divider/usage.ts
@@ -1,23 +1,4 @@
-const App = `import {Divider} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="max-w-md">
-      <div className="space-y-1">
-        <h4 className="text-medium font-medium">NextUI Components</h4>
-        <p className="text-small text-default-400">Beautiful, fast and modern React UI library.</p>
-      </div>
-      <Divider className="my-4" />
-      <div className="flex h-5 items-center space-x-4 text-small">
-        <div>Blog</div>
-        <Divider orientation="vertical" />
-        <div>Docs</div>
-        <Divider orientation="vertical" />
-        <div>Source</div>
-      </div>
-    </div>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,