diff --git a/apps/docs/content/components/button/colors.raw.jsx b/apps/docs/content/components/button/colors.raw.jsx
new file mode 100644
index 0000000000..07f8cb6aa4
--- /dev/null
+++ b/apps/docs/content/components/button/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Button color="default">Default</Button>
+      <Button color="primary">Primary</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success">Success</Button>
+      <Button color="warning">Warning</Button>
+      <Button color="danger">Danger</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/colors.ts b/apps/docs/content/components/button/colors.ts
index b0bf1c1527..d5bef810aa 100644
--- a/apps/docs/content/components/button/colors.ts
+++ b/apps/docs/content/components/button/colors.ts
@@ -1,29 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Button color="default">
-        Default
-      </Button>
-      <Button color="primary">
-        Primary
-      </Button>  
-      <Button color="secondary">
-        Secondary
-      </Button>  
-      <Button color="success">
-        Success
-      </Button>  
-      <Button color="warning">
-        Warning
-      </Button>  
-      <Button color="danger">
-        Danger
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/custom-impl.raw.jsx b/apps/docs/content/components/button/custom-impl.raw.jsx
new file mode 100644
index 0000000000..f1ec13ac21
--- /dev/null
+++ b/apps/docs/content/components/button/custom-impl.raw.jsx
@@ -0,0 +1,38 @@
+import {forwardRef} from "react";
+import {useButton, Ripple, Spinner} from "@nextui-org/react";
+
+const MyButton = forwardRef((props, ref) => {
+  const {
+    domRef,
+    children,
+    spinnerSize,
+    spinner = <Spinner color="current" size={spinnerSize} />,
+    spinnerPlacement,
+    startContent,
+    endContent,
+    isLoading,
+    disableRipple,
+    getButtonProps,
+    getRippleProps,
+  } = useButton({
+    ref,
+    ...props,
+  });
+
+  const {ripples, onClear} = getRippleProps();
+
+  return (
+    <button ref={domRef} {...getButtonProps()}>
+      {startContent}
+      {isLoading && spinnerPlacement === "start" && spinner}
+      {children}
+      {isLoading && spinnerPlacement === "end" && spinner}
+      {endContent}
+      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
+    </button>
+  );
+});
+
+MyButton.displayName = "MyButton";
+
+export default MyButton;
diff --git a/apps/docs/content/components/button/custom-impl.raw.tsx b/apps/docs/content/components/button/custom-impl.raw.tsx
new file mode 100644
index 0000000000..e297b601f9
--- /dev/null
+++ b/apps/docs/content/components/button/custom-impl.raw.tsx
@@ -0,0 +1,40 @@
+import {forwardRef} from "react";
+import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
+
+export interface ButtonProps extends BaseButtonProps {}
+
+const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const {
+    domRef,
+    children,
+    spinnerSize,
+    spinner = <Spinner color="current" size={spinnerSize} />,
+    spinnerPlacement,
+    startContent,
+    endContent,
+    isLoading,
+    disableRipple,
+    getButtonProps,
+    getRippleProps,
+  } = useButton({
+    ref,
+    ...props,
+  });
+
+  const {ripples, onClear} = getRippleProps();
+
+  return (
+    <button ref={domRef} {...getButtonProps()}>
+      {startContent}
+      {isLoading && spinnerPlacement === "start" && spinner}
+      {children}
+      {isLoading && spinnerPlacement === "end" && spinner}
+      {endContent}
+      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
+    </button>
+  );
+});
+
+MyButton.displayName = "MyButton";
+
+export default MyButton;
diff --git a/apps/docs/content/components/button/custom-impl.ts b/apps/docs/content/components/button/custom-impl.ts
index a7ad847c51..ef0d8ef531 100644
--- a/apps/docs/content/components/button/custom-impl.ts
+++ b/apps/docs/content/components/button/custom-impl.ts
@@ -1,83 +1,5 @@
-const App = `import {forwardRef} from "react";
-import {useButton, Ripple, Spinner} from "@nextui-org/react";
-
-
-const MyButton = forwardRef((props, ref) => {
-  const {
-    domRef,
-    children,
-    spinnerSize,
-    spinner = <Spinner color="current" size={spinnerSize} />,
-    spinnerPlacement,
-    startContent,
-    endContent,
-    isLoading,
-    disableRipple,
-    getButtonProps,
-    getRippleProps,
-  } = useButton({
-    ref,
-    ...props,
-  });
-
-  const {ripples, onClear} = getRippleProps();
-
-  return (
-    <button ref={domRef} {...getButtonProps()}>
-      {startContent}
-      {isLoading && spinnerPlacement === "start" && spinner}
-      {children}
-      {isLoading && spinnerPlacement === "end" && spinner}
-      {endContent}
-      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
-    </button>
-  );
-});
-
-MyButton.displayName = "MyButton";
-
-export default MyButton;`;
-
-const AppTs = `import {forwardRef} from "react";
-import {useButton, Ripple, Spinner, ButtonProps as BaseButtonProps} from "@nextui-org/react";
-
-export interface ButtonProps extends BaseButtonProps {}
-
-const MyButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
-  const {
-    domRef,
-    children,
-    spinnerSize,
-    spinner = <Spinner color="current" size={spinnerSize} />,
-    spinnerPlacement,
-    startContent,
-    endContent,
-    isLoading,
-    disableRipple,
-    getButtonProps,
-    getRippleProps,
-  } = useButton({
-    ref,
-    ...props,
-  });
-
-  const {ripples, onClear} = getRippleProps();
-
-  return (
-    <button ref={domRef} {...getButtonProps()}>
-      {startContent}
-      {isLoading && spinnerPlacement === "start" && spinner}
-      {children}
-      {isLoading && spinnerPlacement === "end" && spinner}
-      {endContent}
-      {!disableRipple && <Ripple ripples={ripples} onClear={onClear} />}
-    </button>
-  );
-});
-
-MyButton.displayName = "MyButton";
-
-export default MyButton;`;
+import App from "./custom-impl.raw.jsx?raw";
+import AppTs from "./custom-impl.raw.tsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/custom-styles.raw.jsx b/apps/docs/content/components/button/custom-styles.raw.jsx
new file mode 100644
index 0000000000..cd999fa238
--- /dev/null
+++ b/apps/docs/content/components/button/custom-styles.raw.jsx
@@ -0,0 +1,12 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg"
+      radius="full"
+    >
+      Button
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/custom-styles.ts b/apps/docs/content/components/button/custom-styles.ts
index b2136ec09f..da3ea9093a 100644
--- a/apps/docs/content/components/button/custom-styles.ts
+++ b/apps/docs/content/components/button/custom-styles.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button radius="full" className="bg-gradient-to-tr from-pink-500 to-yellow-500 text-white shadow-lg">
-      Button
-    </Button>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/disabled.raw.jsx b/apps/docs/content/components/button/disabled.raw.jsx
new file mode 100644
index 0000000000..9d59145f8c
--- /dev/null
+++ b/apps/docs/content/components/button/disabled.raw.jsx
@@ -0,0 +1,9 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button isDisabled color="primary">
+      Button
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/disabled.ts b/apps/docs/content/components/button/disabled.ts
index 57dbe8b255..1a215cc91f 100644
--- a/apps/docs/content/components/button/disabled.ts
+++ b/apps/docs/content/components/button/disabled.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button isDisabled color="primary">
-      Button
-    </Button>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/group-disabled.raw.jsx b/apps/docs/content/components/button/group-disabled.raw.jsx
new file mode 100644
index 0000000000..f42ab62dff
--- /dev/null
+++ b/apps/docs/content/components/button/group-disabled.raw.jsx
@@ -0,0 +1,11 @@
+import {Button, ButtonGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <ButtonGroup isDisabled>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group-disabled.ts b/apps/docs/content/components/button/group-disabled.ts
index 55b5281bc2..a0fb219d26 100644
--- a/apps/docs/content/components/button/group-disabled.ts
+++ b/apps/docs/content/components/button/group-disabled.ts
@@ -1,14 +1,4 @@
-const App = `import {Button, ButtonGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <ButtonGroup isDisabled>
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Three</Button>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group-disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/group-use-case.raw.jsx b/apps/docs/content/components/button/group-use-case.raw.jsx
new file mode 100644
index 0000000000..b880294fec
--- /dev/null
+++ b/apps/docs/content/components/button/group-use-case.raw.jsx
@@ -0,0 +1,69 @@
+import {
+  Button,
+  ButtonGroup,
+  Dropdown,
+  DropdownTrigger,
+  DropdownMenu,
+  DropdownItem,
+} from "@nextui-org/react";
+
+export const ChevronDownIcon = () => (
+  <svg fill="none" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default function App() {
+  const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));
+
+  const descriptionsMap = {
+    merge:
+      "All commits from the source branch are added to the destination branch via a merge commit.",
+    squash:
+      "All commits from the source branch are added to the destination branch as a single commit.",
+    rebase: "All commits from the source branch are added to the destination branch individually.",
+  };
+
+  const labelsMap = {
+    merge: "Create a merge commit",
+    squash: "Squash and merge",
+    rebase: "Rebase and merge",
+  };
+
+  // Convert the Set to an Array and get the first value.
+  const selectedOptionValue = Array.from(selectedOption)[0];
+
+  return (
+    <ButtonGroup variant="flat">
+      <Button>{labelsMap[selectedOptionValue]}</Button>
+      <Dropdown placement="bottom-end">
+        <DropdownTrigger>
+          <Button isIconOnly>
+            <ChevronDownIcon />
+          </Button>
+        </DropdownTrigger>
+        <DropdownMenu
+          disallowEmptySelection
+          aria-label="Merge options"
+          className="max-w-[300px]"
+          selectedKeys={selectedOption}
+          selectionMode="single"
+          onSelectionChange={setSelectedOption}
+        >
+          <DropdownItem key="merge" description={descriptionsMap["merge"]}>
+            {labelsMap["merge"]}
+          </DropdownItem>
+          <DropdownItem key="squash" description={descriptionsMap["squash"]}>
+            {labelsMap["squash"]}
+          </DropdownItem>
+          <DropdownItem key="rebase" description={descriptionsMap["rebase"]}>
+            {labelsMap["rebase"]}
+          </DropdownItem>
+        </DropdownMenu>
+      </Dropdown>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group-use-case.ts b/apps/docs/content/components/button/group-use-case.ts
index d1220f5371..d563f87977 100644
--- a/apps/docs/content/components/button/group-use-case.ts
+++ b/apps/docs/content/components/button/group-use-case.ts
@@ -1,67 +1,7 @@
-const ChevronDownIcon = `export const ChevronDownIcon = () => (
-  <svg fill="none" height="14" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg">
-    <path d="M17.9188 8.17969H11.6888H6.07877C5.11877 8.17969 4.63877 9.33969 5.31877 10.0197L10.4988 15.1997C11.3288 16.0297 12.6788 16.0297 13.5088 15.1997L15.4788 13.2297L18.6888 10.0197C19.3588 9.33969 18.8788 8.17969 17.9188 8.17969Z" fill="currentColor"/>
-  </svg>
-);`;
-
-const App = `import {Button, ButtonGroup, Dropdown, DropdownTrigger, DropdownMenu, DropdownItem} from "@nextui-org/react";
-import {ChevronDownIcon} from './ChevronDownIcon';
-
-export default function App() {
-  const [selectedOption, setSelectedOption] = React.useState(new Set(["merge"]));
-
-  const descriptionsMap = {
-    merge:
-      "All commits from the source branch are added to the destination branch via a merge commit.",
-    squash:
-      "All commits from the source branch are added to the destination branch as a single commit.",
-    rebase: "All commits from the source branch are added to the destination branch individually.",
-  };
-
-  const labelsMap = {
-    merge: "Create a merge commit",
-    squash: "Squash and merge",
-    rebase: "Rebase and merge",
-  }
-
-  // Convert the Set to an Array and get the first value.
-  const selectedOptionValue = Array.from(selectedOption)[0];
-
-  return (
-    <ButtonGroup variant="flat">
-      <Button>{labelsMap[selectedOptionValue]}</Button>
-      <Dropdown placement="bottom-end">
-        <DropdownTrigger>
-          <Button isIconOnly>
-            <ChevronDownIcon />
-          </Button>
-        </DropdownTrigger>
-        <DropdownMenu
-          disallowEmptySelection
-          aria-label="Merge options"
-          selectedKeys={selectedOption}
-          selectionMode="single"
-          onSelectionChange={setSelectedOption}
-          className="max-w-[300px]"
-        >
-          <DropdownItem key="merge" description={descriptionsMap["merge"]}>
-            {labelsMap["merge"]}
-          </DropdownItem>
-          <DropdownItem key="squash" description={descriptionsMap["squash"]}>
-            {labelsMap["squash"]}
-          </DropdownItem>
-          <DropdownItem key="rebase" description={descriptionsMap["rebase"]}>
-            {labelsMap["rebase"]}
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group-use-case.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/ChevronDownIcon.jsx": ChevronDownIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/group.raw.jsx b/apps/docs/content/components/button/group.raw.jsx
new file mode 100644
index 0000000000..4c3273f823
--- /dev/null
+++ b/apps/docs/content/components/button/group.raw.jsx
@@ -0,0 +1,11 @@
+import {Button, ButtonGroup} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <ButtonGroup>
+      <Button>One</Button>
+      <Button>Two</Button>
+      <Button>Three</Button>
+    </ButtonGroup>
+  );
+}
diff --git a/apps/docs/content/components/button/group.ts b/apps/docs/content/components/button/group.ts
index ec5d6678da..0660a894cd 100644
--- a/apps/docs/content/components/button/group.ts
+++ b/apps/docs/content/components/button/group.ts
@@ -1,14 +1,4 @@
-const App = `import {Button, ButtonGroup} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <ButtonGroup>
-      <Button>One</Button>
-      <Button>Two</Button>
-      <Button>Three</Button>
-    </ButtonGroup>
-  );
-}`;
+import App from "./group.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/icon-only.raw.jsx b/apps/docs/content/components/button/icon-only.raw.jsx
new file mode 100644
index 0000000000..ccb38b1424
--- /dev/null
+++ b/apps/docs/content/components/button/icon-only.raw.jsx
@@ -0,0 +1,55 @@
+import {Button} from "@nextui-org/react";
+
+export const HeartIcon = ({fill = "currentColor", filled, size, height, width, ...props}) => {
+  return (
+    <svg
+      fill={filled ? 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.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={1.5}
+      />
+    </svg>
+  );
+};
+
+export const CameraIcon = ({fill = "currentColor", 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="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button isIconOnly aria-label="Like" color="danger">
+        <HeartIcon />
+      </Button>
+      <Button isIconOnly aria-label="Take a photo" color="warning" variant="faded">
+        <CameraIcon />
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/icon-only.ts b/apps/docs/content/components/button/icon-only.ts
index b438e283f2..7709cd3f67 100644
--- a/apps/docs/content/components/button/icon-only.ts
+++ b/apps/docs/content/components/button/icon-only.ts
@@ -1,82 +1,7 @@
-const HeartIcon = `export const HeartIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill={filled ? fill : 'none'}
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path
-        d="M12.62 20.81c-.34.12-.9.12-1.24 0C8.48 19.82 2 15.69 2 8.69 2 5.6 4.49 3.1 7.56 3.1c1.82 0 3.43.88 4.44 2.24a5.53 5.53 0 0 1 4.44-2.24C19.51 3.1 22 5.6 22 8.69c0 7-6.48 11.13-9.38 12.12Z"
-        stroke={fill}
-        strokeWidth={1.5}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-};
-`;
-
-const CameraIcon = `export const CameraIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...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
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill={fill}
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Button} from "@nextui-org/react";
-import {HeartIcon} from './HeartIcon';
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button isIconOnly color="danger" aria-label="Like">
-        <HeartIcon />
-      </Button>    
-      <Button isIconOnly color="warning" variant="faded" aria-label="Take a photo">
-        <CameraIcon />
-      </Button>
-    </div>
-  );
-}`;
+import App from "./icon-only.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/HeartIcon.jsx": HeartIcon,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/icons.raw.jsx b/apps/docs/content/components/button/icons.raw.jsx
new file mode 100644
index 0000000000..2e1634bba0
--- /dev/null
+++ b/apps/docs/content/components/button/icons.raw.jsx
@@ -0,0 +1,62 @@
+import {Button} from "@nextui-org/react";
+
+export const UserIcon = ({fill = "currentColor", size, height, width, ...props}) => {
+  return (
+    <svg
+      data-name="Iconly/Curved/Profile"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g
+        fill="none"
+        stroke={fill}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeMiterlimit={10}
+        strokeWidth={1.5}
+      >
+        <path
+          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
+          data-name="Stroke 1"
+        />
+        <path d="M11.837 11.174a4.372 4.372 0 10-.031 0z" data-name="Stroke 3" />
+      </g>
+    </svg>
+  );
+};
+
+export const CameraIcon = ({fill = "currentColor", 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="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
+        fill={fill}
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button color="success" endContent={<CameraIcon />}>
+        Take a photo
+      </Button>
+      <Button color="danger" startContent={<UserIcon />} variant="bordered">
+        Delete user
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/icons.ts b/apps/docs/content/components/button/icons.ts
index 783ae43bd1..22a410c88f 100644
--- a/apps/docs/content/components/button/icons.ts
+++ b/apps/docs/content/components/button/icons.ts
@@ -1,91 +1,7 @@
-const UserIcon = `export const UserIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...props
-}) => {
-  return (
-    <svg
-      data-name="Iconly/Curved/Profile"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      width={size || width || 24}
-      height={size || height || 24}
-      {...props}
-    >
-      <g
-        fill="none"
-        stroke={fill}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeMiterlimit={10}
-        strokeWidth={1.5}
-      >
-        <path
-          data-name="Stroke 1"
-          d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
-        />
-        <path
-          data-name="Stroke 3"
-          d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
-        />
-      </g>
-    </svg>
-  );
-};`;
-
-const CameraIcon = `export const CameraIcon = ({
-  fill = 'currentColor',
-  filled,
-  size,
-  height,
-  width,
-  label,
-  ...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
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
-        fill={fill}
-      />
-    </svg>
-  );
-};`;
-
-const App = `import {Button} from "@nextui-org/react";
-import {UserIcon} from './UserIcon';
-import {CameraIcon} from './CameraIcon';
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button color="success" endContent={<CameraIcon/>}>
-        Take a photo
-      </Button>    
-      <Button color="danger" variant="bordered" startContent={<UserIcon/>}>
-        Delete user
-      </Button>
-    </div>
-  );
-}`;
+import App from "./icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/UserIcon.jsx": UserIcon,
-  "/CameraIcon.jsx": CameraIcon,
 };
 
 export default {
diff --git a/apps/docs/content/components/button/loading-custom.raw.jsx b/apps/docs/content/components/button/loading-custom.raw.jsx
new file mode 100644
index 0000000000..50979e32b5
--- /dev/null
+++ b/apps/docs/content/components/button/loading-custom.raw.jsx
@@ -0,0 +1,34 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button
+      isLoading
+      color="secondary"
+      spinner={
+        <svg
+          className="animate-spin h-5 w-5 text-current"
+          fill="none"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            className="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            strokeWidth="4"
+          />
+          <path
+            className="opacity-75"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            fill="currentColor"
+          />
+        </svg>
+      }
+    >
+      Loading
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/loading-custom.ts b/apps/docs/content/components/button/loading-custom.ts
index 7dbe0d78f5..b0036de8da 100644
--- a/apps/docs/content/components/button/loading-custom.ts
+++ b/apps/docs/content/components/button/loading-custom.ts
@@ -1,37 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button
-      isLoading
-      color="secondary"
-      spinner={
-        <svg
-          className="animate-spin h-5 w-5 text-current"
-          fill="none"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-            fill="currentColor"
-          />
-        </svg>
-      }
-    >
-      Loading
-    </Button>
-  );
-}`;
+import App from "./loading-custom.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/loading.raw.jsx b/apps/docs/content/components/button/loading.raw.jsx
new file mode 100644
index 0000000000..6b75c489d4
--- /dev/null
+++ b/apps/docs/content/components/button/loading.raw.jsx
@@ -0,0 +1,9 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Button isLoading color="primary">
+      Loading
+    </Button>
+  );
+}
diff --git a/apps/docs/content/components/button/loading.ts b/apps/docs/content/components/button/loading.ts
index 830d52eea4..0c8fea5a5f 100644
--- a/apps/docs/content/components/button/loading.ts
+++ b/apps/docs/content/components/button/loading.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button color="primary" isLoading>
-      Loading
-    </Button>
-  );
-}`;
+import App from "./loading.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/radius.raw.jsx b/apps/docs/content/components/button/radius.raw.jsx
new file mode 100644
index 0000000000..c91268e560
--- /dev/null
+++ b/apps/docs/content/components/button/radius.raw.jsx
@@ -0,0 +1,13 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button radius="full">Full</Button>
+      <Button radius="lg">Large</Button>
+      <Button radius="md">Medium</Button>
+      <Button radius="sm">Small</Button>
+      <Button radius="none">None</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/radius.ts b/apps/docs/content/components/button/radius.ts
index 739ca0f5b8..7b78db1ce0 100644
--- a/apps/docs/content/components/button/radius.ts
+++ b/apps/docs/content/components/button/radius.ts
@@ -1,26 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button radius="full">
-        Full
-      </Button>
-      <Button radius="lg">
-        Large
-      </Button>  
-      <Button radius="md">
-        Medium
-      </Button>  
-      <Button radius="sm">
-        Small
-      </Button>  
-      <Button radius="none">
-        None
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/sizes.raw.jsx b/apps/docs/content/components/button/sizes.raw.jsx
new file mode 100644
index 0000000000..4880e203fd
--- /dev/null
+++ b/apps/docs/content/components/button/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4 items-center">
+      <Button size="sm">Small</Button>
+      <Button size="md">Medium</Button>
+      <Button size="lg">Large</Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/sizes.ts b/apps/docs/content/components/button/sizes.ts
index 06b90c1ffd..85a2f5b30b 100644
--- a/apps/docs/content/components/button/sizes.ts
+++ b/apps/docs/content/components/button/sizes.ts
@@ -1,20 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4 items-center">
-      <Button size="sm">
-        Small
-      </Button>  
-      <Button size="md">
-        Medium
-      </Button>  
-      <Button size="lg">
-        Large
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/usage.raw.jsx b/apps/docs/content/components/button/usage.raw.jsx
new file mode 100644
index 0000000000..fcb138b916
--- /dev/null
+++ b/apps/docs/content/components/button/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return <Button color="primary">Button</Button>;
+}
diff --git a/apps/docs/content/components/button/usage.ts b/apps/docs/content/components/button/usage.ts
index f80f3914ca..1118304c37 100644
--- a/apps/docs/content/components/button/usage.ts
+++ b/apps/docs/content/components/button/usage.ts
@@ -1,12 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Button color="primary">
-      Button
-    </Button>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
diff --git a/apps/docs/content/components/button/variants.raw.jsx b/apps/docs/content/components/button/variants.raw.jsx
new file mode 100644
index 0000000000..7a7eaff52d
--- /dev/null
+++ b/apps/docs/content/components/button/variants.raw.jsx
@@ -0,0 +1,29 @@
+import {Button} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4 items-center">
+      <Button color="primary" variant="solid">
+        Solid
+      </Button>
+      <Button color="primary" variant="faded">
+        Faded
+      </Button>
+      <Button color="primary" variant="bordered">
+        Bordered
+      </Button>
+      <Button color="primary" variant="light">
+        Light
+      </Button>
+      <Button color="primary" variant="flat">
+        Flat
+      </Button>
+      <Button color="primary" variant="ghost">
+        Ghost
+      </Button>
+      <Button color="primary" variant="shadow">
+        Shadow
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/button/variants.ts b/apps/docs/content/components/button/variants.ts
index fe6067aed7..ddea95fb2e 100644
--- a/apps/docs/content/components/button/variants.ts
+++ b/apps/docs/content/components/button/variants.ts
@@ -1,32 +1,4 @@
-const App = `import {Button} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4 items-center">
-      <Button color="primary" variant="solid">
-        Solid
-      </Button>
-      <Button color="primary" variant="faded">
-        Faded
-      </Button>  
-      <Button color="primary" variant="bordered">
-        Bordered
-      </Button>  
-      <Button color="primary" variant="light">
-        Light
-      </Button>  
-      <Button color="primary" variant="flat">
-        Flat
-      </Button>  
-      <Button color="primary" variant="ghost">
-        Ghost
-      </Button>  
-      <Button color="primary" variant="shadow">
-        Shadow
-      </Button>  
-    </div>
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,