diff --git a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx
index 446994b08..11508d6a3 100644
--- a/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/AppBar/playground/PlaygroundPage.tsx
@@ -148,6 +148,7 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     </Toolbar>
 </AppBar>`
         .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ')
         .replace(/^<AppBar(\s)+\n>/, '<AppBar>');
 
 export const AppBarPlaygroundComponent = (): JSX.Element => (
diff --git a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx
index 66377d6d8..3ddafef6e 100644
--- a/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/ChannelValue/playground/PlaygroundPage.tsx
@@ -133,7 +133,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
               })}}`
             : ''
     }
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ChannelValuePlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx
index 05a60f9a3..f0da68c8a 100644
--- a/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/Drawer/playground/PlaygroundPage.tsx
@@ -303,7 +303,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     <DrawerBody>
         <DrawerNavGroup {...navGroupProps} />
     </DrawerBody>
-</Drawer>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</Drawer>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx
index c488af9cd..f837efc31 100644
--- a/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerFooter/playground/PlaygroundPage.tsx
@@ -102,7 +102,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['open'] })}
 >
     <Box sx={{ p: 2 }}>Footer Content Here</Box>
-</DrawerFooter>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</DrawerFooter>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerFooterPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx
index ae838ef6d..48b7ee81f 100644
--- a/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerHeader/playground/PlaygroundPage.tsx
@@ -145,7 +145,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'backgroundImage'] })}
     ${data.icon && data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.backgroundImage !== 'undefined' ? `backgroundImage={'../images/${data.backgroundImage as string}.png'}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerHeaderPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx
index faf7fdf4b..e7cd35bb9 100644
--- a/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerNavGroup/playground/PlaygroundPage.tsx
@@ -139,7 +139,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${data.collapseIcon !== 'undefined' ? `collapseIcon={${getIconSnippetWithProps(data.collapseIcon as string)}}` : ''}
     ${data.expandIcon !== 'undefined' ? `expandIcon={${getIconSnippetWithProps(data.expandIcon as string)}}` : ''}
     items={navGroupItems}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerNavGroupPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx
index af680889b..95d6866be 100644
--- a/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerNavItem/playground/PlaygroundPage.tsx
@@ -104,7 +104,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.collapseIcon !== 'undefined' ? `collapseIcon={${getIconSnippetWithProps(data.collapseIcon as string)}}` : ''}
     ${data.expandIcon !== 'undefined' ? `expandIcon={${getIconSnippetWithProps(data.expandIcon as string)}}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerNavItemPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx
index 69a1a7d50..6b0c09fd8 100644
--- a/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerRailItem/playground/PlaygroundPage.tsx
@@ -139,7 +139,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     `<DrawerRailItem
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'condensed'] })}
     ${data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerRailItemPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx
index bd0f7ea67..1b4385e6a 100644
--- a/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/DrawerSubheader/playground/PlaygroundPage.tsx
@@ -94,7 +94,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['open'] })}
 >
     <Box sx={{ p: 2 }}>Subheader Content Here</Box>
-</DrawerSubheader>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</DrawerSubheader>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const DrawerSubheaderPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx
index 396b851a8..cfc960a04 100644
--- a/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/EmptyState/playground/PlaygroundPage.tsx
@@ -97,7 +97,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     }`
             : ''
     }
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const EmptyStatePlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx
index 349eabf8b..5e087f7fd 100644
--- a/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/Hero/playground/PlaygroundPage.tsx
@@ -162,7 +162,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
                 : ''
         }
     }}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const HeroPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx
index b1034a23a..566c90d58 100644
--- a/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/InfoListItem/playground/PlaygroundPage.tsx
@@ -240,7 +240,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t', skip: ['icon', 'clickable'] })}
     ${data.icon && data.icon !== 'undefined' ? `icon={${getIconSnippetWithProps(data.icon as string)}}` : ''}
     ${data.clickable ? `onClick={(): void => {}}` : ``}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const InfoListItemPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx
index 93426711c..d432c8412 100644
--- a/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/ListItemTag/playground/PlaygroundPage.tsx
@@ -60,7 +60,9 @@ const ListItemTagPreview: PreviewComponent = ({ data }) => {
 const generateSnippet: CodeSnippetFunction = (data) =>
     `<ListItemTag 
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t' })}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ListItemTagPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx
index 079c9aaf9..ea5a159e2 100644
--- a/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/ScoreCard/playground/PlaygroundPage.tsx
@@ -254,7 +254,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
         icon={<Cloud />}
     />
     </List>
-</ScoreCard>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+</ScoreCard>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ScoreCardPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx
index 3308dd715..e32850a05 100644
--- a/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/ThreeLiner/playground/PlaygroundPage.tsx
@@ -61,7 +61,9 @@ const ThreeLinerPreview: PreviewComponent = ({ data }) => {
 const generateSnippet: CodeSnippetFunction = (data) =>
     `<ThreeLiner 
     ${getPropsToString(getPropsMapping(data, inputConfig), { join: '\n\t' })}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ThreeLinerPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx
index 6ee79c2a9..014f61f66 100644
--- a/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/ToolbarMenu/playground/PlaygroundPage.tsx
@@ -92,7 +92,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
             },
         ],
     }]}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const ToolbarMenuPlaygroundComponent = (): JSX.Element => (
     <Box
diff --git a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx
index 48156149c..e2d790cca 100644
--- a/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx
+++ b/docs/src/componentDocs/UserMenu/playground/PlaygroundPage.tsx
@@ -126,7 +126,9 @@ const generateSnippet: CodeSnippetFunction = (data) =>
             ],
         },
     ]}
-/>`.replace(/^\s*$(?:\r\n?|\n)/gm, '');
+/>`
+        .replace(/^\s*$(?:\r\n?|\n)/gm, '')
+        .replace(/(?:^|)( {4}|\t)/gm, '    ');
 
 export const UserMenuPlaygroundComponent = (): JSX.Element => (
     <Box