diff --git a/components/doc/accordion/importdoc.js b/components/doc/accordion/importdoc.js
index 1d300fe6ee..5005e9a39c 100644
--- a/components/doc/accordion/importdoc.js
+++ b/components/doc/accordion/importdoc.js
@@ -11,7 +11,7 @@ import { Accordion, AccordionTab } from 'primereact/accordion';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/accordion/theming/tailwinddoc.js b/components/doc/accordion/theming/tailwinddoc.js
index 17113f8d90..1f92bc501a 100644
--- a/components/doc/accordion/theming/tailwinddoc.js
+++ b/components/doc/accordion/theming/tailwinddoc.js
@@ -99,7 +99,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/autocomplete/accessibilitydoc.js b/components/doc/autocomplete/accessibilitydoc.js
index 1020bdc72b..3cebfe97c0 100644
--- a/components/doc/autocomplete/accessibilitydoc.js
+++ b/components/doc/autocomplete/accessibilitydoc.js
@@ -30,7 +30,7 @@ export function AccessibilityDoc() {
                 input element.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/autocomplete/importdoc.js b/components/doc/autocomplete/importdoc.js
index 709d44ac0d..5d32d28d68 100644
--- a/components/doc/autocomplete/importdoc.js
+++ b/components/doc/autocomplete/importdoc.js
@@ -11,7 +11,7 @@ import { AutoComplete } from 'primereact/autocomplete';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/autocomplete/theming/tailwinddoc.js b/components/doc/autocomplete/theming/tailwinddoc.js
index b7f3a58f2b..9783e7648d 100644
--- a/components/doc/autocomplete/theming/tailwinddoc.js
+++ b/components/doc/autocomplete/theming/tailwinddoc.js
@@ -109,7 +109,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/avatar/importdoc.js b/components/doc/avatar/importdoc.js
index 9ef33e3413..14c9c2dcd8 100644
--- a/components/doc/avatar/importdoc.js
+++ b/components/doc/avatar/importdoc.js
@@ -12,7 +12,7 @@ import { AvatarGroup } from 'primereact/avatargroup';   //Optional for grouping
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/avatar/theming/tailwinddoc.js b/components/doc/avatar/theming/tailwinddoc.js
index 22fecac375..b0a3d7d24b 100644
--- a/components/doc/avatar/theming/tailwinddoc.js
+++ b/components/doc/avatar/theming/tailwinddoc.js
@@ -90,7 +90,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/badge/importdoc.js b/components/doc/badge/importdoc.js
index cb5e4640fb..ae3a910a1d 100644
--- a/components/doc/badge/importdoc.js
+++ b/components/doc/badge/importdoc.js
@@ -11,7 +11,7 @@ import { Badge } from 'primereact/badge';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/badge/theming/tailwinddoc.js b/components/doc/badge/theming/tailwinddoc.js
index bf70ebdb77..ab8a4ddf32 100644
--- a/components/doc/badge/theming/tailwinddoc.js
+++ b/components/doc/badge/theming/tailwinddoc.js
@@ -70,7 +70,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/blockui/importdoc.js b/components/doc/blockui/importdoc.js
index a2cb196f75..8d1ab01b33 100644
--- a/components/doc/blockui/importdoc.js
+++ b/components/doc/blockui/importdoc.js
@@ -11,7 +11,7 @@ import { BlockUI } from 'primereact/blockui';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/blockui/theming/tailwinddoc.js b/components/doc/blockui/theming/tailwinddoc.js
index 68e5211d43..b1a419c5b5 100644
--- a/components/doc/blockui/theming/tailwinddoc.js
+++ b/components/doc/blockui/theming/tailwinddoc.js
@@ -52,7 +52,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/breadcrumb/importdoc.js b/components/doc/breadcrumb/importdoc.js
index 373804170a..9d34ccf089 100644
--- a/components/doc/breadcrumb/importdoc.js
+++ b/components/doc/breadcrumb/importdoc.js
@@ -11,7 +11,7 @@ import { BreadCrumb } from 'primereact/breadcrumb';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/breadcrumb/theming/tailwinddoc.js b/components/doc/breadcrumb/theming/tailwinddoc.js
index 63f931e5b7..9b38f65f2e 100644
--- a/components/doc/breadcrumb/theming/tailwinddoc.js
+++ b/components/doc/breadcrumb/theming/tailwinddoc.js
@@ -52,7 +52,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/button/accessibilitydoc.js b/components/doc/button/accessibilitydoc.js
index 0504d01973..85967b6f61 100644
--- a/components/doc/button/accessibilitydoc.js
+++ b/components/doc/button/accessibilitydoc.js
@@ -23,7 +23,7 @@ export function AccessibilityDoc() {
                 icon only or custom templating is used, it is recommended to use <i>aria-label</i> so that screen readers would be able to read the element properly.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/button/importdoc.js b/components/doc/button/importdoc.js
index 1e2c513f2d..7456537579 100644
--- a/components/doc/button/importdoc.js
+++ b/components/doc/button/importdoc.js
@@ -11,7 +11,7 @@ import { Button } from 'primereact/button';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/button/theming/tailwinddoc.js b/components/doc/button/theming/tailwinddoc.js
index 380a729139..1a6cd357d2 100644
--- a/components/doc/button/theming/tailwinddoc.js
+++ b/components/doc/button/theming/tailwinddoc.js
@@ -140,7 +140,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/calendar/accessibilitydoc.js b/components/doc/calendar/accessibilitydoc.js
index 284012dba6..3d873264f1 100644
--- a/components/doc/calendar/accessibilitydoc.js
+++ b/components/doc/calendar/accessibilitydoc.js
@@ -49,7 +49,7 @@ export function AccessibilityDoc() {
                 Calendar also includes a hidden section that is only available to screen readers with <i>aria-live</i> as "polite". This element is updated when the selected date changes to instruct the user about the current date selected.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Choose Date Button Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/calendar/importdoc.js b/components/doc/calendar/importdoc.js
index 79b6f55624..f60c3f195a 100644
--- a/components/doc/calendar/importdoc.js
+++ b/components/doc/calendar/importdoc.js
@@ -11,7 +11,7 @@ import { Calendar } from 'primereact/calendar';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js
index b01bdd8260..2b8cbf948a 100644
--- a/components/doc/calendar/theming/tailwinddoc.js
+++ b/components/doc/calendar/theming/tailwinddoc.js
@@ -167,7 +167,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/captcha/importdoc.js b/components/doc/captcha/importdoc.js
index 36814b46f3..f4d8063806 100644
--- a/components/doc/captcha/importdoc.js
+++ b/components/doc/captcha/importdoc.js
@@ -11,7 +11,7 @@ import { Captcha } from 'primereact/captcha';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/card/accessibilitydoc.js b/components/doc/card/accessibilitydoc.js
index 88a24c8bdd..99af585a8f 100644
--- a/components/doc/card/accessibilitydoc.js
+++ b/components/doc/card/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 roles like <i>region</i>, you may use the <i>role</i> property.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <p>Component does not include any interactive elements.</p>
diff --git a/components/doc/card/importdoc.js b/components/doc/card/importdoc.js
index 8b6cbabe79..329c855554 100644
--- a/components/doc/card/importdoc.js
+++ b/components/doc/card/importdoc.js
@@ -11,7 +11,7 @@ import { Card } from 'primereact/card';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/card/theming/tailwinddoc.js b/components/doc/card/theming/tailwinddoc.js
index 42cbd87da8..817e718761 100644
--- a/components/doc/card/theming/tailwinddoc.js
+++ b/components/doc/card/theming/tailwinddoc.js
@@ -66,7 +66,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/carousel/importdoc.js b/components/doc/carousel/importdoc.js
index 4664dbe77d..5127af9535 100644
--- a/components/doc/carousel/importdoc.js
+++ b/components/doc/carousel/importdoc.js
@@ -11,7 +11,7 @@ import { Carousel } from 'primereact/carousel';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/carousel/theming/tailwinddoc.js b/components/doc/carousel/theming/tailwinddoc.js
index 9d4a4f85d0..2e945cb313 100644
--- a/components/doc/carousel/theming/tailwinddoc.js
+++ b/components/doc/carousel/theming/tailwinddoc.js
@@ -129,7 +129,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['ProductService']} />
             </DocSectionText>
diff --git a/components/doc/cascadeselect/accessibilitydoc.js b/components/doc/cascadeselect/accessibilitydoc.js
index c50f463481..bc1396b699 100644
--- a/components/doc/cascadeselect/accessibilitydoc.js
+++ b/components/doc/cascadeselect/accessibilitydoc.js
@@ -27,7 +27,7 @@ export function AccessibilityDoc() {
                 If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Closed State Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/cascadeselect/importdoc.js b/components/doc/cascadeselect/importdoc.js
index afa2a26ee1..aa589848cf 100644
--- a/components/doc/cascadeselect/importdoc.js
+++ b/components/doc/cascadeselect/importdoc.js
@@ -11,7 +11,7 @@ import { CascadeSelect } from 'primereact/cascadeselect';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/cascadeselect/theming/tailwinddoc.js b/components/doc/cascadeselect/theming/tailwinddoc.js
index 994c1191b0..1adc21703b 100644
--- a/components/doc/cascadeselect/theming/tailwinddoc.js
+++ b/components/doc/cascadeselect/theming/tailwinddoc.js
@@ -150,7 +150,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/chart/accessibilitydoc.js b/components/doc/chart/accessibilitydoc.js
index b127d465ef..db4391b50d 100644
--- a/components/doc/chart/accessibilitydoc.js
+++ b/components/doc/chart/accessibilitydoc.js
@@ -23,7 +23,7 @@ export function AccessibilityDoc() {
                 guide for more information. The canvas element can be customized with <i>canvasProps</i> property to define aria roles and properties, in addition any content inside the component is directly passed as a child of the canvas to be able
                 to provide fallback content like a table.
             </p>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </DocSectionText>
     );
 }
diff --git a/components/doc/chart/chartjsdoc.js b/components/doc/chart/chartjsdoc.js
index 66f2553957..09db954d38 100644
--- a/components/doc/chart/chartjsdoc.js
+++ b/components/doc/chart/chartjsdoc.js
@@ -15,7 +15,7 @@ npm install chart.js
                     Chart component uses <a href="https://chartjs.org/">Chart.JS</a> underneath so it needs to be installed as a dependency.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/chart/importdoc.js b/components/doc/chart/importdoc.js
index 5dcec213e9..ef1f445ef7 100644
--- a/components/doc/chart/importdoc.js
+++ b/components/doc/chart/importdoc.js
@@ -11,7 +11,7 @@ import { Chart } from 'primereact/chart';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/chart/theming/tailwinddoc.js b/components/doc/chart/theming/tailwinddoc.js
index 35dc63c4c3..1862e88f5f 100644
--- a/components/doc/chart/theming/tailwinddoc.js
+++ b/components/doc/chart/theming/tailwinddoc.js
@@ -73,7 +73,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} dependencies={{ 'chart.js': '3.9.1' }} embedded />
             </DocSectionText>
diff --git a/components/doc/checkbox/accessibilitydoc.js b/components/doc/checkbox/accessibilitydoc.js
index 85cf17845e..bd35f90b4f 100644
--- a/components/doc/checkbox/accessibilitydoc.js
+++ b/components/doc/checkbox/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i>, <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/checkbox/importdoc.js b/components/doc/checkbox/importdoc.js
index 630bbbddce..b8f638a5d2 100644
--- a/components/doc/checkbox/importdoc.js
+++ b/components/doc/checkbox/importdoc.js
@@ -11,7 +11,7 @@ import { Checkbox } from 'primereact/checkbox';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/checkbox/theming/tailwinddoc.js b/components/doc/checkbox/theming/tailwinddoc.js
index b82e318e25..802541acfc 100644
--- a/components/doc/checkbox/theming/tailwinddoc.js
+++ b/components/doc/checkbox/theming/tailwinddoc.js
@@ -54,7 +54,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/chip/importdoc.js b/components/doc/chip/importdoc.js
index 37da39e5b0..e32938fe39 100644
--- a/components/doc/chip/importdoc.js
+++ b/components/doc/chip/importdoc.js
@@ -11,7 +11,7 @@ import { Chip } from 'primereact/chip';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/chip/theming/tailwinddoc.js b/components/doc/chip/theming/tailwinddoc.js
index ace3f12e4c..bc30477550 100644
--- a/components/doc/chip/theming/tailwinddoc.js
+++ b/components/doc/chip/theming/tailwinddoc.js
@@ -48,7 +48,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/chips/accessibilitydoc.js b/components/doc/chips/accessibilitydoc.js
index 4269f6e454..ce0174b365 100644
--- a/components/doc/chips/accessibilitydoc.js
+++ b/components/doc/chips/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 set to horizontal whereas each chip has the <i>option</i> role with <i>aria-label</i> set to the label of the chip.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Input Field Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/chips/importdoc.js b/components/doc/chips/importdoc.js
index 87b52d28fc..78ee99c3e6 100644
--- a/components/doc/chips/importdoc.js
+++ b/components/doc/chips/importdoc.js
@@ -11,7 +11,7 @@ import { Chips } from 'primereact/chips';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/chips/theming/tailwinddoc.js b/components/doc/chips/theming/tailwinddoc.js
index d8f2670976..3f2ffb8b77 100644
--- a/components/doc/chips/theming/tailwinddoc.js
+++ b/components/doc/chips/theming/tailwinddoc.js
@@ -59,7 +59,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/colorpicker/importdoc.js b/components/doc/colorpicker/importdoc.js
index 555d4edc6f..1299c85497 100644
--- a/components/doc/colorpicker/importdoc.js
+++ b/components/doc/colorpicker/importdoc.js
@@ -11,7 +11,7 @@ import { ColorPicker } from 'primereact/colorpicker';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/colorpicker/theming/tailwinddoc.js b/components/doc/colorpicker/theming/tailwinddoc.js
index 80ec24edae..2350e4e25e 100644
--- a/components/doc/colorpicker/theming/tailwinddoc.js
+++ b/components/doc/colorpicker/theming/tailwinddoc.js
@@ -78,7 +78,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/colors/overviewdoc.js b/components/doc/colors/overviewdoc.js
index 29918626ef..0497d57e57 100644
--- a/components/doc/colors/overviewdoc.js
+++ b/components/doc/colors/overviewdoc.js
@@ -81,7 +81,7 @@ export function OverviewDoc(props) {
                 <div style={{ backgroundColor: 'var(--highlight-bg)', color: 'var(--highlight-text-color)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>Highlighted Item</div>
                 <div style={{ backgroundColor: 'var(--primary-color)', color: 'var(--primary-color-text)', borderRadius: 'var(--border-radius)', padding: '3rem' }}>Primary Color</div>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/common/docsectioncode.js b/components/doc/common/docsectioncode.js
index 1c1a8c9552..5fcbacff81 100644
--- a/components/doc/common/docsectioncode.js
+++ b/components/doc/common/docsectioncode.js
@@ -77,19 +77,6 @@ export function DocSectionCode(props) {
                                 <i className="pi pi-database"></i>
                             </Button>
                         ) : null}
-                        {!props.hideCodeSandbox && (
-                            <Button
-                                type="button"
-                                className="h-2rem w-2rem p-0 inline-flex align-items-center justify-content-center shadow-none"
-                                tooltip="Edit in CodeSandbox"
-                                tooltipOptions={{ position: 'bottom', className: 'doc-section-code-tooltip' }}
-                                onClick={() => codeEditor.openCodeSandbox(codeLang)}
-                            >
-                                <svg role="img" viewBox="0 0 24 24" width={16} height={16} fill={'currentColor'} style={{ display: 'block' }}>
-                                    <path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z" />
-                                </svg>
-                            </Button>
-                        )}
                         {!props.hideStackBlitz && (
                             <Button
                                 type="button"
diff --git a/components/doc/configuration/appendtodoc.js b/components/doc/configuration/appendtodoc.js
index 03dea8705c..287ceacd4d 100644
--- a/components/doc/configuration/appendtodoc.js
+++ b/components/doc/configuration/appendtodoc.js
@@ -30,7 +30,7 @@ export default function MyApp({ Component }) {
                     are appended to document body via Portals.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/csstransitiondoc.js b/components/doc/configuration/csstransitiondoc.js
index 0a51c0691b..6c83fb5e10 100644
--- a/components/doc/configuration/csstransitiondoc.js
+++ b/components/doc/configuration/csstransitiondoc.js
@@ -29,7 +29,7 @@ export default function MyApp({ Component }) {
                     PrimeReact components utilize <a href="https://www.npmjs.com/package/react-transition-group">react-transition-group</a> internally to implement animations. Setting <i>cssTransition</i> to false disables all animations.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/filtermatchmodedoc.js b/components/doc/configuration/filtermatchmodedoc.js
index 37aafc18ad..6b2e4f3bf3 100644
--- a/components/doc/configuration/filtermatchmodedoc.js
+++ b/components/doc/configuration/filtermatchmodedoc.js
@@ -31,7 +31,7 @@ export default function MyApp({ Component }) {
             <DocSectionText {...props}>
                 <p>Default filter modes to display on DataTable filter menus.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/hideoverlaysdoc.js b/components/doc/configuration/hideoverlaysdoc.js
index effa093e18..ccf95d30ed 100644
--- a/components/doc/configuration/hideoverlaysdoc.js
+++ b/components/doc/configuration/hideoverlaysdoc.js
@@ -38,7 +38,7 @@ body {
                     overlay follow the scroll. Default value is false. IMPORTANT: Your <i>document.body</i> must have <i>overflow</i> CSS on this to work properly.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/inputstyledoc.js b/components/doc/configuration/inputstyledoc.js
index 8a151710a9..a02cb1f3fa 100644
--- a/components/doc/configuration/inputstyledoc.js
+++ b/components/doc/configuration/inputstyledoc.js
@@ -32,7 +32,7 @@ export default function MyApp({ Component }) {
                     inputStyle to <i>filled</i> at PrimeReact configuration as well.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/locale/addlocaledoc.js b/components/doc/configuration/locale/addlocaledoc.js
index 3628c0534b..f5435f0add 100644
--- a/components/doc/configuration/locale/addlocaledoc.js
+++ b/components/doc/configuration/locale/addlocaledoc.js
@@ -25,7 +25,7 @@ addLocale('es', {
                     New locale settings can be added using <i>addLocale</i> method.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/locale/importdoc.js b/components/doc/configuration/locale/importdoc.js
index f412ad5c0c..2ac6c0615a 100644
--- a/components/doc/configuration/locale/importdoc.js
+++ b/components/doc/configuration/locale/importdoc.js
@@ -16,7 +16,7 @@ import { locale, addLocale, updateLocaleOption, updateLocaleOptions, localeOptio
                     Configuration is managed by the <Link href="/configuration/#api.API.LocaleOptions">Locale API</Link> imported from <i>primereact/api</i>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/locale/setlocaledoc.js b/components/doc/configuration/locale/setlocaledoc.js
index 51b0b24d6f..d572beec1a 100644
--- a/components/doc/configuration/locale/setlocaledoc.js
+++ b/components/doc/configuration/locale/setlocaledoc.js
@@ -15,7 +15,7 @@ locale('en');
                     An available locale can be set with <i>locale</i> method at anytime.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/locale/setuplocaledoc.js b/components/doc/configuration/locale/setuplocaledoc.js
index 161f0c27f4..aa932e4091 100644
--- a/components/doc/configuration/locale/setuplocaledoc.js
+++ b/components/doc/configuration/locale/setuplocaledoc.js
@@ -29,7 +29,7 @@ export default function MyApp({ Component }) {
                     To establish the default locale for your entire application, you can utilize the <i>PrimeReactProvider</i>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/noncedoc.js b/components/doc/configuration/noncedoc.js
index cadda60887..be461fd410 100644
--- a/components/doc/configuration/noncedoc.js
+++ b/components/doc/configuration/noncedoc.js
@@ -29,7 +29,7 @@ export default function MyApp({ Component }) {
                     The <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce">nonce</a> value to use on dynamically generated style elements.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/nullsortorderdoc.js b/components/doc/configuration/nullsortorderdoc.js
index 1a23972de9..6faa9cff63 100644
--- a/components/doc/configuration/nullsortorderdoc.js
+++ b/components/doc/configuration/nullsortorderdoc.js
@@ -30,7 +30,7 @@ export default function MyApp({ Component }) {
                     bottom of the list in descending mode.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/rippledoc.js b/components/doc/configuration/rippledoc.js
index 7c059abd3f..7165916ffd 100644
--- a/components/doc/configuration/rippledoc.js
+++ b/components/doc/configuration/rippledoc.js
@@ -27,7 +27,7 @@ export default function MyApp({ Component }) {
             <DocSectionText {...props}>
                 <p>Ripple is an optional animation for the supported components such as buttons. It is disabled by default.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/stylecontainer.js b/components/doc/configuration/stylecontainer.js
index f7e0735a0b..3cd27616e6 100644
--- a/components/doc/configuration/stylecontainer.js
+++ b/components/doc/configuration/stylecontainer.js
@@ -33,7 +33,7 @@ ReactDOM.createRoot(mountHere).render(
                     . By default all dynamic styles are appended to <i>document.head</i>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/configuration/zindexdoc.js b/components/doc/configuration/zindexdoc.js
index 33dd242ec4..35e35d23fe 100644
--- a/components/doc/configuration/zindexdoc.js
+++ b/components/doc/configuration/zindexdoc.js
@@ -41,7 +41,7 @@ export default function MyApp({ Component }) {
                     The ZIndex of all components is increased according to their groups in harmony with each other. When <i>autoZIndex</i> is false, each group increments its zIndex within itself.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/confirmdialog/importdoc.js b/components/doc/confirmdialog/importdoc.js
index ebba9efaca..302f1083e0 100644
--- a/components/doc/confirmdialog/importdoc.js
+++ b/components/doc/confirmdialog/importdoc.js
@@ -12,7 +12,7 @@ import { confirmDialog } from 'primereact/confirmdialog'; // For confirmDialog m
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/confirmdialog/theming/tailwinddoc.js b/components/doc/confirmdialog/theming/tailwinddoc.js
index 3ad42f1c35..b3fde6ce31 100644
--- a/components/doc/confirmdialog/theming/tailwinddoc.js
+++ b/components/doc/confirmdialog/theming/tailwinddoc.js
@@ -86,7 +86,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/confirmpopup/importdoc.js b/components/doc/confirmpopup/importdoc.js
index 75d6a30806..b5dd63a933 100644
--- a/components/doc/confirmpopup/importdoc.js
+++ b/components/doc/confirmpopup/importdoc.js
@@ -12,7 +12,7 @@ import { confirmPopup } from 'primereact/confirmpopup'; // To use confirmPopup m
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/confirmpopup/theming/tailwinddoc.js b/components/doc/confirmpopup/theming/tailwinddoc.js
index 262a15d03c..40b4defaab 100644
--- a/components/doc/confirmpopup/theming/tailwinddoc.js
+++ b/components/doc/confirmpopup/theming/tailwinddoc.js
@@ -95,7 +95,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/contextmenu/importdoc.js b/components/doc/contextmenu/importdoc.js
index 2de6b479b4..5137f8c625 100644
--- a/components/doc/contextmenu/importdoc.js
+++ b/components/doc/contextmenu/importdoc.js
@@ -11,7 +11,7 @@ import { ContextMenu } from 'primereact/contextmenu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/contextmenu/theming/tailwinddoc.js b/components/doc/contextmenu/theming/tailwinddoc.js
index 803e4171aa..788ab7d602 100644
--- a/components/doc/contextmenu/theming/tailwinddoc.js
+++ b/components/doc/contextmenu/theming/tailwinddoc.js
@@ -69,7 +69,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/csslayer/bootstrapdoc.js b/components/doc/csslayer/bootstrapdoc.js
index 8e4aabb903..9f34e1a422 100644
--- a/components/doc/csslayer/bootstrapdoc.js
+++ b/components/doc/csslayer/bootstrapdoc.js
@@ -15,7 +15,7 @@ export function BootstrapDoc(props) {
             <p>
                 Bootstrap has a <i>reboot</i> utility to reset the CSS of the standard elements. If you are including this utility, you may give it a layer while importing it.
             </p>
-            <DocSectionCode code={code} hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
         </DocSectionText>
     );
 }
diff --git a/components/doc/csslayer/normalizedoc.js b/components/doc/csslayer/normalizedoc.js
index 739803797b..8c902bf678 100644
--- a/components/doc/csslayer/normalizedoc.js
+++ b/components/doc/csslayer/normalizedoc.js
@@ -13,7 +13,7 @@ export function NormalizeDoc(props) {
     return (
         <DocSectionText {...props}>
             <p>Normalize is another utility to reset CSS of the standard elements. While importing the CSS file, assign it to a layer and define the layer order with primereact coming after the normalized layer.</p>
-            <DocSectionCode code={code} hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
         </DocSectionText>
     );
 }
diff --git a/components/doc/csslayer/resetdoc.js b/components/doc/csslayer/resetdoc.js
index 939d22683a..0101ff77b2 100644
--- a/components/doc/csslayer/resetdoc.js
+++ b/components/doc/csslayer/resetdoc.js
@@ -24,7 +24,7 @@ export function ResetDoc(props) {
                 override the PrimeReact components leading to unexpected results. A common use case for global styles applying to standard HTML elements is CSS reset utilities to remove the default styling of the browsers. In this case, best practice
                 is wrapping your CSS in a layer like <i>reset</i> and make sure <i>primereact</i> comes after your layer since layers defined after has higher precedence. This way, your Reset CSS does not get in the way of PrimeReact components.
             </p>
-            <DocSectionCode code={code} hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
         </DocSectionText>
     );
 }
diff --git a/components/doc/csslayer/specificitydoc.js b/components/doc/csslayer/specificitydoc.js
index 0b1bf4706c..82071fa5ce 100644
--- a/components/doc/csslayer/specificitydoc.js
+++ b/components/doc/csslayer/specificitydoc.js
@@ -76,7 +76,7 @@ export function SpecificityDemo() {
                 />
                 <style>{css}</style>
             </div>
-            <DocSectionCode code={code} hideToggleCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode hideStackBlitz />
             <p>
                 Layers also make it possible to use CSS Modules, view the <Link href="/theming/#cssmodules">CSS Modules</Link> guide for examples.
             </p>
diff --git a/components/doc/csslayer/tailwinddoc.js b/components/doc/csslayer/tailwinddoc.js
index 41aadaebb1..c663e6a850 100644
--- a/components/doc/csslayer/tailwinddoc.js
+++ b/components/doc/csslayer/tailwinddoc.js
@@ -26,7 +26,7 @@ export function TailwindDoc(props) {
                 </a>
                 . If you are using this feature, wrap the base and utilities in separate layers and make sure primereact layer comes after the base.{' '}
             </p>
-            <DocSectionCode code={code} hideToggleCode importCode hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode importCode hideStackBlitz />
         </DocSectionText>
     );
 }
diff --git a/components/doc/customicons/fontawesomedoc.js b/components/doc/customicons/fontawesomedoc.js
index ea513ce369..899dedbbf0 100644
--- a/components/doc/customicons/fontawesomedoc.js
+++ b/components/doc/customicons/fontawesomedoc.js
@@ -19,7 +19,7 @@ export function FontAwesomeDoc(props) {
                     <a href="https://fontawesome.com/">Font Awesome</a> is a popular icon library with a wide range of icons.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/customicons/imagedoc.js b/components/doc/customicons/imagedoc.js
index c676530e24..f636b0776e 100644
--- a/components/doc/customicons/imagedoc.js
+++ b/components/doc/customicons/imagedoc.js
@@ -13,7 +13,7 @@ export function ImageDoc(props) {
             <DocSectionText {...props}>
                 <p>Any time of image can be used as an icon.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/customicons/materialdoc.js b/components/doc/customicons/materialdoc.js
index 4f23ee6d8b..70fcccf499 100644
--- a/components/doc/customicons/materialdoc.js
+++ b/components/doc/customicons/materialdoc.js
@@ -17,7 +17,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
                     <a href="https://fonts.google.com/icons">Material icons</a> is the official icon library based on Google Material Design.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/customicons/svgdoc.js b/components/doc/customicons/svgdoc.js
index 031b1262df..3dbfc0070b 100644
--- a/components/doc/customicons/svgdoc.js
+++ b/components/doc/customicons/svgdoc.js
@@ -18,7 +18,7 @@ export function SVGDoc(props) {
             <DocSectionText {...props}>
                 <p>Inline SVGs are embedded inside the DOM.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/datascroller/importdoc.js b/components/doc/datascroller/importdoc.js
index a7c6d2719a..28729c9114 100644
--- a/components/doc/datascroller/importdoc.js
+++ b/components/doc/datascroller/importdoc.js
@@ -11,7 +11,7 @@ import { DataScroller } from 'primereact/datascroller';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/datascroller/theming/tailwinddoc.js b/components/doc/datascroller/theming/tailwinddoc.js
index 430d500df1..f6e9994395 100644
--- a/components/doc/datascroller/theming/tailwinddoc.js
+++ b/components/doc/datascroller/theming/tailwinddoc.js
@@ -96,7 +96,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['ProductService']} />
             </DocSectionText>
diff --git a/components/doc/datatable/importdoc.js b/components/doc/datatable/importdoc.js
index c10b66f088..09f4a7f768 100644
--- a/components/doc/datatable/importdoc.js
+++ b/components/doc/datatable/importdoc.js
@@ -12,7 +12,7 @@ import { Column } from 'primereact/column';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/datatable/theming/tailwinddoc.js b/components/doc/datatable/theming/tailwinddoc.js
index 1dd344d10c..558dc2e625 100644
--- a/components/doc/datatable/theming/tailwinddoc.js
+++ b/components/doc/datatable/theming/tailwinddoc.js
@@ -569,7 +569,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['CustomerService']} />
             </DocSectionText>
diff --git a/components/doc/dataview/importdoc.js b/components/doc/dataview/importdoc.js
index 0e7b6bf9f5..81ea7a36a0 100644
--- a/components/doc/dataview/importdoc.js
+++ b/components/doc/dataview/importdoc.js
@@ -11,7 +11,7 @@ import { DataView, DataViewLayoutOptions } from 'primereact/dataview';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/dataview/theming/tailwinddoc.js b/components/doc/dataview/theming/tailwinddoc.js
index 81667a66bd..5d9859283e 100644
--- a/components/doc/dataview/theming/tailwinddoc.js
+++ b/components/doc/dataview/theming/tailwinddoc.js
@@ -170,7 +170,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['ProductService']} />
             </DocSectionText>
diff --git a/components/doc/deferredcontent/importdoc.js b/components/doc/deferredcontent/importdoc.js
index e06926187a..3d2defd0cd 100644
--- a/components/doc/deferredcontent/importdoc.js
+++ b/components/doc/deferredcontent/importdoc.js
@@ -11,7 +11,7 @@ import { DeferredContent } from 'primereact/deferredcontent';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/dialog/importdoc.js b/components/doc/dialog/importdoc.js
index 1ec4b55f41..77a1fb1326 100644
--- a/components/doc/dialog/importdoc.js
+++ b/components/doc/dialog/importdoc.js
@@ -11,7 +11,7 @@ import { Dialog } from 'primereact/dialog';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/dialog/theming/tailwinddoc.js b/components/doc/dialog/theming/tailwinddoc.js
index 51216af5a1..c1cafae6c2 100644
--- a/components/doc/dialog/theming/tailwinddoc.js
+++ b/components/doc/dialog/theming/tailwinddoc.js
@@ -112,7 +112,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/divider/importdoc.js b/components/doc/divider/importdoc.js
index fbdf5bded1..fd0df38057 100644
--- a/components/doc/divider/importdoc.js
+++ b/components/doc/divider/importdoc.js
@@ -11,7 +11,7 @@ import { Divider } from 'primereact/divider';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/divider/theming/tailwinddoc.js b/components/doc/divider/theming/tailwinddoc.js
index 8c1eb5c9dc..b4a1978f08 100644
--- a/components/doc/divider/theming/tailwinddoc.js
+++ b/components/doc/divider/theming/tailwinddoc.js
@@ -80,7 +80,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/dock/importdoc.js b/components/doc/dock/importdoc.js
index 487febf0cf..3d8a6daf5e 100644
--- a/components/doc/dock/importdoc.js
+++ b/components/doc/dock/importdoc.js
@@ -11,7 +11,7 @@ import { Dock } from 'primereact/dock';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/dock/theming/tailwinddoc.js b/components/doc/dock/theming/tailwinddoc.js
index a2b47010c9..e492eeab19 100644
--- a/components/doc/dock/theming/tailwinddoc.js
+++ b/components/doc/dock/theming/tailwinddoc.js
@@ -141,7 +141,7 @@ export default function BasicDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/dropdown/accessibilitydoc.js b/components/doc/dropdown/accessibilitydoc.js
index c24792805d..35727b78e4 100644
--- a/components/doc/dropdown/accessibilitydoc.js
+++ b/components/doc/dropdown/accessibilitydoc.js
@@ -28,7 +28,7 @@ export function AccessibilityDoc() {
                 If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Closed State Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/dropdown/importdoc.js b/components/doc/dropdown/importdoc.js
index c74eeda66c..7a5c87f673 100644
--- a/components/doc/dropdown/importdoc.js
+++ b/components/doc/dropdown/importdoc.js
@@ -11,7 +11,7 @@ import { Dropdown } from 'primereact/dropdown';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/dropdown/theming/tailwinddoc.js b/components/doc/dropdown/theming/tailwinddoc.js
index c48a689670..836a6fc0db 100644
--- a/components/doc/dropdown/theming/tailwinddoc.js
+++ b/components/doc/dropdown/theming/tailwinddoc.js
@@ -114,7 +114,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/editor/importdoc.js b/components/doc/editor/importdoc.js
index 9c1c5d96de..8c8563db6d 100644
--- a/components/doc/editor/importdoc.js
+++ b/components/doc/editor/importdoc.js
@@ -11,7 +11,7 @@ import { Editor } from 'primereact/editor';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/editor/quilldoc.js b/components/doc/editor/quilldoc.js
index 57768944fc..2c5d0fecb7 100644
--- a/components/doc/editor/quilldoc.js
+++ b/components/doc/editor/quilldoc.js
@@ -15,7 +15,7 @@ npm install quill
                     Editor uses <a href="https://quilljs.com/">Quill</a> editor underneath so it needs to be installed as a dependency.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/editor/theming/tailwinddoc.js b/components/doc/editor/theming/tailwinddoc.js
index 4d97ef1bb9..6298d02401 100644
--- a/components/doc/editor/theming/tailwinddoc.js
+++ b/components/doc/editor/theming/tailwinddoc.js
@@ -45,7 +45,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded dependencies={{ quill: '1.3.7' }} />
             </DocSectionText>
diff --git a/components/doc/fieldset/importdoc.js b/components/doc/fieldset/importdoc.js
index 550358d7e3..b991233c3b 100644
--- a/components/doc/fieldset/importdoc.js
+++ b/components/doc/fieldset/importdoc.js
@@ -11,7 +11,7 @@ import { Fieldset } from 'primereact/fieldset';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/fieldset/theming/tailwinddoc.js b/components/doc/fieldset/theming/tailwinddoc.js
index 125987f289..59a92c16d1 100644
--- a/components/doc/fieldset/theming/tailwinddoc.js
+++ b/components/doc/fieldset/theming/tailwinddoc.js
@@ -78,7 +78,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/fileupload/importdoc.js b/components/doc/fileupload/importdoc.js
index f4cdaf17bf..0ad6837071 100644
--- a/components/doc/fileupload/importdoc.js
+++ b/components/doc/fileupload/importdoc.js
@@ -11,7 +11,7 @@ import { FileUpload } from 'primereact/fileupload';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/fileupload/theming/tailwinddoc.js b/components/doc/fileupload/theming/tailwinddoc.js
index 0e5e4bfa42..52afd3ba1e 100644
--- a/components/doc/fileupload/theming/tailwinddoc.js
+++ b/components/doc/fileupload/theming/tailwinddoc.js
@@ -63,7 +63,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/galleria/importdoc.js b/components/doc/galleria/importdoc.js
index f41c05ba4a..75eceedf26 100644
--- a/components/doc/galleria/importdoc.js
+++ b/components/doc/galleria/importdoc.js
@@ -11,7 +11,7 @@ import { Galleria } from 'primereact/galleria';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/galleria/theming/tailwinddoc.js b/components/doc/galleria/theming/tailwinddoc.js
index 402c604cd6..0bea93b25a 100644
--- a/components/doc/galleria/theming/tailwinddoc.js
+++ b/components/doc/galleria/theming/tailwinddoc.js
@@ -145,7 +145,7 @@ export default function UnstyleDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['PhotoService']} />
             </DocSectionText>
diff --git a/components/doc/gmap/importdoc.js b/components/doc/gmap/importdoc.js
index 4ae1a7f6dc..2475e6f134 100644
--- a/components/doc/gmap/importdoc.js
+++ b/components/doc/gmap/importdoc.js
@@ -11,7 +11,7 @@ import { GMap } from 'primereact/gmap';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useclickoutside/importdoc.js b/components/doc/hooks/useclickoutside/importdoc.js
index 72fab26036..e68e6a182a 100644
--- a/components/doc/hooks/useclickoutside/importdoc.js
+++ b/components/doc/hooks/useclickoutside/importdoc.js
@@ -11,7 +11,7 @@ import { useClickOutside } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usecounter/importdoc.js b/components/doc/hooks/usecounter/importdoc.js
index 174f3b4336..e7ed9dc6fc 100644
--- a/components/doc/hooks/usecounter/importdoc.js
+++ b/components/doc/hooks/usecounter/importdoc.js
@@ -11,7 +11,7 @@ import { useCounter } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usedebounce/importdoc.js b/components/doc/hooks/usedebounce/importdoc.js
index ac4fbab719..cce68227b8 100644
--- a/components/doc/hooks/usedebounce/importdoc.js
+++ b/components/doc/hooks/usedebounce/importdoc.js
@@ -11,7 +11,7 @@ import { useDebounce } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useeventlistener/importdoc.js b/components/doc/hooks/useeventlistener/importdoc.js
index 66cde4cdad..0f8d3bc158 100644
--- a/components/doc/hooks/useeventlistener/importdoc.js
+++ b/components/doc/hooks/useeventlistener/importdoc.js
@@ -11,7 +11,7 @@ import { useEventListener } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usefavicon/importdoc.js b/components/doc/hooks/usefavicon/importdoc.js
index 3fda703872..13bfe0922a 100644
--- a/components/doc/hooks/usefavicon/importdoc.js
+++ b/components/doc/hooks/usefavicon/importdoc.js
@@ -11,7 +11,7 @@ import { useFavicon } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useintersectionobserver/importdoc.js b/components/doc/hooks/useintersectionobserver/importdoc.js
index 3e2e45db8e..d2c5e11400 100644
--- a/components/doc/hooks/useintersectionobserver/importdoc.js
+++ b/components/doc/hooks/useintersectionobserver/importdoc.js
@@ -11,7 +11,7 @@ import { useIntersectionObserver } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useinterval/importdoc.js b/components/doc/hooks/useinterval/importdoc.js
index c1c4f949c3..b56bb3217c 100644
--- a/components/doc/hooks/useinterval/importdoc.js
+++ b/components/doc/hooks/useinterval/importdoc.js
@@ -11,7 +11,7 @@ import { useInterval } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usemounteffect/importdoc.js b/components/doc/hooks/usemounteffect/importdoc.js
index 25b149c43e..006fb6cca0 100644
--- a/components/doc/hooks/usemounteffect/importdoc.js
+++ b/components/doc/hooks/usemounteffect/importdoc.js
@@ -11,7 +11,7 @@ import { useMountEffect } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usemouse/importdoc.js b/components/doc/hooks/usemouse/importdoc.js
index 5f4e86577e..7daaddf0ea 100644
--- a/components/doc/hooks/usemouse/importdoc.js
+++ b/components/doc/hooks/usemouse/importdoc.js
@@ -11,7 +11,7 @@ import { useMouse } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usemove/importdoc.js b/components/doc/hooks/usemove/importdoc.js
index 85258044dd..a87b24fbd0 100644
--- a/components/doc/hooks/usemove/importdoc.js
+++ b/components/doc/hooks/usemove/importdoc.js
@@ -11,7 +11,7 @@ import { useMove } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useoverlaylistener/importdoc.js b/components/doc/hooks/useoverlaylistener/importdoc.js
index 0008c00888..5b3f51c154 100644
--- a/components/doc/hooks/useoverlaylistener/importdoc.js
+++ b/components/doc/hooks/useoverlaylistener/importdoc.js
@@ -11,7 +11,7 @@ import { useOverlayListener } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useoverlayscrolllistener/importdoc.js b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
index 991efcfb2c..f3a9a93234 100644
--- a/components/doc/hooks/useoverlayscrolllistener/importdoc.js
+++ b/components/doc/hooks/useoverlayscrolllistener/importdoc.js
@@ -11,7 +11,7 @@ import { useOverlayScrollListener } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useprevious/importdoc.js b/components/doc/hooks/useprevious/importdoc.js
index 728f58b1e3..ba99ac9737 100644
--- a/components/doc/hooks/useprevious/importdoc.js
+++ b/components/doc/hooks/useprevious/importdoc.js
@@ -11,7 +11,7 @@ import { usePrevious } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useresizelistener/importdoc.js b/components/doc/hooks/useresizelistener/importdoc.js
index 2ff5731f20..d4ad9e634a 100644
--- a/components/doc/hooks/useresizelistener/importdoc.js
+++ b/components/doc/hooks/useresizelistener/importdoc.js
@@ -11,7 +11,7 @@ import { useResizeListener } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usestorage/importdoc.js b/components/doc/hooks/usestorage/importdoc.js
index 5dca32f62e..a1f6881305 100644
--- a/components/doc/hooks/usestorage/importdoc.js
+++ b/components/doc/hooks/usestorage/importdoc.js
@@ -12,7 +12,7 @@ import { useSessionStorage } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/usetimeout/importdoc.js b/components/doc/hooks/usetimeout/importdoc.js
index a06c71ec7d..36e35fb00b 100644
--- a/components/doc/hooks/usetimeout/importdoc.js
+++ b/components/doc/hooks/usetimeout/importdoc.js
@@ -11,7 +11,7 @@ import { useTimout } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useunmounteffect/importdoc.js b/components/doc/hooks/useunmounteffect/importdoc.js
index 42fb07376f..ec8e67ffaf 100644
--- a/components/doc/hooks/useunmounteffect/importdoc.js
+++ b/components/doc/hooks/useunmounteffect/importdoc.js
@@ -11,7 +11,7 @@ import { useUnmountEffect } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/hooks/useupdateeffect/importdoc.js b/components/doc/hooks/useupdateeffect/importdoc.js
index 1a59f0b772..0b7d8fb1fe 100644
--- a/components/doc/hooks/useupdateeffect/importdoc.js
+++ b/components/doc/hooks/useupdateeffect/importdoc.js
@@ -11,7 +11,7 @@ import { useUpdateEffect } from 'primereact/hooks';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/basicdoc.js b/components/doc/icons/basicdoc.js
index dad86d836b..7edb9255ce 100644
--- a/components/doc/icons/basicdoc.js
+++ b/components/doc/icons/basicdoc.js
@@ -24,7 +24,7 @@ export function BasicDoc(props) {
                 <span className="pi pi-search"></span>
                 <span className="pi pi-user"></span>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/colordoc.js b/components/doc/icons/colordoc.js
index cea183ec34..f3e73d34f4 100644
--- a/components/doc/icons/colordoc.js
+++ b/components/doc/icons/colordoc.js
@@ -24,7 +24,7 @@ export function ColorDoc(props) {
                 <i className="pi pi-search" style={{ color: 'var(--primary-color)' }}></i>
                 <i className="pi pi-user" style={{ color: '#708090' }}></i>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/constantsdoc.js b/components/doc/icons/constantsdoc.js
index aeb4bc0f0d..35e2c769f8 100644
--- a/components/doc/icons/constantsdoc.js
+++ b/components/doc/icons/constantsdoc.js
@@ -46,7 +46,7 @@ export default function ConstantsDemo() {
             <div className="card flex justify-content-center">
                 <Menu model={items} />
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/downloaddoc.js b/components/doc/icons/downloaddoc.js
index 7818c5cf08..be443e79a5 100644
--- a/components/doc/icons/downloaddoc.js
+++ b/components/doc/icons/downloaddoc.js
@@ -13,7 +13,7 @@ npm install primeicons
             <DocSectionText {...props}>
                 <p>PrimeIcons is available at npm, run the following command to download it to your project.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/importdoc.js b/components/doc/icons/importdoc.js
index 39268dea10..ef9428b9c3 100644
--- a/components/doc/icons/importdoc.js
+++ b/components/doc/icons/importdoc.js
@@ -13,7 +13,7 @@ import 'primeicons/primeicons.css';
             <DocSectionText {...props}>
                 <p>CSS file of the icon library needs to be imported in your application.</p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/sizedoc.js b/components/doc/icons/sizedoc.js
index c4c9794393..4d91098893 100644
--- a/components/doc/icons/sizedoc.js
+++ b/components/doc/icons/sizedoc.js
@@ -22,7 +22,7 @@ export function SizeDoc(props) {
                 <i className="pi pi-search" style={{ fontSize: '2rem' }}></i>
                 <i className="pi pi-user" style={{ fontSize: '2.5rem' }}></i>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/icons/spindoc.js b/components/doc/icons/spindoc.js
index e6aa30fbd3..b03a91a67b 100644
--- a/components/doc/icons/spindoc.js
+++ b/components/doc/icons/spindoc.js
@@ -20,7 +20,7 @@ export function SpinDoc(props) {
                 <i className="pi pi-spin pi-spinner" style={{ fontSize: '2rem' }}></i>
                 <i className="pi pi-spin pi-cog" style={{ fontSize: '2rem' }}></i>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/image/importdoc.js b/components/doc/image/importdoc.js
index 9da10ccbd0..603b81db1c 100644
--- a/components/doc/image/importdoc.js
+++ b/components/doc/image/importdoc.js
@@ -11,7 +11,7 @@ import { Image } from 'primereact/image';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/image/theming/tailwinddoc.js b/components/doc/image/theming/tailwinddoc.js
index c191c4ba6b..6727d82ab8 100644
--- a/components/doc/image/theming/tailwinddoc.js
+++ b/components/doc/image/theming/tailwinddoc.js
@@ -99,7 +99,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inplace/importdoc.js b/components/doc/inplace/importdoc.js
index 26dfb0db5b..a8a1cb5442 100644
--- a/components/doc/inplace/importdoc.js
+++ b/components/doc/inplace/importdoc.js
@@ -11,7 +11,7 @@ import { Inplace, InplaceDisplay, InplaceContent } from 'primereact/inplace';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inplace/theming/tailwinddoc.js b/components/doc/inplace/theming/tailwinddoc.js
index 4e4b9b6e70..6180c4a749 100644
--- a/components/doc/inplace/theming/tailwinddoc.js
+++ b/components/doc/inplace/theming/tailwinddoc.js
@@ -47,7 +47,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inputmask/accessibilitydoc.js b/components/doc/inputmask/accessibilitydoc.js
index ada6d741d1..630e508057 100644
--- a/components/doc/inputmask/accessibilitydoc.js
+++ b/components/doc/inputmask/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/inputmask/importdoc.js b/components/doc/inputmask/importdoc.js
index 9c52381058..1f5a764bd5 100644
--- a/components/doc/inputmask/importdoc.js
+++ b/components/doc/inputmask/importdoc.js
@@ -11,7 +11,7 @@ import { InputMask } from 'primereact/inputmask';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inputmask/theming/tailwinddoc.js b/components/doc/inputmask/theming/tailwinddoc.js
index c515dfcafa..6755b17a4f 100644
--- a/components/doc/inputmask/theming/tailwinddoc.js
+++ b/components/doc/inputmask/theming/tailwinddoc.js
@@ -37,7 +37,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inputnumber/accessibilitydoc.js b/components/doc/inputnumber/accessibilitydoc.js
index 5f163c5525..18df032273 100644
--- a/components/doc/inputnumber/accessibilitydoc.js
+++ b/components/doc/inputnumber/accessibilitydoc.js
@@ -23,7 +23,7 @@ export function AccessibilityDoc() {
                 and <i>input</i>.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/inputnumber/importdoc.js b/components/doc/inputnumber/importdoc.js
index 040e4f8807..e1a21a5ec7 100644
--- a/components/doc/inputnumber/importdoc.js
+++ b/components/doc/inputnumber/importdoc.js
@@ -11,7 +11,7 @@ import { InputNumber } from 'primereact/inputnumber';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inputnumber/theming/tailwinddoc.js b/components/doc/inputnumber/theming/tailwinddoc.js
index 962a9856f4..520bee5c7b 100644
--- a/components/doc/inputnumber/theming/tailwinddoc.js
+++ b/components/doc/inputnumber/theming/tailwinddoc.js
@@ -73,7 +73,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inputswitch/accessibilitydoc.js b/components/doc/inputswitch/accessibilitydoc.js
index 32c569f4d2..a980ac52da 100644
--- a/components/doc/inputswitch/accessibilitydoc.js
+++ b/components/doc/inputswitch/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>inputId</i> prop or using <i>aria-labelledby</i>, <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/inputswitch/importdoc.js b/components/doc/inputswitch/importdoc.js
index abb07b004e..25238bf246 100644
--- a/components/doc/inputswitch/importdoc.js
+++ b/components/doc/inputswitch/importdoc.js
@@ -11,7 +11,7 @@ import { InputSwitch } from 'primereact/inputswitch';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inputswitch/theming/tailwinddoc.js b/components/doc/inputswitch/theming/tailwinddoc.js
index 9d9fb746f2..cabaaf18f7 100644
--- a/components/doc/inputswitch/theming/tailwinddoc.js
+++ b/components/doc/inputswitch/theming/tailwinddoc.js
@@ -54,7 +54,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inputtext/accessibilitydoc.js b/components/doc/inputtext/accessibilitydoc.js
index ed86af7735..6f15812091 100644
--- a/components/doc/inputtext/accessibilitydoc.js
+++ b/components/doc/inputtext/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/inputtext/importdoc.js b/components/doc/inputtext/importdoc.js
index e42861d2a6..37e8b905d2 100644
--- a/components/doc/inputtext/importdoc.js
+++ b/components/doc/inputtext/importdoc.js
@@ -11,7 +11,7 @@ import { InputText } from 'primereact/inputtext';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inputtext/theming/tailwinddoc.js b/components/doc/inputtext/theming/tailwinddoc.js
index db48398a7d..345db0ded3 100644
--- a/components/doc/inputtext/theming/tailwinddoc.js
+++ b/components/doc/inputtext/theming/tailwinddoc.js
@@ -51,7 +51,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/inputtextarea/accessibilitydoc.js b/components/doc/inputtextarea/accessibilitydoc.js
index faeeacbb19..0a926dcca2 100644
--- a/components/doc/inputtextarea/accessibilitydoc.js
+++ b/components/doc/inputtextarea/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i>, <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/inputtextarea/importdoc.js b/components/doc/inputtextarea/importdoc.js
index 211c90af6b..1e0a45b7ed 100644
--- a/components/doc/inputtextarea/importdoc.js
+++ b/components/doc/inputtextarea/importdoc.js
@@ -11,7 +11,7 @@ import { InputTextarea } from 'primereact/inputtextarea';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/inputtextarea/theming/tailwinddoc.js b/components/doc/inputtextarea/theming/tailwinddoc.js
index d8e7936985..e0cd265844 100644
--- a/components/doc/inputtextarea/theming/tailwinddoc.js
+++ b/components/doc/inputtextarea/theming/tailwinddoc.js
@@ -44,7 +44,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/installation/context.js b/components/doc/installation/context.js
index e8e2f262af..8f639fd99c 100644
--- a/components/doc/installation/context.js
+++ b/components/doc/installation/context.js
@@ -30,13 +30,13 @@ export default function MyApp({ Component, pageProps }) {
                     Configuration is managed by the <i>PrimeReactProvider</i> and <i>PrimeReactContext</i> imported from <i>primereact/api</i>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
             <div className="doc-section-description">
                 <p>
                     The <i>PrimeReactProvider</i> component is used to wrap the application and the <i>PrimeReactContext</i> is used to access the configuration options.
                 </p>
             </div>
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/installation/downloaddoc.js b/components/doc/installation/downloaddoc.js
index 3119c44c5a..321f7595ba 100644
--- a/components/doc/installation/downloaddoc.js
+++ b/components/doc/installation/downloaddoc.js
@@ -19,7 +19,7 @@ yarn add primereact
                     PrimeReact is available for download at <a href="https://www.npmjs.com/package/primereact">npm</a>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/installation/styleddoc.js b/components/doc/installation/styleddoc.js
index 41c7b72051..dcec89a2d7 100644
--- a/components/doc/installation/styleddoc.js
+++ b/components/doc/installation/styleddoc.js
@@ -16,7 +16,7 @@ import "primereact/resources/themes/lara-light-cyan/theme.css";
                     Styled mode is based on pre-skinned components with opinionated themes like Material, Bootstrap or PrimeOne themes. Theme is the required css file to be imported, visit the <Link href="/theming/#themes">Themes</Link> section for
                     the complete list of available themes to choose from.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
             </DocSectionText>
         </>
     );
diff --git a/components/doc/installation/unstyledmodedoc.js b/components/doc/installation/unstyledmodedoc.js
index 3321e9c5dd..9b8018e6bf 100644
--- a/components/doc/installation/unstyledmodedoc.js
+++ b/components/doc/installation/unstyledmodedoc.js
@@ -22,7 +22,7 @@ return(
                     Unstyled mode is disabled by default for all components. Using the PrimeReactContext during installation, set <i>unstyled</i> as true to enable it globally. Visit the <Link href="/unstyled">Unstyled mode</Link> documentation for
                     more information and examples.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
             </DocSectionText>
         </>
     );
diff --git a/components/doc/keyfilter/importdoc.js b/components/doc/keyfilter/importdoc.js
index e42861d2a6..37e8b905d2 100644
--- a/components/doc/keyfilter/importdoc.js
+++ b/components/doc/keyfilter/importdoc.js
@@ -11,7 +11,7 @@ import { InputText } from 'primereact/inputtext';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/knob/accessibilitydoc.js b/components/doc/knob/accessibilitydoc.js
index 4ade12588c..88b0dce489 100644
--- a/components/doc/knob/accessibilitydoc.js
+++ b/components/doc/knob/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i> and <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/knob/importdoc.js b/components/doc/knob/importdoc.js
index 7e39914778..d99c28c1d7 100644
--- a/components/doc/knob/importdoc.js
+++ b/components/doc/knob/importdoc.js
@@ -11,7 +11,7 @@ import { Knob } from 'primereact/knob';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/knob/theming/tailwinddoc.js b/components/doc/knob/theming/tailwinddoc.js
index 67020b4c86..70d6e868a6 100644
--- a/components/doc/knob/theming/tailwinddoc.js
+++ b/components/doc/knob/theming/tailwinddoc.js
@@ -44,7 +44,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/listbox/accessibilitydoc.js b/components/doc/listbox/accessibilitydoc.js
index 14785a41b5..4ca69b769d 100644
--- a/components/doc/listbox/accessibilitydoc.js
+++ b/components/doc/listbox/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the input element. Alternatively <i>filterPlaceholder</i> is usually utilized by the screen readers as well.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/listbox/importdoc.js b/components/doc/listbox/importdoc.js
index 5bdbfc0693..61314dd422 100644
--- a/components/doc/listbox/importdoc.js
+++ b/components/doc/listbox/importdoc.js
@@ -11,7 +11,7 @@ import { ListBox } from 'primereact/listbox';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/listbox/theming/tailwinddoc.js b/components/doc/listbox/theming/tailwinddoc.js
index b3b7186761..2669e3f0d2 100644
--- a/components/doc/listbox/theming/tailwinddoc.js
+++ b/components/doc/listbox/theming/tailwinddoc.js
@@ -75,7 +75,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/megamenu/commanddoc.js b/components/doc/megamenu/commanddoc.js
index fc175435ed..75b52fb07e 100644
--- a/components/doc/megamenu/commanddoc.js
+++ b/components/doc/megamenu/commanddoc.js
@@ -21,7 +21,7 @@ export function CommandDoc(props) {
                     The <i>command</i> property of a menuitem defines the callback to run when an item is activated by click or a key event.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/megamenu/importdoc.js b/components/doc/megamenu/importdoc.js
index 60736b9dbe..397c7509a9 100644
--- a/components/doc/megamenu/importdoc.js
+++ b/components/doc/megamenu/importdoc.js
@@ -11,7 +11,7 @@ import { MegaMenu } from 'primereact/megamenu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/megamenu/routerdoc.js b/components/doc/megamenu/routerdoc.js
index a0da8a3042..9b47d037e6 100644
--- a/components/doc/megamenu/routerdoc.js
+++ b/components/doc/megamenu/routerdoc.js
@@ -22,7 +22,7 @@ export function RouterDoc(props) {
                     Items with navigation are defined with <i>command</i> property to be able to use a router link component, an external link or programmatic navigation.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/megamenu/theming/tailwinddoc.js b/components/doc/megamenu/theming/tailwinddoc.js
index 8cd444fe8b..0232f7323a 100644
--- a/components/doc/megamenu/theming/tailwinddoc.js
+++ b/components/doc/megamenu/theming/tailwinddoc.js
@@ -202,7 +202,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/mention/accessibilitydoc.js b/components/doc/mention/accessibilitydoc.js
index 0226406d4f..d839b5fc42 100644
--- a/components/doc/mention/accessibilitydoc.js
+++ b/components/doc/mention/accessibilitydoc.js
@@ -27,7 +27,7 @@ export function AccessibilityDoc() {
                 input element.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/mention/importdoc.js b/components/doc/mention/importdoc.js
index c2249cb399..2478d89ef4 100644
--- a/components/doc/mention/importdoc.js
+++ b/components/doc/mention/importdoc.js
@@ -11,7 +11,7 @@ import { Mention } from 'primereact/mention';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/mention/theming/tailwinddoc.js b/components/doc/mention/theming/tailwinddoc.js
index 6e2229cc53..578de9d6ed 100644
--- a/components/doc/mention/theming/tailwinddoc.js
+++ b/components/doc/mention/theming/tailwinddoc.js
@@ -93,7 +93,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['CustomerService']} />
             </DocSectionText>
diff --git a/components/doc/menu/importdoc.js b/components/doc/menu/importdoc.js
index fb53fd5ff5..7c89480b05 100644
--- a/components/doc/menu/importdoc.js
+++ b/components/doc/menu/importdoc.js
@@ -11,7 +11,7 @@ import { Menu } from 'primereact/menu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/menu/theming/tailwinddoc.js b/components/doc/menu/theming/tailwinddoc.js
index 6514a52130..fb852ed014 100644
--- a/components/doc/menu/theming/tailwinddoc.js
+++ b/components/doc/menu/theming/tailwinddoc.js
@@ -73,7 +73,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/menubar/importdoc.js b/components/doc/menubar/importdoc.js
index 1ee0ccac37..ebabffb8a9 100644
--- a/components/doc/menubar/importdoc.js
+++ b/components/doc/menubar/importdoc.js
@@ -11,7 +11,7 @@ import { Menubar } from 'primereact/menubar';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/menubar/theming/tailwinddoc.js b/components/doc/menubar/theming/tailwinddoc.js
index 67e82db7ec..48294a6f6d 100644
--- a/components/doc/menubar/theming/tailwinddoc.js
+++ b/components/doc/menubar/theming/tailwinddoc.js
@@ -219,7 +219,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/message/importdoc.js b/components/doc/message/importdoc.js
index b14dc2c657..b8368acafe 100644
--- a/components/doc/message/importdoc.js
+++ b/components/doc/message/importdoc.js
@@ -11,7 +11,7 @@ import { Message } from 'primereact/message';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/message/theming/tailwinddoc.js b/components/doc/message/theming/tailwinddoc.js
index d6bd3075d9..e1858a7a65 100644
--- a/components/doc/message/theming/tailwinddoc.js
+++ b/components/doc/message/theming/tailwinddoc.js
@@ -46,7 +46,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/messages/importdoc.js b/components/doc/messages/importdoc.js
index 36f1b6d6d0..977cd0c128 100644
--- a/components/doc/messages/importdoc.js
+++ b/components/doc/messages/importdoc.js
@@ -11,7 +11,7 @@ import { Messages } from 'primereact/messages';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/messages/theming/tailwinddoc.js b/components/doc/messages/theming/tailwinddoc.js
index 23e6e6d442..237a035117 100644
--- a/components/doc/messages/theming/tailwinddoc.js
+++ b/components/doc/messages/theming/tailwinddoc.js
@@ -74,7 +74,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/multiselect/accessibilitydoc.js b/components/doc/multiselect/accessibilitydoc.js
index 2ab867d793..1b0997a053 100644
--- a/components/doc/multiselect/accessibilitydoc.js
+++ b/components/doc/multiselect/accessibilitydoc.js
@@ -36,7 +36,7 @@ export function AccessibilityDoc() {
                 Close button uses <i>close</i> key of the <i>aria</i> property from the <Link href="/locale">locale</Link> API as the <i>aria-label</i> by default, this can be overriden with the <i>closeButtonProps</i>.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Closed State Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/multiselect/importdoc.js b/components/doc/multiselect/importdoc.js
index df1afb7cfc..b14e4c6475 100644
--- a/components/doc/multiselect/importdoc.js
+++ b/components/doc/multiselect/importdoc.js
@@ -11,7 +11,7 @@ import { MultiSelect } from 'primereact/multiselect';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/multiselect/theming/tailwinddoc.js b/components/doc/multiselect/theming/tailwinddoc.js
index a9e2832c3f..ccedbc75b3 100644
--- a/components/doc/multiselect/theming/tailwinddoc.js
+++ b/components/doc/multiselect/theming/tailwinddoc.js
@@ -152,7 +152,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/multistatecheckbox/accessibilitydoc.js b/components/doc/multistatecheckbox/accessibilitydoc.js
index 875eeaa225..ba475f4113 100644
--- a/components/doc/multistatecheckbox/accessibilitydoc.js
+++ b/components/doc/multistatecheckbox/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 between the component design and the WCAG specification.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/multistatecheckbox/importdoc.js b/components/doc/multistatecheckbox/importdoc.js
index 792d783733..9c0bfc6bb0 100644
--- a/components/doc/multistatecheckbox/importdoc.js
+++ b/components/doc/multistatecheckbox/importdoc.js
@@ -11,7 +11,7 @@ import { MultiStateCheckbox } from 'primereact/multistatecheckbox';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/multistatecheckbox/theming/tailwinddoc.js b/components/doc/multistatecheckbox/theming/tailwinddoc.js
index cc4eba2f4f..01dc7d9ac9 100644
--- a/components/doc/multistatecheckbox/theming/tailwinddoc.js
+++ b/components/doc/multistatecheckbox/theming/tailwinddoc.js
@@ -58,7 +58,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/orderlist/accessibilitydoc.js b/components/doc/orderlist/accessibilitydoc.js
index 721600e531..d19cd2aea4 100644
--- a/components/doc/orderlist/accessibilitydoc.js
+++ b/components/doc/orderlist/accessibilitydoc.js
@@ -25,7 +25,7 @@ export function AccessibilityDoc() {
                 <i>moveTopButtonProps</i>, <i>moveUpButtonProps</i>, <i>moveDownButtonProps</i> and <i>moveBottomButtonProps</i> to customize the buttons like overriding the default <i>aria-label</i> attributes.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>ListBox Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/orderlist/importdoc.js b/components/doc/orderlist/importdoc.js
index 0796467398..2e92133f3c 100644
--- a/components/doc/orderlist/importdoc.js
+++ b/components/doc/orderlist/importdoc.js
@@ -11,7 +11,7 @@ import { OrderList } from 'primereact/orderlist';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/orderlist/theming/tailwinddoc.js b/components/doc/orderlist/theming/tailwinddoc.js
index 0fa5a76c53..6d50bb5cc5 100644
--- a/components/doc/orderlist/theming/tailwinddoc.js
+++ b/components/doc/orderlist/theming/tailwinddoc.js
@@ -142,7 +142,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['ProductService']} />
             </DocSectionText>
diff --git a/components/doc/organizationchart/importdoc.js b/components/doc/organizationchart/importdoc.js
index 2b41f595bd..e569200c5a 100644
--- a/components/doc/organizationchart/importdoc.js
+++ b/components/doc/organizationchart/importdoc.js
@@ -11,7 +11,7 @@ import { OrganizationChart } from 'primereact/organizationchart';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/organizationchart/theming/tailwinddoc.js b/components/doc/organizationchart/theming/tailwinddoc.js
index 429efe3322..46c83accaf 100644
--- a/components/doc/organizationchart/theming/tailwinddoc.js
+++ b/components/doc/organizationchart/theming/tailwinddoc.js
@@ -127,7 +127,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/overlaypanel/importdoc.js b/components/doc/overlaypanel/importdoc.js
index 724ff3f410..b586ca12d0 100644
--- a/components/doc/overlaypanel/importdoc.js
+++ b/components/doc/overlaypanel/importdoc.js
@@ -11,7 +11,7 @@ import { OverlayPanel } from 'primereact/overlaypanel';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/overlaypanel/theming/tailwinddoc.js b/components/doc/overlaypanel/theming/tailwinddoc.js
index ae802885b0..9f55cb0b47 100644
--- a/components/doc/overlaypanel/theming/tailwinddoc.js
+++ b/components/doc/overlaypanel/theming/tailwinddoc.js
@@ -63,7 +63,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/paginator/importdoc.js b/components/doc/paginator/importdoc.js
index 0315da9f25..fcd84bc9fc 100644
--- a/components/doc/paginator/importdoc.js
+++ b/components/doc/paginator/importdoc.js
@@ -11,7 +11,7 @@ import { Paginator } from 'primereact/paginator';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/paginator/theming/tailwinddoc.js b/components/doc/paginator/theming/tailwinddoc.js
index bbf04a093f..aa0ae7bdea 100644
--- a/components/doc/paginator/theming/tailwinddoc.js
+++ b/components/doc/paginator/theming/tailwinddoc.js
@@ -217,7 +217,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/panel/importdoc.js b/components/doc/panel/importdoc.js
index ee07ceeb5c..fdfe930ff4 100644
--- a/components/doc/panel/importdoc.js
+++ b/components/doc/panel/importdoc.js
@@ -11,7 +11,7 @@ import { Panel } from 'primereact/panel';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/panel/theming/tailwinddoc.js b/components/doc/panel/theming/tailwinddoc.js
index 4b8ebe25de..2a51cd7b8c 100644
--- a/components/doc/panel/theming/tailwinddoc.js
+++ b/components/doc/panel/theming/tailwinddoc.js
@@ -77,7 +77,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/panelmenu/importdoc.js b/components/doc/panelmenu/importdoc.js
index 12f9c46796..9c98375525 100644
--- a/components/doc/panelmenu/importdoc.js
+++ b/components/doc/panelmenu/importdoc.js
@@ -11,7 +11,7 @@ import { PanelMenu } from 'primereact/panelmenu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/panelmenu/theming/tailwinddoc.js b/components/doc/panelmenu/theming/tailwinddoc.js
index e61c184961..85d413af90 100644
--- a/components/doc/panelmenu/theming/tailwinddoc.js
+++ b/components/doc/panelmenu/theming/tailwinddoc.js
@@ -201,7 +201,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/passthrough/customcss.js b/components/doc/passthrough/customcss.js
index 7928b55f21..a7f09cdd4c 100644
--- a/components/doc/passthrough/customcss.js
+++ b/components/doc/passthrough/customcss.js
@@ -57,7 +57,7 @@ export default function CustomCSSDemo() {
                 </p>
             </DocSectionText>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/passthrough/globalptdoc.js b/components/doc/passthrough/globalptdoc.js
index 0f91db55c3..1d372c8534 100644
--- a/components/doc/passthrough/globalptdoc.js
+++ b/components/doc/passthrough/globalptdoc.js
@@ -35,7 +35,7 @@ export default function GlobalPTDemo() {
                     settings can be overriden by a particular component as components <i>pt</i> property has higher precedence over global <i>pt</i>.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/passthrough/usepassthroughdoc.js b/components/doc/passthrough/usepassthroughdoc.js
index 555efc9c91..a06c416dc7 100644
--- a/components/doc/passthrough/usepassthroughdoc.js
+++ b/components/doc/passthrough/usepassthroughdoc.js
@@ -109,7 +109,7 @@ const CustomTailwind = usePassThrough(
                     An existing pass through configuration is customized with the <i>usePassThrough</i> utility. The first parameter is the object to customize, the second parameter is the customizations and the final parameter is the behavior of
                     merging. One of the example use cases is customizing existing unstyled themes like Tailwind.
                 </p>
-                <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
                 <p>
                     The <i>mergeSections</i> defines whether the sections from the main configuration gets added and the <i>mergeProps</i> controls whether to override or merge the defined props. Defaults are <i>true</i> for <i>mergeSections</i> and
                     <i>false</i> for <i>mergeProps</i>.
@@ -119,10 +119,10 @@ const CustomTailwind = usePassThrough(
                     define how class names will be merged.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code4} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code5} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code4} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code5} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/password/accessibilitydoc.js b/components/doc/password/accessibilitydoc.js
index cce7ea22db..c3e58e1763 100644
--- a/components/doc/password/accessibilitydoc.js
+++ b/components/doc/password/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 password using a section that has <i>aria-live</i> while typing.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/password/importdoc.js b/components/doc/password/importdoc.js
index 036415573a..e62579b635 100644
--- a/components/doc/password/importdoc.js
+++ b/components/doc/password/importdoc.js
@@ -11,7 +11,7 @@ import { Password } from 'primereact/password';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/password/theming/tailwinddoc.js b/components/doc/password/theming/tailwinddoc.js
index 5b6a12b4c0..1ff18a5c48 100644
--- a/components/doc/password/theming/tailwinddoc.js
+++ b/components/doc/password/theming/tailwinddoc.js
@@ -70,7 +70,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/picklist/importdoc.js b/components/doc/picklist/importdoc.js
index f3f40927e4..86b430f21a 100644
--- a/components/doc/picklist/importdoc.js
+++ b/components/doc/picklist/importdoc.js
@@ -11,7 +11,7 @@ import { PickList } from 'primereact/picklist';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/picklist/theming/tailwinddoc.js b/components/doc/picklist/theming/tailwinddoc.js
index 1e9b4144cc..e921f478c3 100644
--- a/components/doc/picklist/theming/tailwinddoc.js
+++ b/components/doc/picklist/theming/tailwinddoc.js
@@ -215,7 +215,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['ProductService']} />
             </DocSectionText>
diff --git a/components/doc/progressbar/importdoc.js b/components/doc/progressbar/importdoc.js
index 2999d6b836..42ff7bfe70 100644
--- a/components/doc/progressbar/importdoc.js
+++ b/components/doc/progressbar/importdoc.js
@@ -11,7 +11,7 @@ import { ProgressBar } from 'primereact/progressbar';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/progressbar/theming/tailwinddoc.js b/components/doc/progressbar/theming/tailwinddoc.js
index 79580ba778..f274f4be5b 100644
--- a/components/doc/progressbar/theming/tailwinddoc.js
+++ b/components/doc/progressbar/theming/tailwinddoc.js
@@ -107,7 +107,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/progressspinner/importdoc.js b/components/doc/progressspinner/importdoc.js
index 5a3723ebfb..56b2d91b7a 100644
--- a/components/doc/progressspinner/importdoc.js
+++ b/components/doc/progressspinner/importdoc.js
@@ -11,7 +11,7 @@ import { ProgressSpinner } from 'primereact/progressspinner';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/progressspinner/theming/tailwinddoc.js b/components/doc/progressspinner/theming/tailwinddoc.js
index 64d2670987..5517df7637 100644
--- a/components/doc/progressspinner/theming/tailwinddoc.js
+++ b/components/doc/progressspinner/theming/tailwinddoc.js
@@ -79,7 +79,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/radiobutton/accessibilitydoc.js b/components/doc/radiobutton/accessibilitydoc.js
index d0e27dc331..4086464dd9 100644
--- a/components/doc/radiobutton/accessibilitydoc.js
+++ b/components/doc/radiobutton/accessibilitydoc.js
@@ -22,7 +22,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i>, <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/radiobutton/importdoc.js b/components/doc/radiobutton/importdoc.js
index abfdd9126f..67b1b9d25d 100644
--- a/components/doc/radiobutton/importdoc.js
+++ b/components/doc/radiobutton/importdoc.js
@@ -11,7 +11,7 @@ import { RadioButton } from 'primereact/radiobutton';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/radiobutton/theming/tailwinddoc.js b/components/doc/radiobutton/theming/tailwinddoc.js
index 0053935095..dff43339c5 100644
--- a/components/doc/radiobutton/theming/tailwinddoc.js
+++ b/components/doc/radiobutton/theming/tailwinddoc.js
@@ -76,7 +76,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/rating/importdoc.js b/components/doc/rating/importdoc.js
index ea60b1b487..4fc1e4e51b 100644
--- a/components/doc/rating/importdoc.js
+++ b/components/doc/rating/importdoc.js
@@ -11,7 +11,7 @@ import { Rating } from 'primereact/rating';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/rating/theming/tailwinddoc.js b/components/doc/rating/theming/tailwinddoc.js
index f4e119eb26..f322550e4d 100644
--- a/components/doc/rating/theming/tailwinddoc.js
+++ b/components/doc/rating/theming/tailwinddoc.js
@@ -67,7 +67,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/ripple/configurationdoc.js b/components/doc/ripple/configurationdoc.js
index 8b97add307..283c5e0d21 100644
--- a/components/doc/ripple/configurationdoc.js
+++ b/components/doc/ripple/configurationdoc.js
@@ -30,7 +30,7 @@ export default function MyApp({ Component }) {
                     To start with, Ripple needs to be enabled globally. See the <Link href="/configuration/#ripple">Configuration API</Link> for details.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/ripple/importdoc.js b/components/doc/ripple/importdoc.js
index e561207bce..ef53f717e7 100644
--- a/components/doc/ripple/importdoc.js
+++ b/components/doc/ripple/importdoc.js
@@ -11,7 +11,7 @@ import { Ripple } from 'primereact/ripple';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/ripple/theming/tailwinddoc.js b/components/doc/ripple/theming/tailwinddoc.js
index e75730b45b..672af3b2a6 100644
--- a/components/doc/ripple/theming/tailwinddoc.js
+++ b/components/doc/ripple/theming/tailwinddoc.js
@@ -49,7 +49,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/scrollpanel/importdoc.js b/components/doc/scrollpanel/importdoc.js
index d0851b459d..2d2f29dbd6 100644
--- a/components/doc/scrollpanel/importdoc.js
+++ b/components/doc/scrollpanel/importdoc.js
@@ -11,7 +11,7 @@ import { ScrollPanel } from 'primereact/scrollpanel';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/scrollpanel/theming/tailwinddoc.js b/components/doc/scrollpanel/theming/tailwinddoc.js
index e5c4803303..30f8cba86a 100644
--- a/components/doc/scrollpanel/theming/tailwinddoc.js
+++ b/components/doc/scrollpanel/theming/tailwinddoc.js
@@ -61,7 +61,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/scrolltop/importdoc.js b/components/doc/scrolltop/importdoc.js
index 85b173e2eb..fe2b513ea8 100644
--- a/components/doc/scrolltop/importdoc.js
+++ b/components/doc/scrolltop/importdoc.js
@@ -11,7 +11,7 @@ import { ScrollTop } from 'primereact/scrolltop';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/scrolltop/theming/tailwinddoc.js b/components/doc/scrolltop/theming/tailwinddoc.js
index 5d3e8848f1..a508175732 100644
--- a/components/doc/scrolltop/theming/tailwinddoc.js
+++ b/components/doc/scrolltop/theming/tailwinddoc.js
@@ -55,7 +55,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/selectbutton/importdoc.js b/components/doc/selectbutton/importdoc.js
index 3fcdda5da1..4e0fab102a 100644
--- a/components/doc/selectbutton/importdoc.js
+++ b/components/doc/selectbutton/importdoc.js
@@ -11,7 +11,7 @@ import { SelectButton } from 'primereact/selectbutton';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/selectbutton/theming/tailwinddoc.js b/components/doc/selectbutton/theming/tailwinddoc.js
index ee369548f5..4d6a15d2d0 100644
--- a/components/doc/selectbutton/theming/tailwinddoc.js
+++ b/components/doc/selectbutton/theming/tailwinddoc.js
@@ -55,7 +55,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/sidebar/importdoc.js b/components/doc/sidebar/importdoc.js
index 2a9270fb0f..c967446f7e 100644
--- a/components/doc/sidebar/importdoc.js
+++ b/components/doc/sidebar/importdoc.js
@@ -11,7 +11,7 @@ import { Sidebar } from 'primereact/sidebar';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/sidebar/theming/tailwinddoc.js b/components/doc/sidebar/theming/tailwinddoc.js
index ba672902f9..0766004e58 100644
--- a/components/doc/sidebar/theming/tailwinddoc.js
+++ b/components/doc/sidebar/theming/tailwinddoc.js
@@ -136,7 +136,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/skeleton/importdoc.js b/components/doc/skeleton/importdoc.js
index 1995f7ddb5..efc4d99933 100644
--- a/components/doc/skeleton/importdoc.js
+++ b/components/doc/skeleton/importdoc.js
@@ -11,7 +11,7 @@ import { Skeleton } from 'primereact/skeleton';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/skeleton/theming/tailwinddoc.js b/components/doc/skeleton/theming/tailwinddoc.js
index 1c6d700285..7e1dd3852e 100644
--- a/components/doc/skeleton/theming/tailwinddoc.js
+++ b/components/doc/skeleton/theming/tailwinddoc.js
@@ -79,7 +79,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/slider/accessibilitydoc.js b/components/doc/slider/accessibilitydoc.js
index f300e77124..8dc0f69ed2 100644
--- a/components/doc/slider/accessibilitydoc.js
+++ b/components/doc/slider/accessibilitydoc.js
@@ -20,7 +20,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i> and <i>aria-label</i> props.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/slider/importdoc.js b/components/doc/slider/importdoc.js
index 8d06533aa0..3ce256e2e8 100644
--- a/components/doc/slider/importdoc.js
+++ b/components/doc/slider/importdoc.js
@@ -11,7 +11,7 @@ import { Slider } from 'primereact/slider';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/slider/theming/tailwinddoc.js b/components/doc/slider/theming/tailwinddoc.js
index d62354acc1..bd5d5ada22 100644
--- a/components/doc/slider/theming/tailwinddoc.js
+++ b/components/doc/slider/theming/tailwinddoc.js
@@ -62,7 +62,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/speeddial/accessibilitydoc.js b/components/doc/speeddial/accessibilitydoc.js
index 2aa79979a2..605d825cee 100644
--- a/components/doc/speeddial/accessibilitydoc.js
+++ b/components/doc/speeddial/accessibilitydoc.js
@@ -20,7 +20,7 @@ export function AccessibilityDoc() {
                 The popup overlay uses <i>menu</i> role on the list and each action item has a <i>menuitem</i> role with an <i>aria-label</i> as the menuitem label. The id of the menu refers to the <i>aria-controls</i> of the button.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Menu Button Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/speeddial/importdoc.js b/components/doc/speeddial/importdoc.js
index 3e663a0431..bf97297146 100644
--- a/components/doc/speeddial/importdoc.js
+++ b/components/doc/speeddial/importdoc.js
@@ -11,7 +11,7 @@ import { SpeedDial } from 'primereact/speeddial';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/speeddial/theming/tailwinddoc.js b/components/doc/speeddial/theming/tailwinddoc.js
index c372782072..c8bbbe4f49 100644
--- a/components/doc/speeddial/theming/tailwinddoc.js
+++ b/components/doc/speeddial/theming/tailwinddoc.js
@@ -107,7 +107,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/splitbutton/importdoc.js b/components/doc/splitbutton/importdoc.js
index 9fc42c57ee..12b52e7afa 100644
--- a/components/doc/splitbutton/importdoc.js
+++ b/components/doc/splitbutton/importdoc.js
@@ -11,7 +11,7 @@ import { SplitButton } from 'primereact/splitbutton';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/splitbutton/theming/tailwinddoc.js b/components/doc/splitbutton/theming/tailwinddoc.js
index 925a5e0799..2b2cee543c 100644
--- a/components/doc/splitbutton/theming/tailwinddoc.js
+++ b/components/doc/splitbutton/theming/tailwinddoc.js
@@ -108,7 +108,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/splitter/importdoc.js b/components/doc/splitter/importdoc.js
index b9ce20bf51..4ba8a30cbc 100644
--- a/components/doc/splitter/importdoc.js
+++ b/components/doc/splitter/importdoc.js
@@ -11,7 +11,7 @@ import { Splitter, SplitterPanel } from 'primereact/splitter';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/splitter/theming/tailwinddoc.js b/components/doc/splitter/theming/tailwinddoc.js
index ed5a72f46a..1cda64d0b7 100644
--- a/components/doc/splitter/theming/tailwinddoc.js
+++ b/components/doc/splitter/theming/tailwinddoc.js
@@ -55,7 +55,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/steps/importdoc.js b/components/doc/steps/importdoc.js
index 86922e4699..23e3a15543 100644
--- a/components/doc/steps/importdoc.js
+++ b/components/doc/steps/importdoc.js
@@ -11,7 +11,7 @@ import { Steps } from 'primereact/steps';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/steps/theming/tailwinddoc.js b/components/doc/steps/theming/tailwinddoc.js
index 8d285783ea..68fb3658c3 100644
--- a/components/doc/steps/theming/tailwinddoc.js
+++ b/components/doc/steps/theming/tailwinddoc.js
@@ -70,7 +70,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/styleclass/importdoc.js b/components/doc/styleclass/importdoc.js
index 9fddc1ff81..c389a6dd49 100644
--- a/components/doc/styleclass/importdoc.js
+++ b/components/doc/styleclass/importdoc.js
@@ -11,7 +11,7 @@ import { StyleClass } from 'primereact/styleclass';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tabmenu/importdoc.js b/components/doc/tabmenu/importdoc.js
index 90fa35f71c..cd688b972d 100644
--- a/components/doc/tabmenu/importdoc.js
+++ b/components/doc/tabmenu/importdoc.js
@@ -11,7 +11,7 @@ import { TabMenu } from 'primereact/tabmenu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tabmenu/theming/tailwinddoc.js b/components/doc/tabmenu/theming/tailwinddoc.js
index c3f02614fc..8f31407b77 100644
--- a/components/doc/tabmenu/theming/tailwinddoc.js
+++ b/components/doc/tabmenu/theming/tailwinddoc.js
@@ -60,7 +60,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/tabview/importdoc.js b/components/doc/tabview/importdoc.js
index 5860b2b0db..5fb37db0ee 100644
--- a/components/doc/tabview/importdoc.js
+++ b/components/doc/tabview/importdoc.js
@@ -11,7 +11,7 @@ import { TabView, TabPanel } from 'primereact/tabview';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tabview/theming/tailwinddoc.js b/components/doc/tabview/theming/tailwinddoc.js
index d583a401d4..6251d2e739 100644
--- a/components/doc/tabview/theming/tailwinddoc.js
+++ b/components/doc/tabview/theming/tailwinddoc.js
@@ -101,7 +101,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/tag/importdoc.js b/components/doc/tag/importdoc.js
index 0a433058f1..45f7ee18a2 100644
--- a/components/doc/tag/importdoc.js
+++ b/components/doc/tag/importdoc.js
@@ -11,7 +11,7 @@ import { Tag } from 'primereact/tag';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tag/theming/tailwinddoc.js b/components/doc/tag/theming/tailwinddoc.js
index eb73dfa06e..b7861dce0c 100644
--- a/components/doc/tag/theming/tailwinddoc.js
+++ b/components/doc/tag/theming/tailwinddoc.js
@@ -58,7 +58,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/tailwind/csslayerdoc.js b/components/doc/tailwind/csslayerdoc.js
index c923b36a80..bf307090f3 100644
--- a/components/doc/tailwind/csslayerdoc.js
+++ b/components/doc/tailwind/csslayerdoc.js
@@ -24,7 +24,7 @@ export function CSSLayerDoc(props) {
                     Tailwind CSS can be used with styled or unstyled modes of PrimeReact. In both cases, <a href="https://tailwindcss.com/docs/preflight">preflight</a> mode may break styling of the core functionality so <i>@layer</i> configuration in
                     your style file that includes tailwind styles is necessary for compatibility.
                 </p>
-                <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
             </DocSectionText>
         </>
     );
diff --git a/components/doc/tailwind/unstyledmode/setupdoc.js b/components/doc/tailwind/unstyledmode/setupdoc.js
index 8d1d98f762..22f963326b 100644
--- a/components/doc/tailwind/unstyledmode/setupdoc.js
+++ b/components/doc/tailwind/unstyledmode/setupdoc.js
@@ -143,7 +143,7 @@ export default function MyApp({ Component, pageProps }) {
                         classes utilized in the theme will be removed as well.
                     </span>
                 </p>
-                <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="2"></Badge>
                     <span>
@@ -151,14 +151,14 @@ export default function MyApp({ Component, pageProps }) {
                         application at this stage, functionality and accessibility of the components will still work but everything will be transparent as there is no style.
                     </span>
                 </p>
-                <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="3"></Badge>
                     <span>
                         <b>Optional:</b> specify the built in <i>Tailwind</i> style of pre-configured Tailwind settings.
                     </span>
                 </p>
-                <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="4"></Badge>
                     <span>
@@ -166,7 +166,7 @@ export default function MyApp({ Component, pageProps }) {
                         global pass through from overriding those specified via pass through in your application.
                     </span>
                 </p>
-                <DocSectionCode code={code4} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code4} hideToggleCode import hideStackBlitz />
                 <p className="flex align-items-start gap-2">
                     <Badge value="5"></Badge>
                     <span>
@@ -174,7 +174,7 @@ export default function MyApp({ Component, pageProps }) {
                         you'll able to copy paste instead of starting from scratch. Example below styles, inputtext and panel components;
                     </span>
                 </p>
-                <DocSectionCode code={code5} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code5} hideToggleCode import hideStackBlitz />
                 <p>Voilà 💙, you now have 90+ awesome React UI components styled with Tailwind that will work in harmony with the rest of your application. Time to customize it to bring in your own style with Tailwind.</p>
             </DocSectionText>
         </>
diff --git a/components/doc/terminal/importdoc.js b/components/doc/terminal/importdoc.js
index c6a6ac9294..f042348591 100644
--- a/components/doc/terminal/importdoc.js
+++ b/components/doc/terminal/importdoc.js
@@ -12,7 +12,7 @@ import { TerminalService } from 'primereact/terminalservice';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/terminal/theming/tailwinddoc.js b/components/doc/terminal/theming/tailwinddoc.js
index 317e5f9a11..6ad15fa0f6 100644
--- a/components/doc/terminal/theming/tailwinddoc.js
+++ b/components/doc/terminal/theming/tailwinddoc.js
@@ -85,7 +85,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/theming/builtinthemesdoc.js b/components/doc/theming/builtinthemesdoc.js
index ed5fbe35ff..d7bed03356 100644
--- a/components/doc/theming/builtinthemesdoc.js
+++ b/components/doc/theming/builtinthemesdoc.js
@@ -58,7 +58,7 @@ primereact/resources/themes/arya-purple/theme.css
                     at the topbar to switch themes.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz codeClassName="h-20rem overflow-auto" />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz codeClassName="h-20rem overflow-auto" />
         </>
     );
 }
diff --git a/components/doc/theming/customthemedoc.js b/components/doc/theming/customthemedoc.js
index 7a8334a115..b7397463ab 100644
--- a/components/doc/theming/customthemedoc.js
+++ b/components/doc/theming/customthemedoc.js
@@ -44,11 +44,11 @@ import './assets/theme.css';
                 <p>
                     Once your theme is ready run the following command to compile it. Note that <a href="https://www.npmjs.com/package/sass">sass</a> command should be available in your terminal.
                 </p>
-                <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
                 <p>
                     Then copy and import the theme.css file in your application. For example, in <a href="https://nextjs.org/docs/basic-features/built-in-css-support">Next.js</a>, ideal location could be the <i>_app.js</i>.
                 </p>
-                <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
 
                 <h3>Build Time Compilation</h3>
                 <p>
diff --git a/components/doc/theming/primeflexdoc.js b/components/doc/theming/primeflexdoc.js
index 30e1e37a9b..d1225c10d9 100644
--- a/components/doc/theming/primeflexdoc.js
+++ b/components/doc/theming/primeflexdoc.js
@@ -29,7 +29,7 @@ export function PrimeFlexDoc(props) {
                 <Button type="button" label="Button 2" className="p-button-secondary mb-3 md:mb-0"></Button>
                 <Button type="button" label="Button 3" className="p-button-help"></Button>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/theming/scaledoc.js b/components/doc/theming/scaledoc.js
index f16dcd81e2..7d30cc577b 100644
--- a/components/doc/theming/scaledoc.js
+++ b/components/doc/theming/scaledoc.js
@@ -18,7 +18,7 @@ html {
                     document. Code below sets the scale of the components based on <i>16px</i>. If you reqire bigger or smaller components, just change this variable and components will scale accordingly.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/theming/scopedstyling/cssinjsdoc.js b/components/doc/theming/scopedstyling/cssinjsdoc.js
index f3d6a5c336..dd487ea9e2 100644
--- a/components/doc/theming/scopedstyling/cssinjsdoc.js
+++ b/components/doc/theming/scopedstyling/cssinjsdoc.js
@@ -57,7 +57,7 @@ export default function PanelDemo() {
                     </p>
                 </Panel>
             </div>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/theming/scopedstyling/cssmodulesdoc.js b/components/doc/theming/scopedstyling/cssmodulesdoc.js
index 968c564cf2..0bae939647 100644
--- a/components/doc/theming/scopedstyling/cssmodulesdoc.js
+++ b/components/doc/theming/scopedstyling/cssmodulesdoc.js
@@ -50,8 +50,8 @@ export default function PanelDemo() {
                     </p>
                 </Panel>
             </div>
-            <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/theming/scopedstyling/namedclassdoc.js b/components/doc/theming/scopedstyling/namedclassdoc.js
index ad1a9b402f..d0f954e3ab 100644
--- a/components/doc/theming/scopedstyling/namedclassdoc.js
+++ b/components/doc/theming/scopedstyling/namedclassdoc.js
@@ -48,8 +48,8 @@ export default function PanelDemo() {
                     </p>
                 </Panel>
             </div>
-            <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/theming/switchthemesdoc.js b/components/doc/theming/switchthemesdoc.js
index 05c4581a21..aa3c785539 100644
--- a/components/doc/theming/switchthemesdoc.js
+++ b/components/doc/theming/switchthemesdoc.js
@@ -39,20 +39,20 @@ changeTheme(currentTheme: string, newTheme: string, linkElementId: string, callb
                     to the <i>changeTheme</i> function.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
             <div className="doc-section-description">
                 <p>
                     If you have access to the <i>index.html</i> directly, the link can be placed at head section.
                 </p>
             </div>
-            <DocSectionCode code={code2} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code2} hideToggleCode import hideStackBlitz />
             <div className="doc-section-description">
                 <p>
                     <a href="https://nextjs.org/">Next.js</a> applications can configure the link element using <a href="https://nextjs.org/docs/api-reference/next/head">next/head</a> component or custom{' '}
                     <a href="https://nextjs.org/docs/advanced-features/custom-document">document</a>.
                 </p>
             </div>
-            <DocSectionCode code={code3} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code3} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tieredmenu/importdoc.js b/components/doc/tieredmenu/importdoc.js
index 6ecf209461..b80fd498f1 100644
--- a/components/doc/tieredmenu/importdoc.js
+++ b/components/doc/tieredmenu/importdoc.js
@@ -11,7 +11,7 @@ import { TieredMenu } from 'primereact/tieredmenu';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tieredmenu/theming/tailwinddoc.js b/components/doc/tieredmenu/theming/tailwinddoc.js
index 5040725a52..70e659a11b 100644
--- a/components/doc/tieredmenu/theming/tailwinddoc.js
+++ b/components/doc/tieredmenu/theming/tailwinddoc.js
@@ -205,7 +205,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/timeline/importdoc.js b/components/doc/timeline/importdoc.js
index 9de510a0d6..ba43ecb966 100644
--- a/components/doc/timeline/importdoc.js
+++ b/components/doc/timeline/importdoc.js
@@ -11,7 +11,7 @@ import { Timeline } from 'primereact/timeline';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/timeline/theming/tailwinddoc.js b/components/doc/timeline/theming/tailwinddoc.js
index 374103b40d..4b1dd0aeeb 100644
--- a/components/doc/timeline/theming/tailwinddoc.js
+++ b/components/doc/timeline/theming/tailwinddoc.js
@@ -99,7 +99,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/toast/importdoc.js b/components/doc/toast/importdoc.js
index 81b2bac6cc..f61e49a643 100644
--- a/components/doc/toast/importdoc.js
+++ b/components/doc/toast/importdoc.js
@@ -11,7 +11,7 @@ import { Toast } from 'primereact/toast';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/toast/theming/tailwinddoc.js b/components/doc/toast/theming/tailwinddoc.js
index adfde3215c..dffe262e65 100644
--- a/components/doc/toast/theming/tailwinddoc.js
+++ b/components/doc/toast/theming/tailwinddoc.js
@@ -87,7 +87,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/togglebutton/accessibilitydoc.js b/components/doc/togglebutton/accessibilitydoc.js
index 18ccc75d1c..110ac85520 100644
--- a/components/doc/togglebutton/accessibilitydoc.js
+++ b/components/doc/togglebutton/accessibilitydoc.js
@@ -20,7 +20,7 @@ export function AccessibilityDoc() {
                 that does not change related to state.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/togglebutton/importdoc.js b/components/doc/togglebutton/importdoc.js
index c9cde6bcef..e23b8c98fd 100644
--- a/components/doc/togglebutton/importdoc.js
+++ b/components/doc/togglebutton/importdoc.js
@@ -11,7 +11,7 @@ import { ToggleButton } from 'primereact/togglebutton';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/togglebutton/theming/tailwinddoc.js b/components/doc/togglebutton/theming/tailwinddoc.js
index d1a59b9e77..e7a56bd0e4 100644
--- a/components/doc/togglebutton/theming/tailwinddoc.js
+++ b/components/doc/togglebutton/theming/tailwinddoc.js
@@ -59,7 +59,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/toolbar/accessibilitydoc.js b/components/doc/toolbar/accessibilitydoc.js
index d197760a22..09cfb19b62 100644
--- a/components/doc/toolbar/accessibilitydoc.js
+++ b/components/doc/toolbar/accessibilitydoc.js
@@ -18,7 +18,7 @@ export function AccessibilityDoc() {
                 <i>aria-labelledby</i> and <i>aria-labelled</i> to define the element if required.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <p>Component does not include any interactive elements. Arbitrary content can be placed with templating and elements like buttons inside should follow the page tab sequence.</p>
diff --git a/components/doc/toolbar/importdoc.js b/components/doc/toolbar/importdoc.js
index 83c8d18e65..2a1785fe3f 100644
--- a/components/doc/toolbar/importdoc.js
+++ b/components/doc/toolbar/importdoc.js
@@ -11,7 +11,7 @@ import { Toolbar } from 'primereact/toolbar';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/toolbar/theming/tailwinddoc.js b/components/doc/toolbar/theming/tailwinddoc.js
index c939f15b85..954bb944bf 100644
--- a/components/doc/toolbar/theming/tailwinddoc.js
+++ b/components/doc/toolbar/theming/tailwinddoc.js
@@ -85,7 +85,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/tooltip/importdoc.js b/components/doc/tooltip/importdoc.js
index 9741810aa8..eb8d3a15db 100644
--- a/components/doc/tooltip/importdoc.js
+++ b/components/doc/tooltip/importdoc.js
@@ -11,7 +11,7 @@ import { Tooltip } from 'primereact/tooltip';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tooltip/theming/tailwinddoc.js b/components/doc/tooltip/theming/tailwinddoc.js
index b3b1b540b5..94ef90ddab 100644
--- a/components/doc/tooltip/theming/tailwinddoc.js
+++ b/components/doc/tooltip/theming/tailwinddoc.js
@@ -56,7 +56,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/tree/importdoc.js b/components/doc/tree/importdoc.js
index fb65ec512c..d7ac22855e 100644
--- a/components/doc/tree/importdoc.js
+++ b/components/doc/tree/importdoc.js
@@ -11,7 +11,7 @@ import { Tree } from 'primereact/tree';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tree/selection/checkboxselectiondoc.js b/components/doc/tree/selection/checkboxselectiondoc.js
index 7560c3f0ad..7851fbb01c 100644
--- a/components/doc/tree/selection/checkboxselectiondoc.js
+++ b/components/doc/tree/selection/checkboxselectiondoc.js
@@ -109,7 +109,7 @@ export default function CheckboxSelectionDemo() {
                     In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex justify-content-center">
                 <Tree value={nodes} selectionMode="checkbox" selectionKeys={selectedKeys} onSelectionChange={(e) => setSelectedKeys(e.value)} className="w-full md:w-30rem" />
             </div>
diff --git a/components/doc/tree/selection/multipleselectiondoc.js b/components/doc/tree/selection/multipleselectiondoc.js
index 9e18a01440..720e9e3d6b 100644
--- a/components/doc/tree/selection/multipleselectiondoc.js
+++ b/components/doc/tree/selection/multipleselectiondoc.js
@@ -124,7 +124,7 @@ export default function MultipleSelectionDemo() {
                 </p>
                 <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex flex-column align-items-center justify-content-center">
                 <div className="flex align-items-center mb-4 gap-2">
                     <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
diff --git a/components/doc/tree/theming/tailwinddoc.js b/components/doc/tree/theming/tailwinddoc.js
index ce6cce1ae6..ab1b2e4a67 100644
--- a/components/doc/tree/theming/tailwinddoc.js
+++ b/components/doc/tree/theming/tailwinddoc.js
@@ -102,7 +102,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['NodeService']} />
             </DocSectionText>
diff --git a/components/doc/treeselect/accessibilitydoc.js b/components/doc/treeselect/accessibilitydoc.js
index 2c4ec6cbd9..1e548ccb46 100644
--- a/components/doc/treeselect/accessibilitydoc.js
+++ b/components/doc/treeselect/accessibilitydoc.js
@@ -29,7 +29,7 @@ export function AccessibilityDoc() {
                 If filtering is enabled, <i>filterInputProps</i> can be defined to give <i>aria-*</i> props to the filter input element.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Closed State Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/treeselect/checkboxdoc.js b/components/doc/treeselect/checkboxdoc.js
index 3b43fdb573..cc1db3286b 100644
--- a/components/doc/treeselect/checkboxdoc.js
+++ b/components/doc/treeselect/checkboxdoc.js
@@ -113,7 +113,7 @@ export default function CheckboxDemo() {
                     indicate selection.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex justify-content-center">
                 <TreeSelect
                     value={selectedNodeKeys}
diff --git a/components/doc/treeselect/importdoc.js b/components/doc/treeselect/importdoc.js
index fcc70bed0f..edf59e8cf8 100644
--- a/components/doc/treeselect/importdoc.js
+++ b/components/doc/treeselect/importdoc.js
@@ -11,7 +11,7 @@ import { TreeSelect } from 'primereact/treeselect';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/treeselect/multipledoc.js b/components/doc/treeselect/multipledoc.js
index e44f3d1b10..851858c489 100644
--- a/components/doc/treeselect/multipledoc.js
+++ b/components/doc/treeselect/multipledoc.js
@@ -109,7 +109,7 @@ export default function MultipleDemo() {
                 </p>
                 <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card flex justify-content-center">
                 <TreeSelect value={selectedNodeKeys} onChange={(e) => setSelectedNodeKeys(e.value)} options={nodes} metaKeySelection={false} className="md:w-20rem w-full" selectionMode="multiple" placeholder="Select Items"></TreeSelect>
             </div>
diff --git a/components/doc/treeselect/theming/tailwinddoc.js b/components/doc/treeselect/theming/tailwinddoc.js
index a64455d6ad..f836ce0ab2 100644
--- a/components/doc/treeselect/theming/tailwinddoc.js
+++ b/components/doc/treeselect/theming/tailwinddoc.js
@@ -73,7 +73,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['NodeService']} />
             </DocSectionText>
diff --git a/components/doc/treetable/importdoc.js b/components/doc/treetable/importdoc.js
index a9cdf6e139..2746b49cf9 100644
--- a/components/doc/treetable/importdoc.js
+++ b/components/doc/treetable/importdoc.js
@@ -12,7 +12,7 @@ import { Column } from 'primereact/column';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/treetable/selection/checkboxdoc.js b/components/doc/treetable/selection/checkboxdoc.js
index 2ae27f576b..b54d2ae460 100644
--- a/components/doc/treetable/selection/checkboxdoc.js
+++ b/components/doc/treetable/selection/checkboxdoc.js
@@ -124,7 +124,7 @@ export default function CheckboxRowSelectionDemo() {
                     In checkbox selection mode, value binding should be a key-value pair where key is the node key and value is an object that has <i>checked</i> and <i>partialChecked</i> properties to represent the checked state of a node.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card">
                 <TreeTable value={nodes} selectionMode="checkbox" selectionKeys={selectedNodeKeys} onSelectionChange={(e) => setSelectedNodeKeys(e.value)} tableStyle={{ minWidth: '50rem' }}>
                     <Column field="name" header="Name" expander></Column>
diff --git a/components/doc/treetable/selection/multipledoc.js b/components/doc/treetable/selection/multipledoc.js
index 541ae8519e..5575c0ddfe 100644
--- a/components/doc/treetable/selection/multipledoc.js
+++ b/components/doc/treetable/selection/multipledoc.js
@@ -137,7 +137,7 @@ export default function MultipleRowsSelectionDemo() {
                 </p>
                 <p>In multiple selection mode, value binding should be a key-value pair where key is the node key and value is a boolean to indicate selection.</p>
             </DocSectionText>
-            <DocSectionCode code={introCode} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={introCode} hideToggleCode import hideStackBlitz />
             <div className="card">
                 <div className="flex justify-content-center align-items-center mb-4 gap-2">
                     <InputSwitch inputId="input-metakey" checked={metaKey} onChange={(e) => setMetaKey(e.value)} />
diff --git a/components/doc/treetable/theming/tailwinddoc.js b/components/doc/treetable/theming/tailwinddoc.js
index 2d4f5f0bc3..0b4e98c7ba 100644
--- a/components/doc/treetable/theming/tailwinddoc.js
+++ b/components/doc/treetable/theming/tailwinddoc.js
@@ -196,7 +196,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded service={['NodeService']} />
             </DocSectionText>
diff --git a/components/doc/tristatecheckbox/accessibilitydoc.js b/components/doc/tristatecheckbox/accessibilitydoc.js
index a645c7bdec..779aebf8f2 100644
--- a/components/doc/tristatecheckbox/accessibilitydoc.js
+++ b/components/doc/tristatecheckbox/accessibilitydoc.js
@@ -21,7 +21,7 @@ export function AccessibilityDoc() {
                 property from the <Link href="/locale">locale</Link> API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
             </p>
 
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
 
             <h3>Keyboard Support</h3>
             <div className="doc-tablewrapper">
diff --git a/components/doc/tristatecheckbox/importdoc.js b/components/doc/tristatecheckbox/importdoc.js
index d56b71b5d4..24f864c184 100644
--- a/components/doc/tristatecheckbox/importdoc.js
+++ b/components/doc/tristatecheckbox/importdoc.js
@@ -11,7 +11,7 @@ import { TriStateCheckbox } from 'primereact/tristatecheckbox';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/tristatecheckbox/theming/tailwinddoc.js b/components/doc/tristatecheckbox/theming/tailwinddoc.js
index 654fe96687..95a0056c5a 100644
--- a/components/doc/tristatecheckbox/theming/tailwinddoc.js
+++ b/components/doc/tristatecheckbox/theming/tailwinddoc.js
@@ -54,7 +54,7 @@ export default function UnstyledDemo() {
                     PrimeReact offers a built-in Tailwind theme to get you started quickly. The default values related to the component are displayed below. The component can easily be styled with your own design based on Tailwind utilities, see the{' '}
                     <Link href="/tailwind">Tailwind Customization</Link> section for an example.
                 </p>
-                <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
                 <p>A playground sample with the pre-built Tailwind theme.</p>
                 <DocSectionCode code={code2} embedded />
             </DocSectionText>
diff --git a/components/doc/unstyled/setupdoc.js b/components/doc/unstyled/setupdoc.js
index 458d96f53d..806d307550 100644
--- a/components/doc/unstyled/setupdoc.js
+++ b/components/doc/unstyled/setupdoc.js
@@ -26,14 +26,14 @@ return(
                 <p>
                     Unstyled mode is enabled for the whole suite by setting <i>unstyled</i> as true during PrimeReact installation.
                 </p>
-                <DocSectionCode code={code1} hideToggleCode import hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code1} hideToggleCode import hideStackBlitz />
                 <p>
                     Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the <i>unstyled</i> prop of the component.
                 </p>
                 <div className="card flex justify-content-center">
                     <Button label="Check" icon="pi pi-check" unstyled />
                 </div>
-                <DocSectionCode code={code2} import hideToggleCode hideCodeSandbox hideStackBlitz />
+                <DocSectionCode code={code2} import hideToggleCode hideStackBlitz />
             </DocSectionText>
         </>
     );
diff --git a/components/doc/unstyled/themedoc.js b/components/doc/unstyled/themedoc.js
index 066c8577cd..23ba3ec48d 100644
--- a/components/doc/unstyled/themedoc.js
+++ b/components/doc/unstyled/themedoc.js
@@ -38,7 +38,7 @@ return(
                     and the global setting is merged with component having higher precedencee.
                 </p>
             </DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }
diff --git a/components/doc/virtualscroller/importdoc.js b/components/doc/virtualscroller/importdoc.js
index 52e3bae68e..586de09ec1 100644
--- a/components/doc/virtualscroller/importdoc.js
+++ b/components/doc/virtualscroller/importdoc.js
@@ -11,7 +11,7 @@ import { VirtualScroller } from 'primereact/virtualscroller';
     return (
         <>
             <DocSectionText {...props}></DocSectionText>
-            <DocSectionCode code={code} hideToggleCode import hideCodeSandbox hideStackBlitz />
+            <DocSectionCode code={code} hideToggleCode import hideStackBlitz />
         </>
     );
 }