diff --git a/packages/react-core/src/components/Spinner/examples/Spinner.md b/packages/react-core/src/components/Spinner/examples/Spinner.md
index 6df06c5f21c..0df17153e79 100644
--- a/packages/react-core/src/components/Spinner/examples/Spinner.md
+++ b/packages/react-core/src/components/Spinner/examples/Spinner.md
@@ -7,31 +7,13 @@ propComponents: ['Spinner']
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG aria-label="Contents of the basic example"/>
+```ts file="./SpinnerBasic.tsx"
 ```
 
 ### Size variations
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Spinner isSVG size="sm" aria-label="Contents of the small example"/>
-  <Spinner isSVG size="md" aria-label="Contents of the medium example"/>
-  <Spinner isSVG size="lg" aria-label="Contents of the large example"/>
-  <Spinner isSVG size="xl" aria-label="Contents of the extra large example"/>
-</React.Fragment>
+```ts file="./SpinnerSizeVariations.tsx"
 ```
 
 ### Custom size
-```js
-import React from 'react';
-import { Spinner } from '@patternfly/react-core';
-
-<Spinner isSVG diameter="80px" aria-label="Contents of the custom size example"/>
+```ts file="./SpinnerCustomSize.tsx"
 ```
-
diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerBasic.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerBasic.tsx
new file mode 100644
index 00000000000..04be2b94e1b
--- /dev/null
+++ b/packages/react-core/src/components/Spinner/examples/SpinnerBasic.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerBasic: React.FunctionComponent = () => <Spinner isSVG aria-label="Contents of the basic example" />;
diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx
new file mode 100644
index 00000000000..89d9dfdcdef
--- /dev/null
+++ b/packages/react-core/src/components/Spinner/examples/SpinnerCustomSize.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerCustomSize: React.FunctionComponent = () => (
+  <Spinner isSVG diameter="80px" aria-label="Contents of the custom size example" />
+);
diff --git a/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx b/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx
new file mode 100644
index 00000000000..e89608b3282
--- /dev/null
+++ b/packages/react-core/src/components/Spinner/examples/SpinnerSizeVariations.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Spinner } from '@patternfly/react-core';
+
+export const SpinnerSizeVariations: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Spinner isSVG size="sm" aria-label="Contents of the small example" />
+    <Spinner isSVG size="md" aria-label="Contents of the medium example" />
+    <Spinner isSVG size="lg" aria-label="Contents of the large example" />
+    <Spinner isSVG size="xl" aria-label="Contents of the extra large example" />
+  </React.Fragment>
+);