diff --git a/packages/web-react/src/components/Stack/README.md b/packages/web-react/src/components/Stack/README.md
index 98917cdca7..e82c4e360d 100644
--- a/packages/web-react/src/components/Stack/README.md
+++ b/packages/web-react/src/components/Stack/README.md
@@ -31,32 +31,36 @@ Advanced example usage:
 ## Custom Spacing
 
 You can use the `spacing` prop to apply custom spacing between items. The prop
-accepts either a spacing token (eg. `space-100`) or an object with breakpoint keys and spacing token values.
+accepts either a spacing token (e.g. `space-100`) or an object with breakpoint keys and spacing token values.
+
+Default spacing:
 
 ```jsx
-<Stack hasSpacing spacing="space-1200">
-  <div>Block 1</div>
-  <div>Block 2</div>
-  <div>Block 3</div>
-</Stack>
+<Stack hasSpacing>{/* Stacked content */}</Stack>
+```
 
-<Stack hasSpacing spacing={{ mobile: 'space-400', tablet: 'space-800' }}>
-  <div>Block 1</div>
-  <div>Block 2</div>
-  <div>Block 3</div>
-</Stack>
+Custom spacing:
+
+```jsx
+<Stack spacing="space-1200">{/* Stacked content */}</Stack>
+```
+
+Custom responsive spacing:
+
+```jsx
+<Stack spacing={{ mobile: 'space-400', tablet: 'space-800' }}>{/* Stacked content */}</Stack>
 ```
 
 ## API
 
-| Name                      | Type                                                             | Default | Required | Description                                                         |
-| ------------------------- | ---------------------------------------------------------------- | ------- | -------- | ------------------------------------------------------------------- |
-| `elementType`             | `string`                                                         | `div`   | ✕        | Element type of the wrapper element                                 |
-| `hasEndDivider`           | `bool`                                                           | `false` | ✕        | Render a divider after the last item                                |
-| `hasIntermediateDividers` | `bool`                                                           | `false` | ✕        | Render dividers between items                                       |
-| `hasSpacing`              | `bool`                                                           | `false` | ✕        | Apply a spacing between items                                       |
-| `hasStartDivider`         | `bool`                                                           | `false` | ✕        | Render a divider before the first item                              |
-| `spacing`                 | [`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | —       | ✕        | Custom spacing between items, see [Custom Spacing](#custom-spacing) |
+| Name                      | Type                                                             | Default | Required | Description                                           |
+| ------------------------- | ---------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------- |
+| `elementType`             | `string`                                                         | `div`   | ✕        | Element type of the wrapper element                   |
+| `hasEndDivider`           | `bool`                                                           | `false` | ✕        | Render a divider after the last item                  |
+| `hasIntermediateDividers` | `bool`                                                           | `false` | ✕        | Render dividers between items                         |
+| `hasSpacing`              | `bool`                                                           | `false` | ✕        | Apply default spacing between items                   |
+| `hasStartDivider`         | `bool`                                                           | `false` | ✕        | Render a divider before the first item                |
+| `spacing`                 | [`SpaceToken` \| `Partial<Record<BreakpointToken, SpaceToken>>`] | —       | ✕        | Apply [custom spacing](#custom-spacing) between items |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]
diff --git a/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx b/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx
index 2b58c89d61..ffd3332769 100644
--- a/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx
+++ b/packages/web-react/src/components/Stack/__tests__/Stack.test.tsx
@@ -49,7 +49,7 @@ describe('Stack', () => {
   });
 
   it('should render with custom spacing', () => {
-    const dom = render(<Stack hasSpacing spacing="space-1000" />);
+    const dom = render(<Stack spacing="space-1000" />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');
@@ -57,9 +57,7 @@ describe('Stack', () => {
   });
 
   it('should render with custom spacing for each breakpoint', () => {
-    const dom = render(
-      <Stack hasSpacing spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />,
-    );
+    const dom = render(<Stack spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');
@@ -69,7 +67,7 @@ describe('Stack', () => {
   });
 
   it('should render with custom spacing for only one breakpoint', () => {
-    const dom = render(<Stack hasSpacing spacing={{ tablet: 'space-1000' }} />);
+    const dom = render(<Stack spacing={{ tablet: 'space-1000' }} />);
 
     const element = dom.container.querySelector('div') as HTMLElement;
     expect(element).toHaveClass('Stack--hasSpacing');
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx
index a1edf415d8..d53588185d 100644
--- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacing.tsx
@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacing = () => (
-  <Stack elementType="ul" hasSpacing spacing="space-1200">
+  <Stack elementType="ul" spacing="space-1200">
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-${i}`}>
         <DocsBox>Block {i}</DocsBox>
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx
index dc12608e9a..87b0552a78 100644
--- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingAndDividers.tsx
@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingAndDividers = () => (
-  <Stack elementType="ul" hasSpacing hasStartDivider hasEndDivider hasIntermediateDividers spacing="space-800">
+  <Stack elementType="ul" hasStartDivider hasEndDivider hasIntermediateDividers spacing="space-800">
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-dividers-${i}`}>
         <DocsBox>Block {i}</DocsBox>
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx
index d863c2b756..c7d35b18b2 100644
--- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingForEachBreakpoint.tsx
@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingForEachBreakpoint = () => (
-  <Stack elementType="ul" hasSpacing spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }}>
+  <Stack elementType="ul" spacing={{ mobile: 'space-100', tablet: 'space-1000', desktop: 'space-1200' }}>
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-breakpoints-${i}`}>
         <DocsBox>Block {i}</DocsBox>
diff --git a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx
index 331393a091..54955ce0c7 100644
--- a/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx
+++ b/packages/web-react/src/components/Stack/demo/StackBlocksWithCustomSpacingFromTabletBreakpoint.tsx
@@ -3,7 +3,7 @@ import DocsBox from '../../../../docs/DocsBox';
 import Stack from '../Stack';
 
 const StackBlocksWithCustomSpacingFromTabletBreakpoint = () => (
-  <Stack elementType="ul" hasSpacing spacing={{ tablet: 'space-1200' }}>
+  <Stack elementType="ul" spacing={{ tablet: 'space-1200' }}>
     {[1, 2, 3].map((i) => (
       <li key={`stack-custom-spacing-tablet-${i}`}>
         <DocsBox>Block {i}</DocsBox>
diff --git a/packages/web-react/src/components/Stack/useStackStyleProps.ts b/packages/web-react/src/components/Stack/useStackStyleProps.ts
index ec528d7f5a..8e83eaaba4 100644
--- a/packages/web-react/src/components/Stack/useStackStyleProps.ts
+++ b/packages/web-react/src/components/Stack/useStackStyleProps.ts
@@ -27,7 +27,7 @@ export function useStackStyleProps<T extends ElementType = 'div'>(props: SpiritS
   const classProps = classNames(StackClass, {
     [StackBottomDividerClass]: hasEndDivider,
     [StackMiddleDividersClass]: hasIntermediateDividers,
-    [StackSpacingClass]: hasSpacing,
+    [StackSpacingClass]: hasSpacing || spacing,
     [StackTopDividerClass]: hasStartDivider,
   });