diff --git a/apps/docs/components/docs/components/code-demo/code-demo.tsx b/apps/docs/components/docs/components/code-demo/code-demo.tsx
index 6da1bb4799..7502c57561 100644
--- a/apps/docs/components/docs/components/code-demo/code-demo.tsx
+++ b/apps/docs/components/docs/components/code-demo/code-demo.tsx
@@ -59,7 +59,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
   isPreviewCentered = false,
   // when false .js files will be used
   typescriptStrict = false,
-  showOpenInCodeSandbox,
+  showOpenInCodeSandbox = true,
   isGradientBox = false,
   defaultExpanded = false,
   previewHeight = "auto",
@@ -142,7 +142,7 @@ export const CodeDemo: React.FC<CodeDemoProps> = ({
         files={files}
         highlightedLines={highlightedLines}
         showEditor={showEditor}
-        showOpenInCodeSandbox={showOpenInCodeSandbox || showPreview}
+        showOpenInCodeSandbox={showOpenInCodeSandbox}
         showPreview={showSandpackPreview}
         typescriptStrict={typescriptStrict}
       />
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index 435dfa31a7..cddaad643c 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -205,6 +205,7 @@ import {useFilter} from "@react-aria/i18n";
 <CodeDemo
   title="Fully Controlled"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="63-64,67,69-71"
   files={autocompleteContent.fullyControlled}
 />
@@ -254,6 +255,7 @@ import {useAsyncList} from "@react-stately/data";
   typescriptStrict={true}
   title="Asynchronous Filtering"
   showPreview={false}
+  showOpenInCodeSandbox={false}
   highlightedLines="27-29,33"
   files={autocompleteContent.asyncFiltering}
 />
@@ -280,6 +282,7 @@ import {useInfiniteScroll} from "@nextui-org/use-infinite-scroll";
 
 <CodeDemo
   showPreview={false}
+  showOpenInCodeSandbox={false}
   typescriptStrict={true}
   title="Asynchronous Loading"
   highlightedLines="21-22,25,27"
diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
index ad8105f1f0..7fdaa409ff 100644
--- a/apps/docs/content/docs/components/avatar.mdx
+++ b/apps/docs/content/docs/components/avatar.mdx
@@ -76,7 +76,8 @@ You can also provide a custom fallback component to be displayed when the `src`
 
 In case you need to customize the avatar even further, you can use the `useAvatar` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.customImpl} />
+  
 
 ### Custom initials logic
 
@@ -120,7 +121,7 @@ By passing the `isGrid` prop to the `AvatarGroup` component, the avatars will be
 In case you need to customize the avatar group even further, you can use the `useAvatarGroup` hook and the
 `AvatarGroupProvider` to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={avatarContent.groupCustomImpl} />
 
 ## Slots
 
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index 69787e0b02..d5c9033593 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -88,7 +88,7 @@ You can customize the `Button` component by passing custom Tailwind CSS classes
 
 You can also use the `useButton` hook to create your own button component.
 
-<CodeDemo showPreview={false} title="Custom Implementation" files={buttonContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom Implementation" files={buttonContent.customImpl} />
 
 ## Button Group
 
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 18d1f3cab8..055c6ead1a 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -65,7 +65,7 @@ You can use the `fallbackSrc` prop to display a fallback image when:
 Next.js provides an optimized [Image](https://nextjs.org/docs/app/api-reference/components/image) component,
 you can use it with NextUI `Image` component as well.
 
-<CodeDemo showPreview={false} title="With Next.js Image" files={imageContent.nextjs} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="With Next.js Image" files={imageContent.nextjs} />
 
 > **Note**: NextUI's `Image` component is `client-side`, using hooks like `useState` for loading states
 > and animations. Use Next.js `Image` alone if these features aren't required.
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index c1453ebfcf..11bbbe47fc 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -89,7 +89,7 @@ function App() {
 
 In case you need to customize the link even further, you can use the `useLink` hook to create your own implementation.
 
-<CodeDemo showPreview={false} title="Custom implementation" files={linkContent.customImpl} />
+<CodeDemo showPreview={false} showOpenInCodeSandbox={false} title="Custom implementation" files={linkContent.customImpl} />
 
 <Spacer y={4} />{" "}