diff --git a/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx
new file mode 100644
index 0000000000..d31e069dd5
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/custom-size.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="w-[300px] h-[400px]" size={100}>
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/custom-size.ts b/apps/docs/content/components/scroll-shadow/custom-size.ts
index 5df7bfd1c5..bdac09246a 100644
--- a/apps/docs/content/components/scroll-shadow/custom-size.ts
+++ b/apps/docs/content/components/scroll-shadow/custom-size.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-  <div>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-
-export default function App() {
-  return (
-    <ScrollShadow size={100} className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./custom-size.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx
new file mode 100644
index 0000000000..9f2fdf5ba2
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow hideScrollBar className="w-[300px] h-[400px]">
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
index 74e82bc299..c431601bc5 100644
--- a/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
+++ b/apps/docs/content/components/scroll-shadow/hide-scrollbar.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-  <div>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow hideScrollBar className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./hide-scrollbar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx
new file mode 100644
index 0000000000..4da067924e
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/horizontal.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="max-w-[400px] max-h-[300px]" orientation="horizontal">
+      <Content className="w-[800px]" />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/horizontal.ts b/apps/docs/content/components/scroll-shadow/horizontal.ts
index a9a1d87cd3..60be4b4077 100644
--- a/apps/docs/content/components/scroll-shadow/horizontal.ts
+++ b/apps/docs/content/components/scroll-shadow/horizontal.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = ({className}) => (
-  <div className={className}>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow orientation="horizontal" className="max-w-[400px] max-h-[300px]">
-      <Content className="w-[800px]" />
-    </ScrollShadow>
-  );
-}`;
+import App from "./horizontal.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/offset.raw.jsx b/apps/docs/content/components/scroll-shadow/offset.raw.jsx
new file mode 100644
index 0000000000..e5a237b0e7
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/offset.raw.jsx
@@ -0,0 +1,79 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow
+      hideScrollBar
+      className="max-w-[400px] max-h-[300px]"
+      offset={100}
+      orientation="horizontal"
+    >
+      <Content className="w-[800px]" />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/offset.ts b/apps/docs/content/components/scroll-shadow/offset.ts
index 9980333ad5..2fb601047c 100644
--- a/apps/docs/content/components/scroll-shadow/offset.ts
+++ b/apps/docs/content/components/scroll-shadow/offset.ts
@@ -1,57 +1,7 @@
-const Content = `export const Content = ({className}) => (
-  <div className={className}>
-    <p>
-      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-    </p>
-    <p>
-      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-    </p>
-    <p>
-      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-    </p>
-    <p>
-      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-    </p>
-    <p>
-      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-    </p>
-    <p>
-      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-    </p>
-    <p>
-      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-    </p>
-    <p>
-      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-    </p>
-    <p>
-      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-    </p>
-    <p>
-      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-    </p>
-  </div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-  
-export default function App() {
-  return (
-    <ScrollShadow 
-      hideScrollBar 
-      offset={100}
-      orientation="horizontal" 
-      className="max-w-[400px] max-h-[300px]"
-    >
-      <Content className="w-[800px]" />
-    </ScrollShadow>
-  );
-}`;
+import App from "./offset.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {
diff --git a/apps/docs/content/components/scroll-shadow/usage.raw.jsx b/apps/docs/content/components/scroll-shadow/usage.raw.jsx
new file mode 100644
index 0000000000..12f96b5ff0
--- /dev/null
+++ b/apps/docs/content/components/scroll-shadow/usage.raw.jsx
@@ -0,0 +1,74 @@
+import {ScrollShadow} from "@nextui-org/react";
+
+export const Content = () => (
+  <div>
+    <p>
+      Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id
+      consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim
+      nostrud elit officia tempor esse quis.
+    </p>
+    <p>
+      Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor
+      cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum
+      quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit
+      incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa
+      deserunt nostrud ad veniam.
+    </p>
+    <p>
+      Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea
+      laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat.
+      Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et
+      ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
+    </p>
+    <p>
+      Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud
+      laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident
+      fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex.
+      Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit
+      quis aute in elit magna ullamco in consequat ex proident.
+    </p>
+    <p>
+      Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat
+      velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing
+      tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi
+      do ullamco in quis elit.
+    </p>
+    <p>
+      Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud
+      pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation
+      cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor
+      consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua
+      deserunt cupidatat consequat id.
+    </p>
+    <p>
+      Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor
+      incididunt aliquip minim elit ea. Exercitation non officia eu id.
+    </p>
+    <p>
+      Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem.
+      Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam.
+      Officia duis ea sunt aliqua.
+    </p>
+    <p>
+      Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut
+      dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea
+      et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum
+      dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
+    </p>
+    <p>
+      Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut.
+      Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat
+      eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam
+      cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id
+      voluptate.
+    </p>
+  </div>
+);
+
+export default function App() {
+  return (
+    <ScrollShadow className="w-[300px] h-[400px]">
+      <Content />
+    </ScrollShadow>
+  );
+}
diff --git a/apps/docs/content/components/scroll-shadow/usage.ts b/apps/docs/content/components/scroll-shadow/usage.ts
index 5c911e8a84..1118304c37 100644
--- a/apps/docs/content/components/scroll-shadow/usage.ts
+++ b/apps/docs/content/components/scroll-shadow/usage.ts
@@ -1,52 +1,7 @@
-const Content = `export const Content = () => (
-<div>
-  <p>
-    Sit nulla est ex deserunt exercitation anim occaecat. Nostrud ullamco deserunt aute id consequat veniam incididunt duis in sint irure nisi. Mollit officia cillum Lorem ullamco minim nostrud elit officia tempor esse quis.
-  </p>
-  <p>
-    Sunt ad dolore quis aute consequat. Magna exercitation reprehenderit magna aute tempor cupidatat consequat elit dolor adipisicing. Mollit dolor eiusmod sunt ex incididunt cillum quis. Velit duis sit officia eiusmod Lorem aliqua enim laboris do dolor eiusmod. Et mollit incididunt nisi consectetur esse laborum eiusmod pariatur proident Lorem eiusmod et. Culpa deserunt nostrud ad veniam.
-  </p>
-  <p>
-    Est velit labore esse esse cupidatat. Velit id elit consequat minim. Mollit enim excepteur ea laboris adipisicing aliqua proident occaecat do do adipisicing adipisicing ut fugiat. Consequat pariatur ullamco aute sunt esse. Irure excepteur eu non eiusmod. Commodo commodo et ad ipsum elit esse pariatur sit adipisicing sunt excepteur enim.
-  </p>
-  <p>
-    Incididunt duis commodo mollit esse veniam non exercitation dolore occaecat ea nostrud laboris. Adipisicing occaecat fugiat fugiat irure fugiat in magna non consectetur proident fugiat. Commodo magna et aliqua elit sint cupidatat. Sint aute ullamco enim cillum anim ex. Est eiusmod commodo occaecat consequat laboris est do duis. Enim incididunt non culpa velit quis aute in elit magna ullamco in consequat ex proident.
-  </p>
-  <p>
-    Dolore incididunt mollit fugiat pariatur cupidatat ipsum laborum cillum. Commodo consequat velit cupidatat duis ex nisi non aliquip ad ea pariatur do culpa. Eiusmod proident adipisicing tempor tempor qui pariatur voluptate dolor do ea commodo. Veniam voluptate cupidatat ex nisi do ullamco in quis elit.
-  </p>
-  <p>
-    Cillum proident veniam cupidatat pariatur laborum tempor cupidatat anim eiusmod id nostrud pariatur tempor reprehenderit. Do esse ullamco laboris sunt proident est ea exercitation cupidatat. Do Lorem eiusmod aliqua culpa ullamco consectetur veniam voluptate cillum. Dolor consequat cillum tempor laboris mollit laborum reprehenderit reprehenderit veniam aliqua deserunt cupidatat consequat id.
-  </p>
-  <p>
-    Est id tempor excepteur enim labore sint aliquip consequat duis minim tempor proident. Dolor incididunt aliquip minim elit ea. Exercitation non officia eu id.
-  </p>
-  <p>
-    Ipsum ipsum consequat incididunt do aliquip pariatur nostrud. Qui ut sint culpa labore Lorem. Magna deserunt aliquip aute duis consectetur magna amet anim. Magna fugiat est nostrud veniam. Officia duis ea sunt aliqua.
-  </p>
-  <p>
-    Ipsum minim officia aute anim minim aute aliquip aute non in non. Ipsum aliquip proident ut dolore eiusmod ad fugiat fugiat ut ex. Ea velit Lorem ut et commodo nulla voluptate veniam ea et aliqua esse id. Pariatur dolor et adipisicing ea mollit. Ipsum non irure proident ipsum dolore aliquip adipisicing laborum irure dolor nostrud occaecat exercitation.
-  </p>
-  <p>
-    Culpa qui reprehenderit nostrud aliqua reprehenderit et ullamco proident nisi commodo non ut. Ipsum quis irure nisi sint do qui velit nisi. Sunt voluptate eu reprehenderit tempor consequat eiusmod Lorem irure velit duis Lorem laboris ipsum cupidatat. Pariatur excepteur tempor veniam cillum et nulla ipsum veniam ad ipsum ad aute. Est officia duis pariatur ad eiusmod id voluptate.
-  </p>
-</div>
-);`;
-
-const App = `import {ScrollShadow} from "@nextui-org/react";
-import {Content} from "./Content";
-
-export default function App() {
-  return (
-    <ScrollShadow className="w-[300px] h-[400px]">
-      <Content />
-    </ScrollShadow>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/Content.jsx": Content,
 };
 
 export default {