diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
index 97b8a2b522a6..21c7e1d7eef1 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.stories.js
@@ -72,3 +72,64 @@ export const Interactive = () => (
 );
 
 export const Skeleton = () => <ProgressIndicatorSkeleton />;
+
+export const Playground = (args) => (
+  <ProgressIndicator {...args}>
+    <ProgressStep
+      complete
+      label="First step"
+      description="Step 1: Getting started with Carbon Design System"
+      secondaryLabel="Optional label"
+    />
+    <ProgressStep
+      current
+      label="Second step with tooltip"
+      description="Step 2: Getting started with Carbon Design System"
+    />
+    <ProgressStep
+      label="Third step with tooltip"
+      description="Step 3: Getting started with Carbon Design System"
+    />
+    <ProgressStep
+      label="Fourth step"
+      description="Step 4: Getting started with Carbon Design System"
+      invalid
+      secondaryLabel="Example invalid step"
+    />
+    <ProgressStep
+      label="Fifth step"
+      description="Step 5: Getting started with Carbon Design System"
+      disabled
+    />
+  </ProgressIndicator>
+);
+
+Playground.argTypes = {
+  children: {
+    table: {
+      disable: true,
+    },
+  },
+  className: {
+    table: {
+      disable: true,
+    },
+  },
+  onChange: {
+    table: {
+      disable: true,
+    },
+  },
+  currentIndex: {
+    control: { type: 'number' },
+    defaultValue: 0,
+  },
+  spaceEqually: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+  },
+  vertical: {
+    control: { type: 'boolean' },
+    defaultValue: false,
+  },
+};