diff --git a/packages/react-core/src/components/Skeleton/examples/Skeleton.md b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
index 3db117e243a..0062ad91380 100644
--- a/packages/react-core/src/components/Skeleton/examples/Skeleton.md
+++ b/packages/react-core/src/components/Skeleton/examples/Skeleton.md
@@ -9,118 +9,25 @@ propComponents: ['Skeleton']
 
 ### Default
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<Skeleton screenreaderText="Loading contents" />;
+```ts file="./SkeletonDefault.tsx"
 ```
 
 ### Percentage widths
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  <Skeleton width="25%" screenreaderText="Loading contents" />
-  <br />
-  <Skeleton width="33%" />
-  <br />
-  <Skeleton width="50%" />
-  <br />
-  <Skeleton width="66%" />
-  <br />
-  <Skeleton width="75%" />
-  <br />
-  <Skeleton />
-</React.Fragment>;
+```ts file="./SkeletonPercentageWidth.tsx"
 ```
 
 ### Percentage heights
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-  <Skeleton height="25%" width="15%" screenreaderText="Loading contents" />
-  <Skeleton height="33%" width="15%" />
-  <Skeleton height="50%" width="15%" />
-  <Skeleton height="66%" width="15%" />
-  <Skeleton height="75%" width="15%" />
-  <Skeleton height="100%" width="15%" />
-</div>;
+```ts file="./SkeletonPercentageHeight.tsx"
 ```
 
 ### Text modifiers
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  --pf-global--FontSize--4xl
-  <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
-  <br />
-  --pf-global--FontSize--3xl
-  <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
-  <br />
-  --pf-global--FontSize--2xl
-  <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
-  <br />
-  --pf-global--FontSize--xl
-  <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
-  <br />
-  --pf-global--FontSize--lg
-  <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
-  <br />
-  --pf-global--FontSize--md
-  <Skeleton fontSize="md" screenreaderText="Loading font size md" />
-  <br />
-  --pf-global--FontSize--sm
-  <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
-</React.Fragment>;
+```ts file="./SkeletonText.tsx"
 ```
 
 ### Shapes
 
-```js
-import React from 'react';
-import { Skeleton } from '@patternfly/react-core';
-
-<React.Fragment>
-  Small circle
-  <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
-  <br />
-  Medium circle
-  <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
-  <br />
-  Large circle
-  <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
-  <br />
-  Small square
-  <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
-  <br />
-  Medium square
-  <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
-  <br />
-  Large square
-  <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
-  <br />
-  Small rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
-  </div>
-  <br />
-  Medium rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
-  </div>
-  <br />
-  Large rectangle
-  <div style={{ height: '200px' }}>
-    <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
-  </div>
-</React.Fragment>;
+```ts file="./SkeletonShapes.tsx"
 ```
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx
new file mode 100644
index 00000000000..47d75fa63b7
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonDefault.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
new file mode 100644
index 00000000000..3f19887aa94
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageHeight: React.FunctionComponent = () => (
+  <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
+    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
+    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
+    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
+    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
+    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
+    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+  </div>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
new file mode 100644
index 00000000000..39ca9ae7bd2
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonPercentageWidth: React.FunctionComponent = () => (
+  <React.Fragment>
+    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <br />
+    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <br />
+    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <br />
+    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <br />
+    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <br />
+    <Skeleton />
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx
new file mode 100644
index 00000000000..e94153ce482
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonShapes.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonShapes: React.FunctionComponent = () => (
+  <React.Fragment>
+    Small circle
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <br />
+    Medium circle
+    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <br />
+    Large circle
+    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <br />
+    Small square
+    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <br />
+    Medium square
+    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <br />
+    Large square
+    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <br />
+    Small rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+    </div>
+    <br />
+    Medium rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+    </div>
+    <br />
+    Large rectangle
+    <div style={{ height: '200px' }}>
+      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+    </div>
+  </React.Fragment>
+);
diff --git a/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx
new file mode 100644
index 00000000000..160b9dfc49f
--- /dev/null
+++ b/packages/react-core/src/components/Skeleton/examples/SkeletonText.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Skeleton } from '@patternfly/react-core';
+
+export const SkeletonText: React.FunctionComponent = () => (
+  <React.Fragment>
+    --pf-global--FontSize--4xl
+    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <br />
+    --pf-global--FontSize--3xl
+    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <br />
+    --pf-global--FontSize--2xl
+    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <br />
+    --pf-global--FontSize--xl
+    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <br />
+    --pf-global--FontSize--lg
+    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <br />
+    --pf-global--FontSize--md
+    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <br />
+    --pf-global--FontSize--sm
+    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+  </React.Fragment>
+);