diff --git a/.changeset/silly-meals-hang.md b/.changeset/silly-meals-hang.md
new file mode 100644
index 00000000000..bb5eedc4238
--- /dev/null
+++ b/.changeset/silly-meals-hang.md
@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Renamed `AlphaStack` to `VerticalStack`
diff --git a/polaris-react/src/components/AccountConnection/AccountConnection.tsx b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
index 67eb3117682..0f4af011aff 100644
--- a/polaris-react/src/components/AccountConnection/AccountConnection.tsx
+++ b/polaris-react/src/components/AccountConnection/AccountConnection.tsx
@@ -8,7 +8,7 @@ import {AlphaCard} from '../AlphaCard';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 export interface AccountConnectionProps {
   /** Content to display as title */
@@ -73,10 +73,10 @@ export function AccountConnection({
       <SettingAction action={actionElement}>
         <Inline gap="4">
           {avatarMarkup}
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             {titleMarkup}
             {detailsMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Inline>
       </SettingAction>
       {termsOfServiceMarkup}
diff --git a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
index fd06c277dde..66501686962 100644
--- a/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
+++ b/polaris-react/src/components/AlphaCard/AlphaCard.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
   AlphaCard,
-  AlphaStack,
+  VerticalStack,
   Bleed,
   Box,
   Divider,
@@ -17,12 +17,12 @@ export default {
 export function Default() {
   return (
     <AlphaCard>
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -30,12 +30,12 @@ export function Default() {
 export function WithBackgroundSubdued() {
   return (
     <AlphaCard background="bg-subdued">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -43,12 +43,12 @@ export function WithBackgroundSubdued() {
 export function WithBorderRadiusRoundedAbove() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -56,12 +56,12 @@ export function WithBorderRadiusRoundedAbove() {
 export function WithResponsivePadding() {
   return (
     <AlphaCard padding={{xs: '5', sm: '6', md: '8'}} roundedAbove="sm">
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Text as="h3" variant="headingMd">
           Online store dashboard
         </Text>
         <p>View a summary of your online store’s performance.</p>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -69,7 +69,7 @@ export function WithResponsivePadding() {
 export function WithSubduedSection() {
   return (
     <AlphaCard roundedAbove="sm">
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Text as="h3" variant="headingMd">
           Staff accounts
         </Text>
@@ -79,14 +79,14 @@ export function WithSubduedSection() {
             <List.Item>Ezequiel Manno</List.Item>
           </List>
         </Box>
-      </AlphaStack>
+      </VerticalStack>
       <Bleed
         marginBlockEnd={{xs: '4', sm: '5'}}
         marginInline={{xs: '4', sm: '5'}}
       >
         <Divider />
         <Box background="bg-subdued" padding={{xs: '4', sm: '5'}}>
-          <AlphaStack gap="2">
+          <VerticalStack gap="2">
             <Text variant="headingSm" as="h3">
               Deactivated staff accounts
             </Text>
@@ -94,7 +94,7 @@ export function WithSubduedSection() {
               <List.Item>Felix Crafford</List.Item>
               <List.Item>Ezequiel Manno</List.Item>
             </List>
-          </AlphaStack>
+          </VerticalStack>
         </Box>
       </Bleed>
     </AlphaCard>
diff --git a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
index 4d0cb167c8c..d69144fb506 100644
--- a/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
+++ b/polaris-react/src/components/AlphaFilters/components/FilterPill/FilterPill.tsx
@@ -5,7 +5,7 @@ import {useI18n} from '../../../../utilities/i18n';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {Popover} from '../../../Popover';
 import {Button} from '../../../Button';
-import {AlphaStack} from '../../../AlphaStack';
+import {VerticalStack} from '../../../VerticalStack';
 import {Icon} from '../../../Icon';
 import {Text} from '../../../Text';
 import {Inline} from '../../../Inline';
@@ -174,10 +174,10 @@ export function FilterPill({
       >
         <div className={styles.PopoverWrapper}>
           <Popover.Section>
-            <AlphaStack gap="1">
+            <VerticalStack gap="1">
               {filter}
               {clearButtonMarkup}
-            </AlphaStack>
+            </VerticalStack>
           </Popover.Section>
         </div>
       </Popover>
diff --git a/polaris-react/src/components/AlphaStack/index.ts b/polaris-react/src/components/AlphaStack/index.ts
deleted file mode 100644
index 832515641aa..00000000000
--- a/polaris-react/src/components/AlphaStack/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './AlphaStack';
diff --git a/polaris-react/src/components/Banner/Banner.stories.tsx b/polaris-react/src/components/Banner/Banner.stories.tsx
index bfefc6826f1..c2e02e3915f 100644
--- a/polaris-react/src/components/Banner/Banner.stories.tsx
+++ b/polaris-react/src/components/Banner/Banner.stories.tsx
@@ -1,7 +1,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {
-  AlphaStack,
+  VerticalStack,
   Banner,
   Button,
   LegacyCard,
@@ -193,7 +193,7 @@ export function InACard() {
 export function WithEndJustifiedContent() {
   return (
     <Banner status="critical">
-      <AlphaStack gap="1">
+      <VerticalStack gap="1">
         <Inline gap="4" align="space-between">
           <Text variant="headingMd" fontWeight="semibold" as="h3">
             Deployment failed in 5min
@@ -203,7 +203,7 @@ export function WithEndJustifiedContent() {
           </Link>
         </Inline>
         <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
-      </AlphaStack>
+      </VerticalStack>
     </Banner>
   );
 }
diff --git a/polaris-react/src/components/Box/Box.stories.tsx b/polaris-react/src/components/Box/Box.stories.tsx
index 0c5108f40c0..47df1d71ca4 100644
--- a/polaris-react/src/components/Box/Box.stories.tsx
+++ b/polaris-react/src/components/Box/Box.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {VerticalStack, Box, Icon} from '@shopify/polaris';
 import {PaintBrushMajor} from '@shopify/polaris-icons';
 
 export default {
@@ -33,7 +33,7 @@ export function WithBorderRadius() {
 
 export function WithResponsivePadding() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Box background="bg" padding={{xs: '2', sm: '8'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
@@ -64,6 +64,6 @@ export function WithResponsivePadding() {
       <Box background="bg" paddingInlineEnd={{xs: '4', sm: '10'}} border="dark">
         <Icon source={PaintBrushMajor} color="base" />
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
index 2ef38e364a5..47a17c6cc71 100644
--- a/polaris-react/src/components/ChoiceList/ChoiceList.tsx
+++ b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -5,7 +5,7 @@ import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
 import {InlineError, errorTextID} from '../InlineError';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {Box} from '../Box';
 import {Bleed} from '../Bleed';
 
@@ -132,18 +132,18 @@ export function ChoiceList({
   );
 
   return (
-    <AlphaStack
+    <VerticalStack
       as="fieldset"
       gap={{xs: '4', md: '0'}}
       aria-invalid={error != null}
       id={finalName}
     >
       {titleMarkup}
-      <AlphaStack as="ul" gap={{xs: '4', md: '0'}}>
+      <VerticalStack as="ul" gap={{xs: '4', md: '0'}}>
         {choicesMarkup}
-      </AlphaStack>
+      </VerticalStack>
       {errorMarkup}
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris-react/src/components/Divider/Divider.stories.tsx b/polaris-react/src/components/Divider/Divider.stories.tsx
index c0e839d029f..cc9d8853b2c 100644
--- a/polaris-react/src/components/Divider/Divider.stories.tsx
+++ b/polaris-react/src/components/Divider/Divider.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Divider, Text} from '@shopify/polaris';
+import {VerticalStack, Divider, Text} from '@shopify/polaris';
 
 export default {
   component: Divider,
@@ -12,7 +12,7 @@ export function Default() {
 
 export function WithBorderStyles() {
   return (
-    <AlphaStack gap="5">
+    <VerticalStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -29,6 +29,6 @@ export function WithBorderStyles() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx
index dca88c81107..e73d89c278e 100644
--- a/polaris-react/src/components/DropZone/DropZone.stories.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx
@@ -7,7 +7,7 @@ import {
   DropZone,
   List,
   Page,
-  AlphaStack,
+  VerticalStack,
   Thumbnail,
   Inline,
 } from '@shopify/polaris';
@@ -31,7 +31,7 @@ export function Default() {
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
     <div style={{padding: '0'}}>
-      <AlphaStack gap="4">
+      <VerticalStack gap="4">
         {files.map((file, index) => (
           <Inline gap="4" align="center" key={index}>
             <Thumbnail
@@ -52,7 +52,7 @@ export function Default() {
             </div>
           </Inline>
         ))}
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 
@@ -87,7 +87,7 @@ export function WithImageFileUpload() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -104,7 +104,7 @@ export function WithImageFileUpload() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const errorMessage = hasError && (
@@ -123,13 +123,13 @@ export function WithImageFileUpload() {
   );
 
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {errorMessage}
       <DropZone accept="image/*" type="image" onDrop={handleDrop}>
         {uploadedFiles}
         {fileUpload}
       </DropZone>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
@@ -186,7 +186,7 @@ export function WithDropOnPage() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -207,7 +207,7 @@ export function WithDropOnPage() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const uploadMessage = !uploadedFiles && <DropZone.FileUpload />;
@@ -248,7 +248,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -265,7 +265,7 @@ export function AcceptsOnlySVGFiles() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   const errorMessage = hasError && (
@@ -284,7 +284,7 @@ export function AcceptsOnlySVGFiles() {
   );
 
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {errorMessage}
       <DropZone
         accept="image/svg+xml"
@@ -294,7 +294,7 @@ export function AcceptsOnlySVGFiles() {
       >
         {uploadedFiles}
       </DropZone>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
@@ -311,7 +311,7 @@ export function Nested() {
 
   const fileUpload = !files.length && <DropZone.FileUpload />;
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -332,7 +332,7 @@ export function Nested() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
@@ -383,7 +383,7 @@ export function WithCustomFileUploadText() {
   );
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -404,7 +404,7 @@ export function WithCustomFileUploadText() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
@@ -432,7 +432,7 @@ export function WithCustomFileDialogTrigger() {
   const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
 
   const uploadedFiles = files.length > 0 && (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       {files.map((file, index) => (
         <Inline gap="4" align="center" key={index}>
           <Thumbnail
@@ -453,7 +453,7 @@ export function WithCustomFileDialogTrigger() {
           </div>
         </Inline>
       ))}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
diff --git a/polaris-react/src/components/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx
index ba4b8cd8c65..1a41e8325c3 100755
--- a/polaris-react/src/components/DropZone/DropZone.tsx
+++ b/polaris-react/src/components/DropZone/DropZone.tsx
@@ -14,7 +14,7 @@ import {isServer} from '../../utilities/target';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {useEventListener} from '../../utilities/use-event-listener';
 
 import {FileUpload} from './components';
@@ -368,14 +368,14 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   ) {
     return (
       <div className={styles.Overlay}>
-        <AlphaStack gap="2" inlineAlign="center">
+        <VerticalStack gap="2" inlineAlign="center">
           {size === 'small' && <Icon source={icon} color={color} />}
           {(size === 'medium' || size === 'large') && (
             <Text variant="bodySm" as="p" fontWeight="bold">
               {text}
             </Text>
           )}
-        </AlphaStack>
+        </VerticalStack>
       </div>
     );
   }
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
index e9553e6da96..310715ea530 100755
--- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
+++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.tsx
@@ -7,7 +7,7 @@ import {uploadArrow} from '../../images';
 import {DropZoneContext} from '../../context';
 import {useI18n} from '../../../../utilities/i18n';
 import {createAllowMultipleKey} from '../../utils';
-import {AlphaStack} from '../../../AlphaStack';
+import {VerticalStack} from '../../../VerticalStack';
 
 import styles from './FileUpload.scss';
 
@@ -55,18 +55,18 @@ export function FileUpload(props: FileUploadProps) {
   switch (size) {
     case 'large':
       viewMarkup = (
-        <AlphaStack inlineAlign="center" gap="2">
+        <VerticalStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </VerticalStack>
       );
       break;
     case 'medium':
       viewMarkup = (
-        <AlphaStack inlineAlign="center" gap="2">
+        <VerticalStack inlineAlign="center" gap="2">
           {actionMarkup}
           {actionHintMarkup}
-        </AlphaStack>
+        </VerticalStack>
       );
       break;
     case 'small':
diff --git a/polaris-react/src/components/EmptyState/EmptyState.tsx b/polaris-react/src/components/EmptyState/EmptyState.tsx
index ecde54bc02f..3f0d2b1ae68 100644
--- a/polaris-react/src/components/EmptyState/EmptyState.tsx
+++ b/polaris-react/src/components/EmptyState/EmptyState.tsx
@@ -7,7 +7,7 @@ import {Box} from '../Box';
 import {buttonFrom} from '../Button';
 import {Image} from '../Image';
 import {Text} from '../Text';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 import {Inline} from '../Inline';
 
 import styles from './EmptyState.scss';
@@ -124,11 +124,11 @@ export function EmptyState({
   const detailsMarkup =
     textContentMarkup || actionsMarkup || footerContentMarkup ? (
       <Box maxWidth={fullWidth ? '100%' : '400px'}>
-        <AlphaStack inlineAlign="center">
+        <VerticalStack inlineAlign="center">
           {textContentMarkup}
           {actionsMarkup}
           {footerContentMarkup}
-        </AlphaStack>
+        </VerticalStack>
       </Box>
     ) : null;
 
@@ -139,10 +139,10 @@ export function EmptyState({
       paddingBlockStart="5"
       paddingBlockEnd="16"
     >
-      <AlphaStack inlineAlign="center">
+      <VerticalStack inlineAlign="center">
         {imageMarkup}
         {detailsMarkup}
-      </AlphaStack>
+      </VerticalStack>
     </Box>
   );
 }
diff --git a/polaris-react/src/components/Grid/Grid.tsx b/polaris-react/src/components/Grid/Grid.tsx
index f51e65a0bc8..cdaaf2a9680 100644
--- a/polaris-react/src/components/Grid/Grid.tsx
+++ b/polaris-react/src/components/Grid/Grid.tsx
@@ -26,7 +26,6 @@ export interface GridProps {
   gap?: Gap;
   children?: React.ReactNode;
 }
-
 export const Grid: React.FunctionComponent<GridProps> & {
   Cell: typeof Cell;
 } = function Grid({gap, areas, children, columns}: GridProps) {
diff --git a/polaris-react/src/components/Grid/components/Cell/Cell.tsx b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
index 6910b7785fc..1ff467c595a 100644
--- a/polaris-react/src/components/Grid/components/Cell/Cell.tsx
+++ b/polaris-react/src/components/Grid/components/Cell/Cell.tsx
@@ -30,7 +30,6 @@ export interface CellProps {
   row?: Cell;
   children?: React.ReactNode;
 }
-
 export function Cell({
   area: gridArea,
   column,
diff --git a/polaris-react/src/components/Icon/Icon.stories.tsx b/polaris-react/src/components/Icon/Icon.stories.tsx
index 6c6bcf4822d..c82f2380d94 100644
--- a/polaris-react/src/components/Icon/Icon.stories.tsx
+++ b/polaris-react/src/components/Icon/Icon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {AlphaStack, Box, Icon} from '@shopify/polaris';
+import {VerticalStack, Box, Icon} from '@shopify/polaris';
 import type {BoxProps, IconProps} from '@shopify/polaris';
 import {CirclePlusMinor} from '@shopify/polaris-icons';
 
@@ -45,13 +45,13 @@ export function WithBackdrop() {
     </Box>
   );
   return (
-    <AlphaStack gap="1">
+    <VerticalStack gap="1">
       <BackdropIcon iconColor="base" boxBackground="bg-strong" />
       <BackdropIcon iconColor="highlight" boxBackground="bg-info" />
       <BackdropIcon iconColor="success" boxBackground="bg-success" />
       <BackdropIcon iconColor="warning" boxBackground="bg-warning" />
       <BackdropIcon iconColor="critical" boxBackground="bg-critical" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
index 99ee2a3a62d..e791cc97ade 100644
--- a/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
+++ b/polaris-react/src/components/SettingToggle/SettingToggle.stories.tsx
@@ -8,7 +8,7 @@ import {
   AlphaCard,
   Button,
   Badge,
-  AlphaStack,
+  VerticalStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -119,7 +119,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -128,22 +128,22 @@ export function WithPrimitiveComponents() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
@@ -228,7 +228,7 @@ export function WithPrimitiveComponentsAndLongTitle() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -237,22 +237,22 @@ export function WithPrimitiveComponentsAndLongTitle() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
diff --git a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
index e117128f925..d70a10a6a2d 100644
--- a/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
+++ b/polaris-react/src/components/SkeletonPage/SkeletonPage.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import {useI18n} from '../../utilities/i18n';
 import {Box} from '../Box';
 import {Inline} from '../Inline';
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 import styles from './SkeletonPage.scss';
 
@@ -70,7 +70,7 @@ export function SkeletonPage({
     ) : null;
 
   return (
-    <AlphaStack gap="4" inlineAlign="center">
+    <VerticalStack gap="4" inlineAlign="center">
       <Box
         width="100%"
         padding="0"
@@ -86,7 +86,7 @@ export function SkeletonPage({
           maxWidth: 'none',
         })}
       >
-        <AlphaStack>
+        <VerticalStack>
           <Box
             paddingBlockStart={{xs: '4', md: '5'}}
             paddingBlockEnd={{xs: '4', md: '5'}}
@@ -107,8 +107,8 @@ export function SkeletonPage({
           <Box paddingBlockEnd="2" width="100%">
             {children}
           </Box>
-        </AlphaStack>
+        </VerticalStack>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/Stack/Stack.tsx b/polaris-react/src/components/Stack/Stack.tsx
index 28374f296c5..23c743d92df 100644
--- a/polaris-react/src/components/Stack/Stack.tsx
+++ b/polaris-react/src/components/Stack/Stack.tsx
@@ -41,7 +41,7 @@ export interface StackProps {
   distribution?: Distribution;
 }
 
-/** @deprecated Use LegacyStack or AlphaStack instead. */
+/** @deprecated Use LegacyStack or VerticalStack instead. */
 export const Stack = memo(function Stack({
   children,
   vertical,
@@ -53,7 +53,7 @@ export const Stack = memo(function Stack({
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.warn(
-      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.',
+      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <VerticalStack /> instead.',
     );
   }
 
diff --git a/polaris-react/src/components/Stack/components/Item/Item.tsx b/polaris-react/src/components/Stack/components/Item/Item.tsx
index 360ab3967c0..85725a9a879 100644
--- a/polaris-react/src/components/Stack/components/Item/Item.tsx
+++ b/polaris-react/src/components/Stack/components/Item/Item.tsx
@@ -13,12 +13,12 @@ export interface ItemProps {
    */
 }
 
-/** @deprecated Use LegacyStack or AlphaStack instead. */
+/** @deprecated Use LegacyStack or VerticalStack instead. */
 export function Item({children, fill}: ItemProps) {
   if (process.env.NODE_ENV === 'development') {
     // eslint-disable-next-line no-console
     console.warn(
-      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <AlphaStack /> instead.',
+      'Deprecation: <Stack /> is deprecated. This component will be removed in a future major version of Polaris. Use <LegacyStack /> or <VerticalStack /> instead.',
     );
   }
 
diff --git a/polaris-react/src/components/TextContainer/TextContainer.tsx b/polaris-react/src/components/TextContainer/TextContainer.tsx
index c4a938912df..9ef6b4e0555 100644
--- a/polaris-react/src/components/TextContainer/TextContainer.tsx
+++ b/polaris-react/src/components/TextContainer/TextContainer.tsx
@@ -13,7 +13,7 @@ export interface TextContainerProps {
   children?: React.ReactNode;
 }
 
-/** @deprecated Use AlphaStack instead */
+/** @deprecated Use VerticalStack instead */
 export function TextContainer({spacing, children}: TextContainerProps) {
   const className = classNames(
     styles.TextContainer,
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.scss b/polaris-react/src/components/VerticalStack/VerticalStack.scss
similarity index 97%
rename from polaris-react/src/components/AlphaStack/AlphaStack.scss
rename to polaris-react/src/components/VerticalStack/VerticalStack.scss
index 91bbbc41757..507a0c57fae 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.scss
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.scss
@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-.AlphaStack {
+.VerticalStack {
   @include responsive-props('stack', 'gap', 'gap');
   // stylelint-disable -- Polaris component custom properties
   --pc-stack-align: initial;
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx b/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
similarity index 79%
rename from polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
rename to polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
index a18c12b482f..76ea43a473e 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, AlphaStack} from '@shopify/polaris';
+import {Box, VerticalStack} from '@shopify/polaris';
 
 export default {
-  component: AlphaStack,
-} as ComponentMeta<typeof AlphaStack>;
+  component: VerticalStack,
+} as ComponentMeta<typeof VerticalStack>;
 
 export function Default() {
   return (
-    <AlphaStack>
+    <VerticalStack>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -18,13 +18,13 @@ export function Default() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithGap() {
   return (
-    <AlphaStack gap="8">
+    <VerticalStack gap="8">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -34,13 +34,13 @@ export function WithGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithResponsiveGap() {
   return (
-    <AlphaStack gap={{xs: '4', md: '10'}}>
+    <VerticalStack gap={{xs: '4', md: '10'}}>
       <Box background="bg" padding="1">
         01
       </Box>
@@ -50,14 +50,14 @@ export function WithResponsiveGap() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithAlignStart() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="start">
+      <VerticalStack gap="4" align="start">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -67,7 +67,7 @@ export function WithAlignStart() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -75,7 +75,7 @@ export function WithAlignStart() {
 export function WithAlignCenter() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="center">
+      <VerticalStack gap="4" align="center">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -85,7 +85,7 @@ export function WithAlignCenter() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -93,7 +93,7 @@ export function WithAlignCenter() {
 export function WithAlignEnd() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="end">
+      <VerticalStack gap="4" align="end">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -103,7 +103,7 @@ export function WithAlignEnd() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -111,7 +111,7 @@ export function WithAlignEnd() {
 export function WithAlignSpaceAround() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-around">
+      <VerticalStack gap="4" align="space-around">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -121,7 +121,7 @@ export function WithAlignSpaceAround() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -129,7 +129,7 @@ export function WithAlignSpaceAround() {
 export function WithAlignSpaceBetween() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-between">
+      <VerticalStack gap="4" align="space-between">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -139,7 +139,7 @@ export function WithAlignSpaceBetween() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
@@ -147,7 +147,7 @@ export function WithAlignSpaceBetween() {
 export function WithAlignSpaceEvenly() {
   return (
     <div style={{display: 'flex', height: '250px'}}>
-      <AlphaStack gap="4" align="space-evenly">
+      <VerticalStack gap="4" align="space-evenly">
         <Box background="bg" padding="1">
           01
         </Box>
@@ -157,14 +157,14 @@ export function WithAlignSpaceEvenly() {
         <Box background="bg" padding="1">
           03
         </Box>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }
 
 export function WithInlineAlignStart() {
   return (
-    <AlphaStack gap="4" inlineAlign="start">
+    <VerticalStack gap="4" inlineAlign="start">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -174,13 +174,13 @@ export function WithInlineAlignStart() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithInlineAlignCenter() {
   return (
-    <AlphaStack gap="4" inlineAlign="center">
+    <VerticalStack gap="4" inlineAlign="center">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -190,13 +190,13 @@ export function WithInlineAlignCenter() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
 export function WithInlineAlignEnd() {
   return (
-    <AlphaStack gap="4" inlineAlign="end">
+    <VerticalStack gap="4" inlineAlign="end">
       <Box background="bg" padding="1">
         01
       </Box>
@@ -206,6 +206,6 @@ export function WithInlineAlignEnd() {
       <Box background="bg" padding="1">
         03
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/VerticalStack/VerticalStack.tsx
similarity index 89%
rename from polaris-react/src/components/AlphaStack/AlphaStack.tsx
rename to polaris-react/src/components/VerticalStack/VerticalStack.tsx
index 0439f6e1c34..e2bd5f424eb 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/VerticalStack/VerticalStack.tsx
@@ -8,7 +8,7 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveProp} from '../../utilities/css';
 
-import styles from './AlphaStack.scss';
+import styles from './VerticalStack.scss';
 
 type Align =
   | 'start'
@@ -24,7 +24,7 @@ type Element = 'div' | 'ul' | 'ol' | 'fieldset';
 
 type Gap = ResponsiveProp<SpacingSpaceScale>;
 
-export interface AlphaStackProps extends React.AriaAttributes {
+export interface VerticalStackProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** HTML Element type
    * @default 'div'
@@ -44,7 +44,7 @@ export interface AlphaStackProps extends React.AriaAttributes {
   reverseOrder?: boolean;
 }
 
-export const AlphaStack = ({
+export const VerticalStack = ({
   as = 'div',
   children,
   align,
@@ -53,9 +53,9 @@ export const AlphaStack = ({
   id,
   reverseOrder = false,
   ...restProps
-}: AlphaStackProps) => {
+}: VerticalStackProps) => {
   const className = classNames(
-    styles.AlphaStack,
+    styles.VerticalStack,
     (as === 'ul' || as === 'ol') && styles.listReset,
     as === 'fieldset' && styles.fieldsetReset,
   );
diff --git a/polaris-react/src/components/VerticalStack/index.ts b/polaris-react/src/components/VerticalStack/index.ts
new file mode 100644
index 00000000000..70179f40186
--- /dev/null
+++ b/polaris-react/src/components/VerticalStack/index.ts
@@ -0,0 +1 @@
+export * from './VerticalStack';
diff --git a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx b/polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
similarity index 75%
rename from polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
rename to polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
index c8347e5028c..145fee59041 100644
--- a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
+++ b/polaris-react/src/components/VerticalStack/tests/VerticalStack.tsx
@@ -1,20 +1,20 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {AlphaStack} from '../AlphaStack';
+import {VerticalStack} from '../VerticalStack';
 
 const text = 'This is a stack';
 const children = <p>{text}</p>;
 
-describe('<AlphaStack />', () => {
+describe('<VerticalStack />', () => {
   it('renders children', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
 
     expect(stack).toContainReactComponent('p', {children: text});
   });
 
   it('renders custom properties by default', () => {
-    const stack = mountWithApp(<AlphaStack>{children}</AlphaStack>);
+    const stack = mountWithApp(<VerticalStack>{children}</VerticalStack>);
 
     expect(stack).toContainReactComponent('div', {
       style: expect.objectContaining({
@@ -25,9 +25,9 @@ describe('<AlphaStack />', () => {
 
   it('overrides custom properties if they are passed in', () => {
     const stack = mountWithApp(
-      <AlphaStack inlineAlign="center" gap="10">
+      <VerticalStack inlineAlign="center" gap="10">
         {children}
-      </AlphaStack>,
+      </VerticalStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
@@ -40,7 +40,7 @@ describe('<AlphaStack />', () => {
 
   it('accepts gap based on breakpoints', () => {
     const stack = mountWithApp(
-      <AlphaStack gap={{xs: '2', md: '8'}}>{children}</AlphaStack>,
+      <VerticalStack gap={{xs: '2', md: '8'}}>{children}</VerticalStack>,
     );
 
     expect(stack).toContainReactComponent('div', {
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index 135f26a4023..c943c005c1d 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -54,8 +54,8 @@ export type {AlphaCardProps} from './components/AlphaCard';
 export {AlphaFilters} from './components/AlphaFilters';
 export type {AlphaFiltersProps} from './components/AlphaFilters';
 
-export {AlphaStack} from './components/AlphaStack';
-export type {AlphaStackProps} from './components/AlphaStack';
+export {VerticalStack} from './components/VerticalStack';
+export type {VerticalStackProps} from './components/VerticalStack';
 
 export {AlphaTabs} from './components/AlphaTabs';
 export type {AlphaTabsProps, AlphaTabProps} from './components/AlphaTabs';
diff --git a/polaris.shopify.com/content/components/deprecated/text-container.md b/polaris.shopify.com/content/components/deprecated/text-container.md
index 51235b3f528..d65af769123 100644
--- a/polaris.shopify.com/content/components/deprecated/text-container.md
+++ b/polaris.shopify.com/content/components/deprecated/text-container.md
@@ -13,7 +13,7 @@ keywords:
   - padding
 status:
   value: Deprecated
-  message: The TextContainer is a simple layout component which was made redundant by the AlphaStack component. Use AlphaStack with `gap` values of 2, 4, and 5 to replicate layouts.
+  message: The TextContainer is a simple layout component which was made redundant by the VerticalStack component. Use VerticalStack with `gap` values of 2, 4, and 5 to replicate layouts.
 examples:
   - fileName: text-container-default.tsx
     title: Default
@@ -37,4 +37,4 @@ The closer the spacing, the closer the relationship between content topics. The
 
 ## Related components
 
-- For more layout variations, or if you’re looking to vertically space components other than text, use [Stack](https://polaris.shopify.com/components/layout-and-structure/alpha-stack).
+- For more layout variations, or if you’re looking to vertically space components other than text, use [Stack](https://polaris.shopify.com/components/layout-and-structure/vertical-stack).
diff --git a/polaris.shopify.com/content/components/layout-and-structure/grid.md b/polaris.shopify.com/content/components/layout-and-structure/grid.md
index 83384df4c4e..3eeb41ed1b4 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/grid.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/grid.md
@@ -33,5 +33,5 @@ examples:
 
 ## Related components
 
-- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack)
+- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack)
 - To lay out form fields, [use the form layout component](https://polaris.shopify.com/components/form-layout)
diff --git a/polaris.shopify.com/content/components/layout-and-structure/inline.md b/polaris.shopify.com/content/components/layout-and-structure/inline.md
index 858dff6a27f..78b19e0444e 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/inline.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/inline.md
@@ -39,7 +39,7 @@ examples:
 ## Related components
 
 - To create the large-scale structure of pages, [use the Columns component](https://polaris.shopify.com/components/layout-and-structure/columns)
-- To display elements vertically, [use the AlphaStack component](https://polaris.shopify.com/components/alphastack)
+- To display elements vertically, [use the VerticalStack component](https://polaris.shopify.com/components/vertical-stack)
 
 ## Related resources
 
diff --git a/polaris.shopify.com/content/components/layout-and-structure/layout.md b/polaris.shopify.com/content/components/layout-and-structure/layout.md
index cd76f39bc4b..ecda59e74ae 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/layout.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/layout.md
@@ -81,5 +81,5 @@ Annotated section descriptions should:
 ## Related components
 
 - To visually group content in a layout section, [use the card component](https://polaris.shopify.com/components/layout-and-structure/alpha-card)
-- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack)
+- To lay out a set of smaller components in a row, [use the stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack)
 - To lay out form fields, [use the form layout component](https://polaris.shopify.com/components/form-layout)
diff --git a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
index e521cff787d..6763bd4671b 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/legacy-stack.md
@@ -20,7 +20,7 @@ keywords:
   - legacy stack
 status:
   value: Legacy
-  message: This is a legacy component and will be deprecated. The new [AlphaStack component](/components/layout-and-structure/alpha-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
+  message: This is a legacy component and will be deprecated. The new [VerticalStack component](/components/layout-and-structure/vertical-stack) can be used in combination with the new layout primitives to achieve similar results to LegacyStack. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
   - fileName: legacy-stack-default.tsx
     title: Default
diff --git a/polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
similarity index 74%
rename from polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
rename to polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
index 2f0040fb971..4c483902f2f 100644
--- a/polaris.shopify.com/content/components/layout-and-structure/alpha-stack.md
+++ b/polaris.shopify.com/content/components/layout-and-structure/vertical-stack.md
@@ -1,5 +1,5 @@
 ---
-title: Alpha stack
+title: Vertical stack
 description: Use to display children vertically and horizontally with full width by default. Based on CSS Flexbox.
 category: Layout and structure
 keywords:
@@ -15,15 +15,15 @@ status:
   value: Alpha
   message: This component is a work in progress and ready for exploratory usage, with breaking changes expected in minor version updates. Please use with caution. Learn more about our [component lifecycles](/getting-started/components-lifecycle).
 examples:
-  - fileName: alpha-stack-with-gap.tsx
+  - fileName: vertical-stack-with-gap.tsx
     title: Gap
     description: >-
       Control the vertical space between children using the `gap` prop.
-  - fileName: alpha-stack-with-align.tsx
+  - fileName: vertical-stack-with-align.tsx
     title: Align
     description: >-
       Control the vertical alignment of children using the `align` prop.
-  - fileName: alpha-stack-with-inline-align.tsx
+  - fileName: vertical-stack-with-inline-align.tsx
     title: Inline align
     description: >-
       Control the horizontal alignment of children using the `inlineAlign` prop.
@@ -44,4 +44,4 @@ Stacks should:
 
 ## Related resources
 
-- AlphaStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
+- VerticalStack props are named following the convention of CSS logical properties, such as 'padding-inline-start' and 'padding-block-start'. Learn more about [CSS logicial properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
diff --git a/polaris.shopify.com/content/components/lists/list.md b/polaris.shopify.com/content/components/lists/list.md
index 5cfacabf5ba..f3398e4cd44 100644
--- a/polaris.shopify.com/content/components/lists/list.md
+++ b/polaris.shopify.com/content/components/lists/list.md
@@ -88,4 +88,4 @@ Every item in a list should:
 
 The list component outputs list items (`<li>`) inside a list wrapper (`<ul>` for bullet lists or `<ol>` for numbered lists). By default, list items are conveyed as a group of related elements to assistive technology users.
 
-To group items for layout only, consider using the [stack component](https://polaris.shopify.com/components/layout-and-structure/alpha-stack).
+To group items for layout only, consider using the [stack component](https://polaris.shopify.com/components/layout-and-structure/vertical-stack).
diff --git a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
index 3b5df623888..2565d54f343 100644
--- a/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/app-settings-layout/variants/default.md
@@ -24,7 +24,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`AlphaCard`](/components/layout-and-structure/alpha-card), [`Columns`](/components/layout-and-structure/columns) and [`Box`](/components/layout-and-structure/box) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -48,27 +48,27 @@ function AppSettingsLayoutExample() {
         },
       ]}
     >
-      <AlphaStack gap={{xs: '8', sm: '4'}}>
+      <VerticalStack gap={{xs: '8', sm: '4'}}>
         <Columns columns={{xs: '1fr', md: '2fr 5fr'}} gap="4">
           <Box
             as="section"
             paddingInlineStart={{xs: 4, sm: 0}}
             paddingInlineEnd={{xs: 4, sm: 0}}
           >
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Text as="h3" variant="headingMd">
                 InterJambs
               </Text>
               <Text as="p" variant="bodyMd">
                 Interjambs are the rounded protruding bits of your puzzlie piece
               </Text>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <TextField label="Interjamb style" />
               <TextField label="Interjamb ratio" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
         </Columns>
         {smUp ? <Divider /> : null}
@@ -78,23 +78,23 @@ function AppSettingsLayoutExample() {
             paddingInlineStart={{xs: 4, sm: 0}}
             paddingInlineEnd={{xs: 4, sm: 0}}
           >
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Text as="h3" variant="headingMd">
                 Dimensions
               </Text>
               <Text as="p" variant="bodyMd">
                 Interjambs are the rounded protruding bits of your puzzlie piece
               </Text>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <TextField label="Horizontal" />
               <TextField label="Interjamb ratio" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
         </Columns>
-      </AlphaStack>
+      </VerticalStack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
index e463622c57e..4f91c57ba09 100644
--- a/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
+++ b/polaris.shopify.com/content/patterns/date-picking/variants/date-range.md
@@ -32,7 +32,7 @@ This enables merchants to select a date range.
 
 ## Using this pattern
 
-This pattern uses the [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
+This pattern uses the [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Box`](/components/layout-and-structure/box), [`Button`](/components/actions/button), [`Columns`](/components/layout-and-structure/columns), [`DatePicker`](/components/selection-and-input/date-picker), [`Inline`](/components/layout-and-structure/inline), [`OptionList`](/components/lists/option-list), [`Popover`](/components/overlays/popover) and [`TextField`](/components/selection-and-input/text-field) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -323,7 +323,7 @@ function DateRangePicker() {
             )}
           </Box>
           <Box padding={{xs: 5}} maxWidth={mdDown ? '320px' : '516px'}>
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <Inline gap="2">
                 <div style={{flexGrow: 1}}>
                   <TextField
@@ -365,7 +365,7 @@ function DateRangePicker() {
                   allowRange
                 />
               </div>
-            </AlphaStack>
+            </VerticalStack>
           </Box>
         </Columns>
       </Popover.Pane>
diff --git a/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md b/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
index deb1d3060d3..d6e0d1cb04c 100644
--- a/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
+++ b/polaris.shopify.com/content/patterns/date-picking/variants/single-date.md
@@ -93,7 +93,7 @@ function DatePickerExample() {
     }
   }, [selectedDate]);
   return (
-    <AlphaStack inlineAlign="center" gap="4">
+    <VerticalStack inlineAlign="center" gap="4">
       <Box minWidth="276px" padding={{xs: 2}}>
         <Popover
           active={visible}
@@ -127,7 +127,7 @@ function DatePickerExample() {
           </AlphaCard>
         </Popover>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 ```
diff --git a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
index 0cc79e6f02e..c82865052ca 100644
--- a/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
+++ b/polaris.shopify.com/content/patterns/resource-details-layout/variants/default.md
@@ -28,7 +28,7 @@ hideFromNav: true
 
 ## Using this pattern
 
-This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`AlphaStack`](/components/layout-and-structure/alpha-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
+This pattern uses the [`AlphaCard`](/components/layout-and-structure/alpha-card), [`VerticalStack`](/components/layout-and-structure/vertical-stack), [`Columns`](/components/layout-and-structure/columns) and [`Page`](/components/layout-and-structure/page) components.
 
 <!-- prettier-ignore -->
 ```javascript {"type":"previewContext","for":"example"}
@@ -86,28 +86,28 @@ function ResourceDetailsLayout() {
       }}
     >
       <Columns columns={{xs: 1, md: '2fr 1fr'}} gap="4">
-        <AlphaStack gap="4">
+        <VerticalStack gap="4">
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="8rem" />
               <Box border="divider" borderRadius="base" minHeight="20rem" />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonDisplayText size="small" />
               <Columns columns={{xs: 1, md: 2}}>
                 <Box border="divider" borderRadius="base" minHeight="10rem" />
                 <Box border="divider" borderRadius="base" minHeight="10rem" />
               </Columns>
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
-        </AlphaStack>
-        <AlphaStack gap={{xs: '4', md: '2'}}>
+        </VerticalStack>
+        <VerticalStack gap={{xs: '4', md: '2'}}>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonDisplayText size="small" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <Box>
@@ -118,19 +118,19 @@ function ResourceDetailsLayout() {
               <SkeletonLabel />
               <Divider />
               <SkeletonBodyText />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
           <AlphaCard roundedAbove="sm">
-            <AlphaStack gap="4">
+            <VerticalStack gap="4">
               <SkeletonLabel />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel maxWidth="4rem" />
               <Box border="divider" borderRadius="base" minHeight="2rem" />
               <SkeletonLabel />
               <SkeletonBodyText />
-            </AlphaStack>
+            </VerticalStack>
           </AlphaCard>
-        </AlphaStack>
+        </VerticalStack>
       </Columns>
     </Page>
   );
diff --git a/polaris.shopify.com/content/patterns/variant.md.template b/polaris.shopify.com/content/patterns/variant.md.template
index 3c1749732c3..39f94544a7a 100644
--- a/polaris.shopify.com/content/patterns/variant.md.template
+++ b/polaris.shopify.com/content/patterns/variant.md.template
@@ -55,7 +55,7 @@ This pattern uses the <!-- [`Box`](/components/box), ... etc --> components.
 <!-- prettier-ignore -->
 ```javascript {"type":"livePreview","id":"example"}
 <Page divider>
-  <AlphaStack gap="16">Coming Soon</AlphaStack>
+  <VerticalStack gap="16">Coming Soon</VerticalStack>
 </Page>
 ```
 
diff --git a/polaris.shopify.com/next.config.js b/polaris.shopify.com/next.config.js
index 734c2a10485..7a8e5215404 100644
--- a/polaris.shopify.com/next.config.js
+++ b/polaris.shopify.com/next.config.js
@@ -341,8 +341,8 @@ const layoutAndStructure = [
     permanent: false,
   },
   {
-    source: '/components/alpha-stack',
-    destination: '/components/layout-and-structure/alpha-stack',
+    source: '/components/vertical-stack',
+    destination: '/components/layout-and-structure/vertical-stack',
     permanent: false,
   },
   {
@@ -442,7 +442,7 @@ const layoutAndStructure = [
   },
   {
     source: '/components/layout-and-structure/stack',
-    destination: '/components/layout-and-structure/alpha-stack',
+    destination: '/components/layout-and-structure/vertical-stack',
     permanent: false,
   },
 ];
diff --git a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
index 29c429b36c5..646d221df08 100644
--- a/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
+++ b/polaris.shopify.com/pages/examples/alpha-card-with-varying-padding.tsx
@@ -1,10 +1,10 @@
-import {AlphaCard, Text, AlphaStack} from '@shopify/polaris';
+import {AlphaCard, Text, VerticalStack} from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function AlphaCardExample() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <AlphaCard>
         <Placeholder label="Content inside a card" />
       </AlphaCard>
@@ -17,7 +17,7 @@ function AlphaCardExample() {
       <AlphaCard padding="0">
         <Placeholder label="Content inside a card" />
       </AlphaCard>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
index e4aefaed78c..832e1ac3dab 100644
--- a/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
+++ b/polaris.shopify.com/pages/examples/bleed-specific-direction.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
+import {VerticalStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BleedSpecificDirectionExample() {
   return (
-    <AlphaStack gap="6">
+    <VerticalStack gap="6">
       <Box background="bg" border="base" padding="8">
         <Bleed marginInlineStart="8">
           <Placeholder label="marginInlineStart" />
@@ -26,7 +26,7 @@ function BleedSpecificDirectionExample() {
           <Placeholder label="marginBlockEnd" />
         </Bleed>
       </Box>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/box-with-padding.tsx b/polaris.shopify.com/pages/examples/box-with-padding.tsx
index c8cb86979d6..1be15233ec2 100644
--- a/polaris.shopify.com/pages/examples/box-with-padding.tsx
+++ b/polaris.shopify.com/pages/examples/box-with-padding.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {AlphaStack, Box, Text, Inline} from '@shopify/polaris';
+import {VerticalStack, Box, Text, Inline} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function BoxWithPaddingExample() {
   return (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <div
         style={{
           backgroundColor: 'var(--p-color-bg-info-strong)',
@@ -40,7 +40,7 @@ function BoxWithPaddingExample() {
           </Box>
         </div>
       </Inline>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
index f54419b8928..dfa662c37e1 100644
--- a/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
+++ b/polaris.shopify.com/pages/examples/divider-with-border-color.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Divider, Text, AlphaStack} from '@shopify/polaris';
+import {Divider, Text, VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function DividerWithBorderColorExample() {
   return (
-    <AlphaStack gap="5">
+    <VerticalStack gap="5">
       <Text as="h1" variant="headingXs">
         Default
       </Text>
@@ -22,7 +22,7 @@ function DividerWithBorderColorExample() {
         Transparent
       </Text>
       <Divider borderColor="transparent" />
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
index 4f76980f4b7..b985beb26ef 100644
--- a/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-condensed-with-views-search-filter-sorting.tsx
@@ -9,7 +9,7 @@ import {
   ChoiceList,
   RangeSlider,
   Badge,
-  AlphaStack,
+  VerticalStack,
   Inline,
 } from '@shopify/polaris';
 import type {IndexFiltersProps, AlphaTabProps} from '@shopify/polaris';
@@ -310,7 +310,7 @@ function IndexTableWithViewsSearchFilterSorting() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <AlphaStack gap="1">
+          <VerticalStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -326,7 +326,7 @@ function IndexTableWithViewsSearchFilterSorting() {
               {paymentStatus}
               {fulfillmentStatus}
             </Inline>
-          </AlphaStack>
+          </VerticalStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
index 2f3d6991b01..1cbd2e6aaeb 100644
--- a/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
+++ b/polaris.shopify.com/pages/examples/index-table-small-screen.tsx
@@ -5,7 +5,7 @@ import {
   Text,
   Inline,
   Badge,
-  AlphaStack,
+  VerticalStack,
 } from '@shopify/polaris';
 import React from 'react';
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
@@ -60,7 +60,7 @@ function SimpleSmallScreenIndexTableExample() {
         position={index}
       >
         <div style={{padding: '12px 16px', width: '100%'}}>
-          <AlphaStack gap="1">
+          <VerticalStack gap="1">
             <Text as="span" variant="bodySm" color="subdued">
               {order} • {date}
             </Text>
@@ -76,7 +76,7 @@ function SimpleSmallScreenIndexTableExample() {
               {paymentStatus}
               {fulfillmentStatus}
             </Inline>
-          </AlphaStack>
+          </VerticalStack>
         </div>
       </IndexTable.Row>
     ),
diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx
index dc2a7cde6b6..95bed782d37 100644
--- a/polaris.shopify.com/pages/examples/inline-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-align.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
-import {AlphaStack, Inline, Text, Page, Divider} from '@shopify/polaris';
+import {VerticalStack, Inline, Text, Page, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithAlignExample() {
   return (
     <Page narrowWidth>
-      <AlphaStack gap="16">
+      <VerticalStack gap="16">
         <Inline align="start">
           <Placeholder width="106px" label="Start" />
           <Placeholder width="106px" height="20px" showBorder />
@@ -36,7 +36,7 @@ function InlineWithAlignExample() {
           <Placeholder width="106px" height="20px" />
           <Placeholder width="106px" height="20px" showBorder />
         </Inline>
-      </AlphaStack>
+      </VerticalStack>
     </Page>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/inline-with-block-align.tsx b/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
index 5a9c92b0252..6624df5a228 100644
--- a/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-block-align.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Inline, Text, AlphaStack, Divider} from '@shopify/polaris';
+import {Inline, Text, VerticalStack, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithBlockAlignExample() {
   return (
-    <AlphaStack gap="8">
+    <VerticalStack gap="8">
       <Inline blockAlign="start">
         <Placeholder width="106px" label="Start" />
         <Placeholder width="106px" height="20px" showBorder />
@@ -50,7 +50,7 @@ function InlineWithBlockAlignExample() {
         <Placeholder width="106px" minHeight="20px" showBorder />
         <Placeholder width="106px" minHeight="20px" showBorder />
       </Inline>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/inline-with-gap.tsx b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
index a2dc8ea14de..a31e4b9ada8 100644
--- a/polaris.shopify.com/pages/examples/inline-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/inline-with-gap.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import {Inline, AlphaStack} from '@shopify/polaris';
+import {Inline, VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function InlineWithGapExample() {
   return (
-    <AlphaStack>
+    <VerticalStack>
       <Inline>
         <SpacingBackground width="436px" height="20px" margin>
           <Inline gap="4" wrap={false} blockAlign="center">
@@ -22,7 +22,7 @@ function InlineWithGapExample() {
           <Placeholder width="106px" height="20px" />
         </Inline>
       </SpacingBackground>
-    </AlphaStack>
+    </VerticalStack>
   );
 }
 
diff --git a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
index e1a6152b9c7..c2f84348be3 100644
--- a/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
+++ b/polaris.shopify.com/pages/examples/setting-toggle-with-primitive-components.tsx
@@ -5,7 +5,7 @@ import {
   AlphaCard,
   Button,
   Badge,
-  AlphaStack,
+  VerticalStack,
   useBreakpoints,
 } from '@shopify/polaris';
 import {CircleInformationMajor} from '@shopify/polaris-icons';
@@ -91,7 +91,7 @@ export function WithPrimitiveComponents() {
   );
 
   const descriptionMarkup = (
-    <AlphaStack gap="4">
+    <VerticalStack gap="4">
       <Text id={descriptionId} variant="bodyMd" as="p" color="subdued">
         {description}
       </Text>
@@ -100,22 +100,22 @@ export function WithPrimitiveComponents() {
           <Inline align="start">{actionMarkup}</Inline>
         </Box>
       ) : null}
-    </AlphaStack>
+    </VerticalStack>
   );
 
   return (
     <AlphaCard>
-      <AlphaStack gap={{xs: '4', sm: '5'}}>
+      <VerticalStack gap={{xs: '4', sm: '5'}}>
         <Box width="100%">
-          <AlphaStack gap={{xs: '2', sm: '4'}}>
+          <VerticalStack gap={{xs: '2', sm: '4'}}>
             {headerMarkup}
             {descriptionMarkup}
-          </AlphaStack>
+          </VerticalStack>
         </Box>
         <Text variant="bodyMd" as="p">
           Your checkout is only accepting test payments.
         </Text>
-      </AlphaStack>
+      </VerticalStack>
     </AlphaCard>
   );
 }
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
similarity index 82%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
index cceacca8dd4..7df3a9a4a81 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-align.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-stack-with-align.tsx
@@ -1,34 +1,34 @@
 import React from 'react';
-import {AlphaStack, Inline, Text, Divider} from '@shopify/polaris';
+import {VerticalStack, Inline, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithAlignExample() {
+function VerticalStackWithAlignExample() {
   return (
     <>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="start">
+        <VerticalStack align="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="center">
+        <VerticalStack align="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
       <div style={{display: 'flex', height: '200px'}}>
-        <AlphaStack align="end">
+        <VerticalStack align="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
       </div>
       <Divider />
     </>
@@ -68,4 +68,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithAlignExample);
+export default withPolarisExample(VerticalStackWithAlignExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
similarity index 78%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
index 2bb44a8c807..27a94f96731 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-gap.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-stack-with-gap.tsx
@@ -1,16 +1,16 @@
 import React from 'react';
-import {AlphaStack} from '@shopify/polaris';
+import {VerticalStack} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithGapExample() {
+function VerticalStackWithGapExample() {
   return (
     <SpacingBackground>
-      <AlphaStack gap="5">
+      <VerticalStack gap="5">
         <Placeholder height="48px" />
         <Placeholder height="48px" />
         <Placeholder height="48px" />
-      </AlphaStack>
+      </VerticalStack>
     </SpacingBackground>
   );
 }
@@ -40,4 +40,4 @@ const Placeholder = ({height = 'auto'}) => {
   );
 };
 
-export default withPolarisExample(AlphaStackWithGapExample);
+export default withPolarisExample(VerticalStackWithGapExample);
diff --git a/polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx b/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
similarity index 76%
rename from polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx
rename to polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
index cd4e1d6f517..1afb2022df6 100644
--- a/polaris.shopify.com/pages/examples/alpha-stack-with-inline-align.tsx
+++ b/polaris.shopify.com/pages/examples/vertical-stack-with-inline-align.tsx
@@ -1,30 +1,30 @@
 import React from 'react';
-import {AlphaStack, Page, Inline, Text, Divider} from '@shopify/polaris';
+import {VerticalStack, Page, Inline, Text, Divider} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
-function AlphaStackWithInlineAlignExample() {
+function VerticalStackWithInlineAlignExample() {
   return (
     <Page>
-      <AlphaStack gap="8">
-        <AlphaStack inlineAlign="start">
+      <VerticalStack gap="8">
+        <VerticalStack inlineAlign="start">
           <Placeholder height="48px" width="320px" label="Start" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
         <Divider />
-        <AlphaStack inlineAlign="center">
+        <VerticalStack inlineAlign="center">
           <Placeholder height="48px" width="320px" label="Center" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
+        </VerticalStack>
         <Divider />
-        <AlphaStack inlineAlign="end">
+        <VerticalStack inlineAlign="end">
           <Placeholder height="48px" width="320px" label="End" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
           <Placeholder height="48px" width="320px" showBorder />
-        </AlphaStack>
-      </AlphaStack>
+        </VerticalStack>
+      </VerticalStack>
     </Page>
   );
 }
@@ -62,4 +62,4 @@ const Placeholder = ({
   );
 };
 
-export default withPolarisExample(AlphaStackWithInlineAlignExample);
+export default withPolarisExample(VerticalStackWithInlineAlignExample);
diff --git a/polaris.shopify.com/public/images/components/layout-and-structure/alpha-stack.png b/polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png
similarity index 100%
rename from polaris.shopify.com/public/images/components/layout-and-structure/alpha-stack.png
rename to polaris.shopify.com/public/images/components/layout-and-structure/vertical-stack.png
diff --git a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
index 4738ab7f729..5112a3fcae2 100644
--- a/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
+++ b/polaris.shopify.com/src/components/TipBanner/TipBanner.tsx
@@ -1,4 +1,4 @@
-import {AlphaStack, Icon, Inline, Text} from '@shopify/polaris';
+import {VerticalStack, Icon, Inline, Text} from '@shopify/polaris';
 import {InfoMinor} from '@shopify/polaris-icons';
 import styles from './TipBanner.module.scss';
 
@@ -10,7 +10,7 @@ interface Props {
 function TipBanner({title, message}: Props) {
   return (
     <div className={styles.TipBanner}>
-      <AlphaStack gap="2">
+      <VerticalStack gap="2">
         <Inline gap="2">
           <div>
             <Icon source={InfoMinor} color="highlight" />
@@ -20,7 +20,7 @@ function TipBanner({title, message}: Props) {
           </Text>
         </Inline>
         <p>{message}</p>
-      </AlphaStack>
+      </VerticalStack>
     </div>
   );
 }