diff --git a/apps/docs/content/components/chip/avatar.raw.jsx b/apps/docs/content/components/chip/avatar.raw.jsx
new file mode 100644
index 0000000000..1eef36faa2
--- /dev/null
+++ b/apps/docs/content/components/chip/avatar.raw.jsx
@@ -0,0 +1,20 @@
+import {Chip, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        avatar={<Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+      <Chip
+        avatar={<Avatar getInitials={(name) => name.charAt(0)} name="JW" size="sm" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/avatar.ts b/apps/docs/content/components/chip/avatar.ts
index d0a767543d..4d86784b87 100644
--- a/apps/docs/content/components/chip/avatar.ts
+++ b/apps/docs/content/components/chip/avatar.ts
@@ -1,30 +1,4 @@
-const App = `import {Chip, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar
-            name="JW"
-            src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-          />
-        }
-      >
-        Avatar
-      </Chip>
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar name="JW" size="sm" getInitials={(name) => name.charAt(0)} />
-        }
-      >
-        Avatar
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./avatar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/close-button.raw.jsx b/apps/docs/content/components/chip/close-button.raw.jsx
new file mode 100644
index 0000000000..5e55351dda
--- /dev/null
+++ b/apps/docs/content/components/chip/close-button.raw.jsx
@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      {/* eslint-disable no-console */}
+      <Chip onClose={() => console.log("close")}>Chip</Chip>
+      {/* eslint-disable no-console */}
+      <Chip variant="bordered" onClose={() => console.log("close")}>
+        Chip
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/close-button.ts b/apps/docs/content/components/chip/close-button.ts
index 096eeba7dc..f0fdaba6b9 100644
--- a/apps/docs/content/components/chip/close-button.ts
+++ b/apps/docs/content/components/chip/close-button.ts
@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip onClose={() => console.log("close")}>Chip</Chip>
-      <Chip onClose={() => console.log("close")} variant="bordered">
-        Chip
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./close-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/colors.raw.jsx b/apps/docs/content/components/chip/colors.raw.jsx
new file mode 100644
index 0000000000..c61777b169
--- /dev/null
+++ b/apps/docs/content/components/chip/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="default">Default</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="danger">Danger</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/colors.ts b/apps/docs/content/components/chip/colors.ts
index ac0f61f8f5..d5bef810aa 100644
--- a/apps/docs/content/components/chip/colors.ts
+++ b/apps/docs/content/components/chip/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip color="default">Default</Chip>
-      <Chip color="primary">Primary</Chip>
-      <Chip color="secondary">Secondary</Chip>
-      <Chip color="success">Success</Chip>
-      <Chip color="warning">Warning</Chip>
-      <Chip color="danger">Danger</Chip>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/custom-styles.raw.jsx b/apps/docs/content/components/chip/custom-styles.raw.jsx
new file mode 100644
index 0000000000..61979d0db2
--- /dev/null
+++ b/apps/docs/content/components/chip/custom-styles.raw.jsx
@@ -0,0 +1,15 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip
+      classNames={{
+        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        content: "drop-shadow shadow-black text-white",
+      }}
+      variant="shadow"
+    >
+      New
+    </Chip>
+  );
+}
diff --git a/apps/docs/content/components/chip/custom-styles.ts b/apps/docs/content/components/chip/custom-styles.ts
index df78467892..da3ea9093a 100644
--- a/apps/docs/content/components/chip/custom-styles.ts
+++ b/apps/docs/content/components/chip/custom-styles.ts
@@ -1,18 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip
-      variant="shadow"
-      classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
-        content: "drop-shadow shadow-black text-white",
-      }}
-    >
-      New
-    </Chip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/disabled.raw.jsx b/apps/docs/content/components/chip/disabled.raw.jsx
new file mode 100644
index 0000000000..28ac8dfe82
--- /dev/null
+++ b/apps/docs/content/components/chip/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip isDisabled color="primary">
+      Chip
+    </Chip>
+  );
+}
diff --git a/apps/docs/content/components/chip/disabled.ts b/apps/docs/content/components/chip/disabled.ts
index 15a8dd3a21..1a215cc91f 100644
--- a/apps/docs/content/components/chip/disabled.ts
+++ b/apps/docs/content/components/chip/disabled.ts
@@ -1,10 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip isDisabled color="primary">Chip</Chip>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/list.raw.jsx b/apps/docs/content/components/chip/list.raw.jsx
new file mode 100644
index 0000000000..32757cd873
--- /dev/null
+++ b/apps/docs/content/components/chip/list.raw.jsx
@@ -0,0 +1,24 @@
+import {Chip} from "@nextui-org/react";
+
+const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"];
+
+export default function App() {
+  const [fruits, setFruits] = React.useState(initialFruits);
+
+  const handleClose = (fruitToRemove) => {
+    setFruits(fruits.filter((fruit) => fruit !== fruitToRemove));
+    if (fruits.length === 1) {
+      setFruits(initialFruits);
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      {fruits.map((fruit, index) => (
+        <Chip key={index} variant="flat" onClose={() => handleClose(fruit)}>
+          {fruit}
+        </Chip>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/list.ts b/apps/docs/content/components/chip/list.ts
index 8676a06015..2caeebc928 100644
--- a/apps/docs/content/components/chip/list.ts
+++ b/apps/docs/content/components/chip/list.ts
@@ -1,27 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
-
-export default function App() {
-  const [fruits, setFruits] = React.useState(initialFruits);
-
-  const handleClose = (fruitToRemove) => {
-    setFruits(fruits.filter(fruit => fruit !== fruitToRemove));
-    if (fruits.length === 1) {
-      setFruits(initialFruits);
-    }
-  };
-
-  return (
-    <div className="flex gap-2">
-      {fruits.map((fruit, index) => (
-        <Chip key={index} onClose={() => handleClose(fruit)} variant="flat">
-          {fruit}
-        </Chip>
-      ))}
-    </div>
-  );
-}`;
+import App from "./list.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/radius.raw.jsx b/apps/docs/content/components/chip/radius.raw.jsx
new file mode 100644
index 0000000000..2f320071ac
--- /dev/null
+++ b/apps/docs/content/components/chip/radius.raw.jsx
@@ -0,0 +1,12 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip radius="full">Full</Chip>
+      <Chip radius="lg">Large</Chip>
+      <Chip radius="md">Medium</Chip>
+      <Chip radius="sm">Small</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/radius.ts b/apps/docs/content/components/chip/radius.ts
index e53280621d..7b78db1ce0 100644
--- a/apps/docs/content/components/chip/radius.ts
+++ b/apps/docs/content/components/chip/radius.ts
@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip radius="full">Full</Chip>
-      <Chip radius="lg">Large</Chip>
-      <Chip radius="md">Medium</Chip>
-      <Chip radius="sm">Small</Chip>
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/sizes.raw.jsx b/apps/docs/content/components/chip/sizes.raw.jsx
new file mode 100644
index 0000000000..c02511ab8f
--- /dev/null
+++ b/apps/docs/content/components/chip/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip size="sm">Small</Chip>
+      <Chip size="md">Medium</Chip>
+      <Chip size="lg">Large</Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/sizes.ts b/apps/docs/content/components/chip/sizes.ts
index 72db218534..85a2f5b30b 100644
--- a/apps/docs/content/components/chip/sizes.ts
+++ b/apps/docs/content/components/chip/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip size="sm">Small</Chip>
-      <Chip size="md">Medium</Chip>
-      <Chip size="lg">Large</Chip>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/start-end-content.raw.jsx b/apps/docs/content/components/chip/start-end-content.raw.jsx
new file mode 100644
index 0000000000..f901308ecc
--- /dev/null
+++ b/apps/docs/content/components/chip/start-end-content.raw.jsx
@@ -0,0 +1,52 @@
+import {Chip} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="success" startContent={<CheckIcon size={18} />} variant="faded">
+        Chip
+      </Chip>
+      <Chip color="secondary" endContent={<NotificationIcon size={18} />} variant="flat">
+        Chip
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/start-end-content.ts b/apps/docs/content/components/chip/start-end-content.ts
index 415216b802..e99c7e5997 100644
--- a/apps/docs/content/components/chip/start-end-content.ts
+++ b/apps/docs/content/components/chip/start-end-content.ts
@@ -1,72 +1,7 @@
-export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
-  return (
-    <svg
-      fill="none"
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        clipRule="evenodd"
-        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
-        fill='currentColor'
-        fillRule="evenodd"
-      />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/>
-    </svg>
-  );
-};`;
-
-const App = `import {Chip} from "@nextui-org/react";
-import {NotificationIcon} from "./NotificationIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip
-        startContent={<CheckIcon size={18} />}
-        variant="faded"
-        color="success"
-      >
-        Chip
-      </Chip>
-      <Chip
-        endContent={<NotificationIcon size={18} />}
-        variant="flat"
-        color="secondary"
-      >
-        Chip
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./start-end-content.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/NotificationIcon.jsx": NotificationIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/chip/usage.raw.jsx b/apps/docs/content/components/chip/usage.raw.jsx
new file mode 100644
index 0000000000..0a4eda3a36
--- /dev/null
+++ b/apps/docs/content/components/chip/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return <Chip>Chip</Chip>;
+}
diff --git a/apps/docs/content/components/chip/usage.ts b/apps/docs/content/components/chip/usage.ts
index d8e05d0a6f..1118304c37 100644
--- a/apps/docs/content/components/chip/usage.ts
+++ b/apps/docs/content/components/chip/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip>Chip</Chip>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/chip/variants.raw.jsx b/apps/docs/content/components/chip/variants.raw.jsx
new file mode 100644
index 0000000000..ad79cf0878
--- /dev/null
+++ b/apps/docs/content/components/chip/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="warning" variant="solid">
+        Solid
+      </Chip>
+      <Chip color="warning" variant="bordered">
+        Bordered
+      </Chip>
+      <Chip color="warning" variant="light">
+        Light
+      </Chip>
+      <Chip color="warning" variant="flat">
+        Flat
+      </Chip>
+      <Chip color="warning" variant="faded">
+        Faded
+      </Chip>
+      <Chip color="warning" variant="shadow">
+        Shadow
+      </Chip>
+      <Chip color="warning" variant="dot">
+        Dot
+      </Chip>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/chip/variants.ts b/apps/docs/content/components/chip/variants.ts
index 7893976585..ddea95fb2e 100644
--- a/apps/docs/content/components/chip/variants.ts
+++ b/apps/docs/content/components/chip/variants.ts
@@ -1,18 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip color="warning" variant="solid">Solid</Chip>
-      <Chip color="warning" variant="bordered">Bordered</Chip>
-      <Chip color="warning" variant="light">Light</Chip>
-      <Chip color="warning" variant="flat">Flat</Chip>
-      <Chip color="warning" variant="faded">Faded</Chip>
-      <Chip color="warning" variant="shadow">Shadow</Chip>
-      <Chip color="warning" variant="dot">Dot</Chip>
-    </div> 
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,