diff --git a/packages/react-core/src/components/Progress/examples/Progress.md b/packages/react-core/src/components/Progress/examples/Progress.md
index d8823835d22..34ecd6c5bdd 100644
--- a/packages/react-core/src/components/Progress/examples/Progress.md
+++ b/packages/react-core/src/components/Progress/examples/Progress.md
@@ -7,169 +7,70 @@ propComponents: ['Progress']
 
 ## Examples
 ### Basic
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" />
+```ts file="./ProgressBasic.tsx"
 ```
 
 ### Small
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" size={ProgressSize.sm} />
+```ts file="./ProgressSmall.tsx"
 ```
 
 ### Large
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" size={ProgressSize.lg} />
+```ts file="./ProgressLarge.tsx"
 ```
 
 ### Outside
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.outside} />
+```ts file="./ProgressOutside.tsx"
 ```
 
 ### Inside
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.inside} />
+```ts file="./ProgressInside.tsx"
 ```
 
 ### Success
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={100} title="Title" variant={ProgressVariant.success} />
+```ts file="./ProgressSuccess.tsx"
 ```
 
 ### Failure
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" variant={ProgressVariant.danger} />
+```ts file="./ProgressFailure.tsx"
 ```
 
 ### Warning
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={90} title="Title" variant={ProgressVariant.warning} />
+```ts file="./ProgressWarning.tsx"
 ```
 
 ### Inside success
-```ts
-import React from 'react';
-import { Progress, ProgressSize, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={100}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.inside}
-  variant={ProgressVariant.success}
-/>
+```ts file="./ProgressInsideSuccess.tsx"
 ```
 
 ### Outside failure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={33}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.outside}
-  variant={ProgressVariant.danger}
-/>
+```ts file="./ProgressOutsideFailure.tsx"
 ```
 
 ### Single line
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-label="Title"/>
+```ts file="./ProgressSingleLine.tsx"
 ```
 
 ### Without measure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
-
-<Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} />
+```ts file="./ProgressWithoutMeasure.tsx"
 ```
 
 ### Failure without measure
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-<Progress
-  value={33}
-  title="Title"
-  measureLocation={ProgressMeasureLocation.none}
-  variant={ProgressVariant.danger}
-/>
+```ts file="./ProgressFailureWithoutMeasure.tsx"
 ```
 
 
 ### Finite step
-```ts
-import React from 'react';
-import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
-
-<Progress value={2} min={0} max={5} title="Title" measureLocation={ProgressMeasureLocation.top} label="2 of 5" valueText="2 of 5"/>
+```ts file="./ProgressFiniteStep.tsx"
 ```
 
-### Progress (step instruction)
-```ts
-import React from 'react';
-import { Progress} from '@patternfly/react-core';
-
-<Progress value={2} title="Title" min={0} max={5} label="Step 2: Copying files" valueText="Step 2: Copying files" />
+### Progress with step instructions
+```ts file="./ProgressStepInstruction.tsx"
 ```
 
 ### Truncate title
-```ts
-import React from 'react';
-import { Progress } from '@patternfly/react-core';
-
-<Progress value={33} title="Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar" isTitleTruncated />
+```ts file="./ProgressTruncateTitle.tsx"
 ```
 
 ### Title outside of progress bar
-```ts
-import React from 'react';
-import {
-    DescriptionList, 
-    DescriptionListGroup, 
-    DescriptionListTerm, 
-    DescriptionListDescription,
-    Progress, 
-    ProgressMeasureLocation,
-} from '@patternfly/react-core';
-
-<DescriptionList>
-  <DescriptionListGroup>
-    <DescriptionListTerm id="progress-label">
-        Title outside of progress bar
-    </DescriptionListTerm>
-    <DescriptionListDescription>
-      <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-labelledby="progress-label"/>
-    </DescriptionListDescription>
-  </DescriptionListGroup>
-</DescriptionList>
+```ts file="./ProgressTitleOutsideOfProgressBar.tsx"
 ```
diff --git a/packages/react-core/src/components/Progress/examples/ProgressBasic.tsx b/packages/react-core/src/components/Progress/examples/ProgressBasic.tsx
new file mode 100644
index 00000000000..8354e262026
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressBasic.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressBasic: React.FunctionComponent = () => <Progress value={33} title="Title" />;
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressFailure.tsx
new file mode 100644
index 00000000000..d41f6768909
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressFailure.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressFailure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" variant={ProgressVariant.danger} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx b/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx
new file mode 100644
index 00000000000..164a997e98d
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressFailureWithoutMeasure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} variant={ProgressVariant.danger} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx b/packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx
new file mode 100644
index 00000000000..a00e6b2c1df
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressFiniteStep.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressFiniteStep: React.FunctionComponent = () => (
+  <Progress
+    value={2}
+    min={0}
+    max={5}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.top}
+    label="2 of 5"
+    valueText="2 of 5"
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressInside.tsx b/packages/react-core/src/components/Progress/examples/ProgressInside.tsx
new file mode 100644
index 00000000000..63702846161
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressInside.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressInside: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.inside} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx b/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx
new file mode 100644
index 00000000000..9b731eac103
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressInsideSuccess.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressInsideSuccess: React.FunctionComponent = () => (
+  <Progress
+    value={100}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.inside}
+    variant={ProgressVariant.success}
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressLarge.tsx b/packages/react-core/src/components/Progress/examples/ProgressLarge.tsx
new file mode 100644
index 00000000000..6ef927cf25a
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressLarge.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressSize } from '@patternfly/react-core';
+
+export const ProgressLarge: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" size={ProgressSize.lg} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressOutside.tsx b/packages/react-core/src/components/Progress/examples/ProgressOutside.tsx
new file mode 100644
index 00000000000..c2069fe2bed
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressOutside.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressOutside: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.outside} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx b/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx
new file mode 100644
index 00000000000..b6e879d3e2e
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressOutsideFailure.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressOutsideFailure: React.FunctionComponent = () => (
+  <Progress
+    value={33}
+    title="Title"
+    measureLocation={ProgressMeasureLocation.outside}
+    variant={ProgressVariant.danger}
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx b/packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx
new file mode 100644
index 00000000000..b529a39c012
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressSingleLine.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressSingleLine: React.FunctionComponent = () => (
+  <Progress value={33} measureLocation={ProgressMeasureLocation.outside} aria-label="Title" />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSmall.tsx b/packages/react-core/src/components/Progress/examples/ProgressSmall.tsx
new file mode 100644
index 00000000000..c732475d330
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressSmall.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressSize } from '@patternfly/react-core';
+
+export const ProgressSmall: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" size={ProgressSize.sm} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx b/packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx
new file mode 100644
index 00000000000..3376f7bdf68
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressStepInstruction.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressStepInstruction: React.FunctionComponent = () => (
+  <Progress value={2} title="Title" min={0} max={5} label="Step 2: Copying files" valueText="Step 2: Copying files" />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx b/packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx
new file mode 100644
index 00000000000..ef9ffc4bc26
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressSuccess.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressSuccess: React.FunctionComponent = () => (
+  <Progress value={100} title="Title" variant={ProgressVariant.success} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
new file mode 100644
index 00000000000..f570629a753
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import {
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Progress,
+  ProgressMeasureLocation
+} from '@patternfly/react-core';
+
+export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
+  <DescriptionList>
+    <DescriptionListGroup>
+      <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
+      <DescriptionListDescription>
+        <Progress
+          value={33}
+          measureLocation={ProgressMeasureLocation.outside}
+          aria-labelledby="title-outside-progress-example-label"
+        />
+      </DescriptionListDescription>
+    </DescriptionListGroup>
+  </DescriptionList>
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx b/packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx
new file mode 100644
index 00000000000..a2f455256ba
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressTruncateTitle.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Progress } from '@patternfly/react-core';
+
+export const ProgressTruncateTitle: React.FunctionComponent = () => (
+  <Progress
+    value={33}
+    title="Very very very very very very very very very very very long title which should be truncated if it does not fit onto one line above the progress bar"
+    isTitleTruncated
+  />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressWarning.tsx b/packages/react-core/src/components/Progress/examples/ProgressWarning.tsx
new file mode 100644
index 00000000000..4eefe9880ef
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressWarning.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressVariant } from '@patternfly/react-core';
+
+export const ProgressWarning: React.FunctionComponent = () => (
+  <Progress value={90} title="Title" variant={ProgressVariant.warning} />
+);
diff --git a/packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx b/packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx
new file mode 100644
index 00000000000..4cf8f4af7bb
--- /dev/null
+++ b/packages/react-core/src/components/Progress/examples/ProgressWithoutMeasure.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+export const ProgressWithoutMeasure: React.FunctionComponent = () => (
+  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} />
+);