diff --git a/docs/data/joy/components/stack/BasicStack.js b/docs/data/joy/components/stack/BasicStack.js
index 1bb7416cec5f29..9bb260118559c2 100644
--- a/docs/data/joy/components/stack/BasicStack.js
+++ b/docs/data/joy/components/stack/BasicStack.js
@@ -5,13 +5,14 @@ import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function BasicStack() {
diff --git a/docs/data/joy/components/stack/BasicStack.tsx b/docs/data/joy/components/stack/BasicStack.tsx
index 1bb7416cec5f29..9bb260118559c2 100644
--- a/docs/data/joy/components/stack/BasicStack.tsx
+++ b/docs/data/joy/components/stack/BasicStack.tsx
@@ -5,13 +5,14 @@ import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function BasicStack() {
diff --git a/docs/data/joy/components/stack/DirectionStack.js b/docs/data/joy/components/stack/DirectionStack.js
index e4db4711d8c9a3..32bc369722d1dd 100644
--- a/docs/data/joy/components/stack/DirectionStack.js
+++ b/docs/data/joy/components/stack/DirectionStack.js
@@ -4,19 +4,20 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function DirectionStack() {
   return (
     <div>
-      <Stack direction="row" spacing={2}>
+      <Stack direction="row" spacing={1}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>
diff --git a/docs/data/joy/components/stack/DirectionStack.tsx b/docs/data/joy/components/stack/DirectionStack.tsx
index e4db4711d8c9a3..32bc369722d1dd 100644
--- a/docs/data/joy/components/stack/DirectionStack.tsx
+++ b/docs/data/joy/components/stack/DirectionStack.tsx
@@ -4,19 +4,20 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function DirectionStack() {
   return (
     <div>
-      <Stack direction="row" spacing={2}>
+      <Stack direction="row" spacing={1}>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Item 3</Item>
diff --git a/docs/data/joy/components/stack/DirectionStack.tsx.preview b/docs/data/joy/components/stack/DirectionStack.tsx.preview
index 0b432fbd09105e..a4ee8ef47dbbc8 100644
--- a/docs/data/joy/components/stack/DirectionStack.tsx.preview
+++ b/docs/data/joy/components/stack/DirectionStack.tsx.preview
@@ -1,4 +1,4 @@
-<Stack direction="row" spacing={2}>
+<Stack direction="row" spacing={1}>
   <Item>Item 1</Item>
   <Item>Item 2</Item>
   <Item>Item 3</Item>
diff --git a/docs/data/joy/components/stack/DividerStack.js b/docs/data/joy/components/stack/DividerStack.js
index 3451afa7ca399f..c43b3586df70d3 100644
--- a/docs/data/joy/components/stack/DividerStack.js
+++ b/docs/data/joy/components/stack/DividerStack.js
@@ -6,13 +6,14 @@ import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function DividerStack() {
diff --git a/docs/data/joy/components/stack/DividerStack.tsx b/docs/data/joy/components/stack/DividerStack.tsx
index 3451afa7ca399f..c43b3586df70d3 100644
--- a/docs/data/joy/components/stack/DividerStack.tsx
+++ b/docs/data/joy/components/stack/DividerStack.tsx
@@ -6,13 +6,14 @@ import Box from '@mui/joy/Box';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function DividerStack() {
diff --git a/docs/data/joy/components/stack/FlexboxGapStack.js b/docs/data/joy/components/stack/FlexboxGapStack.js
index 33d144ca45a120..8a272533bfc5dd 100644
--- a/docs/data/joy/components/stack/FlexboxGapStack.js
+++ b/docs/data/joy/components/stack/FlexboxGapStack.js
@@ -5,20 +5,21 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
   flexGrow: 1,
 }));
 
 export default function FlexboxGapStack() {
   return (
     <Box sx={{ width: 200 }}>
-      <Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+      <Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Long content</Item>
diff --git a/docs/data/joy/components/stack/FlexboxGapStack.tsx b/docs/data/joy/components/stack/FlexboxGapStack.tsx
index 33d144ca45a120..8a272533bfc5dd 100644
--- a/docs/data/joy/components/stack/FlexboxGapStack.tsx
+++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx
@@ -5,20 +5,21 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
   flexGrow: 1,
 }));
 
 export default function FlexboxGapStack() {
   return (
     <Box sx={{ width: 200 }}>
-      <Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+      <Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
         <Item>Item 1</Item>
         <Item>Item 2</Item>
         <Item>Long content</Item>
diff --git a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview
index 3fc7882b161bce..5ef6dfa6a30719 100644
--- a/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview
+++ b/docs/data/joy/components/stack/FlexboxGapStack.tsx.preview
@@ -1,4 +1,4 @@
-<Stack spacing={{ xs: 1, sm: 2 }} direction="row" useFlexGap flexWrap="wrap">
+<Stack spacing={1} direction="row" flexWrap="wrap" useFlexGap>
   <Item>Item 1</Item>
   <Item>Item 2</Item>
   <Item>Long content</Item>
diff --git a/docs/data/joy/components/stack/InteractiveStack.js b/docs/data/joy/components/stack/InteractiveStack.js
index c4b0904a9b2a82..0ec70fd492dc6c 100644
--- a/docs/data/joy/components/stack/InteractiveStack.js
+++ b/docs/data/joy/components/stack/InteractiveStack.js
@@ -11,13 +11,13 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import BrandingProvider from 'docs/src/BrandingProvider';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  borderRadius: theme.radius.md,
 }));
 
 export default function InteractiveStack() {
@@ -36,13 +36,13 @@ export default function InteractiveStack() {
 `;
 
   return (
-    <Stack sx={{ flexGrow: 1 }}>
+    <Stack sx={{ flexGrow: 1, '* pre': { mb: 0 } }}>
       <Stack
         direction={direction}
         justifyContent={justifyContent}
         alignItems={alignItems}
         spacing={spacing}
-        sx={{ height: 300, pt: 2, pb: 2 }}
+        sx={{ minHeight: 200, pb: 3 }}
       >
         {[0, 1, 2].map((value) => (
           <Item
@@ -57,12 +57,25 @@ export default function InteractiveStack() {
           </Item>
         ))}
       </Stack>
-      <Sheet sx={{ p: 2, backgroundColor: 'background.level1' }}>
+      <Sheet
+        variant="outlined"
+        sx={(theme) => ({
+          p: 2,
+          borderRadius: 'md',
+          bgcolor: theme.palette.neutral[50],
+          borderColor: theme.palette.neutral[100],
+          [theme.getColorSchemeSelector('dark')]: {
+            borderColor: theme.palette.neutral[800],
+            backgroundColor: theme.palette.neutral[900],
+          },
+        })}
+      >
         <Grid container spacing={3}>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>direction</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="direction"
                 aria-label="direction"
@@ -81,8 +94,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>alignItems</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="alignItems"
                 aria-label="align items"
@@ -102,8 +116,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>justifyContent</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="justifyContent"
                 aria-label="justifyContent"
@@ -124,8 +139,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="spacing"
                 aria-label="spacing"
diff --git a/docs/data/joy/components/stack/InteractiveStack.tsx b/docs/data/joy/components/stack/InteractiveStack.tsx
index 05921a6f165f9b..17cf59c88e3c4d 100644
--- a/docs/data/joy/components/stack/InteractiveStack.tsx
+++ b/docs/data/joy/components/stack/InteractiveStack.tsx
@@ -11,13 +11,13 @@ import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import BrandingProvider from 'docs/src/BrandingProvider';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  borderRadius: theme.radius.md,
 }));
 
 export default function InteractiveStack() {
@@ -36,13 +36,13 @@ export default function InteractiveStack() {
 `;
 
   return (
-    <Stack sx={{ flexGrow: 1 }}>
+    <Stack sx={{ flexGrow: 1, '* pre': { mb: 0 } }}>
       <Stack
         direction={direction}
         justifyContent={justifyContent}
         alignItems={alignItems}
         spacing={spacing}
-        sx={{ height: 300, pt: 2, pb: 2 }}
+        sx={{ minHeight: 200, pb: 3 }}
       >
         {[0, 1, 2].map((value) => (
           <Item
@@ -57,12 +57,25 @@ export default function InteractiveStack() {
           </Item>
         ))}
       </Stack>
-      <Sheet sx={{ p: 2, backgroundColor: 'background.level1' }}>
+      <Sheet
+        variant="outlined"
+        sx={(theme) => ({
+          p: 2,
+          borderRadius: 'md',
+          bgcolor: theme.palette.neutral[50],
+          borderColor: theme.palette.neutral[100],
+          [theme.getColorSchemeSelector('dark')]: {
+            borderColor: theme.palette.neutral[800],
+            backgroundColor: theme.palette.neutral[900],
+          },
+        })}
+      >
         <Grid container spacing={3}>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>direction</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>direction</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="direction"
                 aria-label="direction"
@@ -81,8 +94,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>alignItems</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>alignItems</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="alignItems"
                 aria-label="align items"
@@ -102,8 +116,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>justifyContent</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>justifyContent</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="justifyContent"
                 aria-label="justifyContent"
@@ -124,8 +139,9 @@ export default function InteractiveStack() {
           </Grid>
           <Grid xs={12}>
             <FormControl>
-              <FormLabel sx={{ mb: 1.5 }}>spacing</FormLabel>
+              <FormLabel sx={{ mb: 0.5 }}>spacing</FormLabel>
               <RadioGroup
+                size="sm"
                 orientation="horizontal"
                 name="spacing"
                 aria-label="spacing"
diff --git a/docs/data/joy/components/stack/ResponsiveStack.js b/docs/data/joy/components/stack/ResponsiveStack.js
index acc2bb6c6ab7e9..08683d607a8f11 100644
--- a/docs/data/joy/components/stack/ResponsiveStack.js
+++ b/docs/data/joy/components/stack/ResponsiveStack.js
@@ -4,13 +4,14 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function ResponsiveStack() {
diff --git a/docs/data/joy/components/stack/ResponsiveStack.tsx b/docs/data/joy/components/stack/ResponsiveStack.tsx
index acc2bb6c6ab7e9..08683d607a8f11 100644
--- a/docs/data/joy/components/stack/ResponsiveStack.tsx
+++ b/docs/data/joy/components/stack/ResponsiveStack.tsx
@@ -4,13 +4,14 @@ import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
 
 const Item = styled(Sheet)(({ theme }) => ({
-  backgroundColor:
-    theme.palette.mode === 'dark' ? theme.palette.background.level1 : '#fff',
   ...theme.typography['body-sm'],
-  padding: theme.spacing(1),
   textAlign: 'center',
-  borderRadius: 4,
+  fontWeight: theme.fontWeight.md,
   color: theme.vars.palette.text.secondary,
+  border: '1px solid',
+  borderColor: theme.palette.divider,
+  padding: theme.spacing(1),
+  borderRadius: theme.radius.md,
 }));
 
 export default function ResponsiveStack() {
diff --git a/docs/data/joy/components/stack/ZeroWidthStack.js b/docs/data/joy/components/stack/ZeroWidthStack.js
index fe6430db37ecac..0ebb724caeb29d 100644
--- a/docs/data/joy/components/stack/ZeroWidthStack.js
+++ b/docs/data/joy/components/stack/ZeroWidthStack.js
@@ -22,6 +22,7 @@ export default function ZeroWidthStack() {
   return (
     <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
       <Item
+        variant="outlined"
         sx={{
           my: 1,
           mx: 'auto',
@@ -34,6 +35,7 @@ export default function ZeroWidthStack() {
         </Stack>
       </Item>
       <Item
+        variant="outlined"
         sx={{
           my: 1,
           mx: 'auto',
diff --git a/docs/data/joy/components/stack/ZeroWidthStack.tsx b/docs/data/joy/components/stack/ZeroWidthStack.tsx
index fe6430db37ecac..0ebb724caeb29d 100644
--- a/docs/data/joy/components/stack/ZeroWidthStack.tsx
+++ b/docs/data/joy/components/stack/ZeroWidthStack.tsx
@@ -22,6 +22,7 @@ export default function ZeroWidthStack() {
   return (
     <Box sx={{ flexGrow: 1, overflow: 'hidden', px: 3 }}>
       <Item
+        variant="outlined"
         sx={{
           my: 1,
           mx: 'auto',
@@ -34,6 +35,7 @@ export default function ZeroWidthStack() {
         </Stack>
       </Item>
       <Item
+        variant="outlined"
         sx={{
           my: 1,
           mx: 'auto',
diff --git a/docs/data/joy/components/stack/stack.md b/docs/data/joy/components/stack/stack.md
index 3d5599ef5f355e..ea9fecbd6f4b16 100644
--- a/docs/data/joy/components/stack/stack.md
+++ b/docs/data/joy/components/stack/stack.md
@@ -15,9 +15,7 @@ githubLabel: 'component: Stack'
 
 The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional spacing and dividers between each child.
 
-:::info
-Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical _and_ horizontal arrangement.
-:::
+{{"demo": "InteractiveStack.js", "hideToolbar": true}}
 
 ## Basics
 
@@ -31,41 +29,45 @@ Use the `spacing` prop to control the space between children.
 The spacing value can be any number, including decimals, or a string.
 (The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.)
 
-{{"demo": "BasicStack.js", "bg": true}}
+{{"demo": "BasicStack.js"}}
 
 ### Stack vs. Grid
 
-`Stack` is concerned with one-dimensional layouts, while [Grid](/joy-ui/react-grid/) handles two-dimensional layouts. The default direction is `column` which stacks children vertically.
+Stack is ideal for one-dimensional layouts, while [Grid](/joy-ui/react-grid/) is preferable when you need both vertical _and_ horizontal arrangement.
+
+## Customization
 
-## Direction
+### Direction
 
 By default, Stack arranges items vertically in a column.
 Use the `direction` prop to position items horizontally in a row:
 
-{{"demo": "DirectionStack.js", "bg": true}}
+{{"demo": "DirectionStack.js"}}
 
-## Dividers
+### Dividers
 
 Use the `divider` prop to insert an element between each child.
 This works particularly well with the [Divider](/joy-ui/react-divider/) component, as shown below:
 
-{{"demo": "DividerStack.js", "bg": true}}
+{{"demo": "DividerStack.js"}}
 
-## Responsive values
+### Responsive values
 
 You can switch the `direction` or `spacing` values based on the active breakpoint.
 
-{{"demo": "ResponsiveStack.js", "bg": true}}
+{{"demo": "ResponsiveStack.js"}}
 
-## Flexbox gap
+### Flexbox gap
 
 To use [flexbox `gap`](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) for the spacing implementation, set the `useFlexGap` prop to true.
+It removes the [known limitations](#limitations) of the default implementation that uses a CSS nested selector.
 
-It removes the [known limitations](#limitations) of the default implementation that uses CSS nested selector. However, CSS flexbox gap is not fully supported in some browsers.
-
+:::info
+The CSS flexbox gap property is not fully supported in some browsers.
 We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it.
+:::
 
-{{"demo": "FlexboxGapStack.js", "bg": true}}
+{{"demo": "FlexboxGapStack.js"}}
 
 To set the prop to all stack instances, create a theme with default props:
 
@@ -92,13 +94,7 @@ function App() {
 }
 ```
 
-## Interactive demo
-
-Below is an interactive demo that lets you explore the visual results of the different settings:
-
-{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}}
-
-## System props
+### System props
 
 As a CSS utility component, Stack supports all [MUI System properties](/system/properties/).
 You can use them as props directly on the component.
@@ -146,7 +142,7 @@ In order for the item to stay within the container you need to set `min-width: 0
   <Typography noWrap>
 ```
 
-{{"demo": "ZeroWidthStack.js", "bg": true}}
+{{"demo": "ZeroWidthStack.js"}}
 
 ## Anatomy