diff --git a/packages/react-core/src/layouts/Grid/examples/Grid.md b/packages/react-core/src/layouts/Grid/examples/Grid.md
index fe19b34c286..9f1a7f770f5 100644
--- a/packages/react-core/src/layouts/Grid/examples/Grid.md
+++ b/packages/react-core/src/layouts/Grid/examples/Grid.md
@@ -12,134 +12,38 @@ import './grid.css';
 
 ### Basic
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridBasic.tsx"
 ```
 
 ### With gutters
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter>
-  <GridItem span={8}>span = 8</GridItem>
-  <GridItem span={4} rowSpan={2}>
-    span = 4, rowSpan = 2
-  </GridItem>
-  <GridItem span={2} rowSpan={3}>
-    span = 2, rowSpan = 3
-  </GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={2}>span = 2</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-  <GridItem span={4}>span = 4</GridItem>
-</Grid>;
+```ts file="GridWithGutters.tsx"
 ```
 
 ### With overrides
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid sm={6} md={4} lg={3} xl2={1}>
-  <GridItem span={3} rowSpan={2}>
-    span = 3 rowSpan= 2
-  </GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-  <GridItem>Grid Item</GridItem>
-</Grid>;
+```ts file="GridWithOverrides.tsx"
 ```
 
 ## Ordering
 
 ### Standard ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={3}>
-  <GridItem order={{ default: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridStandardOrdering.tsx"
 ```
 
 ### Responsive ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={3}>
-  <GridItem order={{ lg: '2' }}>Item A</GridItem>
-  <GridItem>Item B</GridItem>
-  <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
-</Grid>;
+```ts file="GridResponsiveOrdering.tsx"
 ```
 
 ### Grouped ordering
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid hasGutter span={12}>
-  <Grid hasGutter span={6} order={{ default: '2' }}>
-    <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
-    <GridItem>Set 1, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
-  </Grid>
-  <Grid hasGutter span={6}>
-    <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
-    <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
-    <GridItem>Set 2, Item C</GridItem>
-    <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
-  </Grid>
-</Grid>;
+```ts file="GridGroupingOrdering.tsx"
+
 ```
 
 ### Alternative components
 
-```js
-import { Grid, GridItem } from '@patternfly/react-core';
-
-<Grid component="ul">
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-  <GridItem component="li">Grid item</GridItem>
-</Grid>;
+```ts file="GridAlternativeComponents.tsx"
 ```
diff --git a/packages/react-core/src/layouts/Grid/examples/GridAlternativeComponents.tsx b/packages/react-core/src/layouts/Grid/examples/GridAlternativeComponents.tsx
new file mode 100644
index 00000000000..e42443f0d51
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridAlternativeComponents.tsx
@@ -0,0 +1,11 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridAlternativeComponents: React.FunctionComponent = () => (
+  <Grid component="ul">
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+    <GridItem component="li">Grid item</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridBasic.tsx b/packages/react-core/src/layouts/Grid/examples/GridBasic.tsx
new file mode 100644
index 00000000000..ee274a3e131
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridBasic.tsx
@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridBasic: React.FunctionComponent = () => (
+  <Grid>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridGroupingOrdering.tsx b/packages/react-core/src/layouts/Grid/examples/GridGroupingOrdering.tsx
new file mode 100644
index 00000000000..c8d8305029e
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridGroupingOrdering.tsx
@@ -0,0 +1,18 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridGroupingOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={12}>
+    <Grid hasGutter span={6} order={{ default: '2' }}>
+      <GridItem order={{ default: '3' }}>Set 1, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 1, Item B</GridItem>
+      <GridItem>Set 1, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 1, Item D</GridItem>
+    </Grid>
+    <Grid hasGutter span={6}>
+      <GridItem order={{ default: '2' }}>Set 2, Item A</GridItem>
+      <GridItem order={{ default: '1' }}>Set 2, Item B</GridItem>
+      <GridItem>Set 2, Item C</GridItem>
+      <GridItem order={{ default: '2' }}>Set 2, Item D</GridItem>
+    </Grid>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridResponsiveOrdering.tsx b/packages/react-core/src/layouts/Grid/examples/GridResponsiveOrdering.tsx
new file mode 100644
index 00000000000..50c3bd2ffe1
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridResponsiveOrdering.tsx
@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridResponsiveOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ lg: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1', md: '1' }}>Item C</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridStandardOrdering.tsx b/packages/react-core/src/layouts/Grid/examples/GridStandardOrdering.tsx
new file mode 100644
index 00000000000..487c951b280
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridStandardOrdering.tsx
@@ -0,0 +1,9 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridStandardOrdering: React.FunctionComponent = () => (
+  <Grid hasGutter span={3}>
+    <GridItem order={{ default: '2' }}>Item A</GridItem>
+    <GridItem>Item B</GridItem>
+    <GridItem order={{ default: '-1' }}>Item C</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridWithGutters.tsx b/packages/react-core/src/layouts/Grid/examples/GridWithGutters.tsx
new file mode 100644
index 00000000000..f0c92ef1325
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridWithGutters.tsx
@@ -0,0 +1,22 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithGutters: React.FunctionComponent = () => (
+  <Grid hasGutter>
+    <GridItem span={8}>span = 8</GridItem>
+    <GridItem span={4} rowSpan={2}>
+      span = 4, rowSpan = 2
+    </GridItem>
+    <GridItem span={2} rowSpan={3}>
+      span = 2, rowSpan = 3
+    </GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={2}>span = 2</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+    <GridItem span={4}>span = 4</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx b/packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx
new file mode 100644
index 00000000000..d4aee4ac7d9
--- /dev/null
+++ b/packages/react-core/src/layouts/Grid/examples/GridWithOverrides.tsx
@@ -0,0 +1,20 @@
+import { Grid, GridItem } from '@patternfly/react-core';
+
+export const GridWithOverrides: React.FunctionComponent = () => (
+  <Grid sm={6} md={4} lg={3} xl2={1}>
+    <GridItem span={3} rowSpan={2}>
+      span = 3 rowSpan= 2
+    </GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+    <GridItem>Grid Item</GridItem>
+  </Grid>
+);
diff --git a/packages/react-core/src/layouts/Stack/examples/Stack.md b/packages/react-core/src/layouts/Stack/examples/Stack.md
index 06e822442ce..81a0cc83680 100644
--- a/packages/react-core/src/layouts/Stack/examples/Stack.md
+++ b/packages/react-core/src/layouts/Stack/examples/Stack.md
@@ -12,24 +12,10 @@ import './stack.css';
 
 ### Basic
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackBasic.tsx"
 ```
 
 ### With gutter
 
-```js
-import { Stack, StackItem } from '@patternfly/react-core';
-
-<Stack hasGutter>
-  <StackItem>content</StackItem>
-  <StackItem isFilled>pf-m-fill</StackItem>
-  <StackItem>content</StackItem>
-</Stack>;
+```ts file="StackWithGutter.tsx"
 ```
diff --git a/packages/react-core/src/layouts/Stack/examples/StackBasic.tsx b/packages/react-core/src/layouts/Stack/examples/StackBasic.tsx
new file mode 100644
index 00000000000..add23fa8782
--- /dev/null
+++ b/packages/react-core/src/layouts/Stack/examples/StackBasic.tsx
@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackBasic: React.FunctionComponent = () => (
+  <Stack>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);
diff --git a/packages/react-core/src/layouts/Stack/examples/StackWithGutter.tsx b/packages/react-core/src/layouts/Stack/examples/StackWithGutter.tsx
new file mode 100644
index 00000000000..146f075bbb4
--- /dev/null
+++ b/packages/react-core/src/layouts/Stack/examples/StackWithGutter.tsx
@@ -0,0 +1,9 @@
+import { Stack, StackItem } from '@patternfly/react-core';
+
+export const StackWithGutter: React.FunctionComponent = () => (
+  <Stack hasGutter>
+    <StackItem>content</StackItem>
+    <StackItem isFilled>pf-m-fill</StackItem>
+    <StackItem>content</StackItem>
+  </Stack>
+);