diff --git a/packages/react-core/src/components/List/examples/List.md b/packages/react-core/src/components/List/examples/List.md
index 12e7de39f84..cbf1f18ad93 100644
--- a/packages/react-core/src/components/List/examples/List.md
+++ b/packages/react-core/src/components/List/examples/List.md
@@ -5,97 +5,35 @@ cssPrefix: pf-c-list
 propComponents: ['List', 'ListItem']
 ---
 
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
 
 ## Examples
 ### Basic
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListBasic.tsx"
 ```
 
 ### Inline
-```js
-import React from 'react';
-import { List, ListItem, ListVariant } from '@patternfly/react-core';
-
-<List variant={ListVariant.inline}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListInline.tsx"
 ```
 
 ### Ordered
-```js
-import React from 'react';
-import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
-
-<List component={ListComponent.ol} type={OrderType.number}>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListOrdered.tsx"
 ```
 
 ### Plain
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListPlain.tsx"
 ```
 
 ### With horizontal rules
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-
-<List isPlain isBordered>
-  <ListItem>First</ListItem>
-  <ListItem>Second</ListItem>
-  <ListItem>Third</ListItem>
-</List>
+```ts file="./ListHorizontalRules.tsx"
 ```
 
 ### With icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain>
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListIcons.tsx"
 ```
 
 ### With large icons
-```js
-import React from 'react';
-import { List, ListItem } from '@patternfly/react-core';
-import BookOpen from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
-import Key from '@patternfly/react-icons/dist/esm/icons/key-icon';
-import Desktop from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
-
-<List isPlain iconSize="large">
-  <ListItem icon={<BookOpen />}>First</ListItem>
-  <ListItem icon={<Key />}>Second</ListItem>
-  <ListItem icon={<Desktop />}>Third</ListItem>
-</List>
+```ts file="./ListLargeIcons.tsx"
 ```
diff --git a/packages/react-core/src/components/List/examples/ListBasic.tsx b/packages/react-core/src/components/List/examples/ListBasic.tsx
new file mode 100644
index 00000000000..4bbc5e16741
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListBasic.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListBasic: React.FunctionComponent = () => (
+  <List>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListHorizontalRules.tsx b/packages/react-core/src/components/List/examples/ListHorizontalRules.tsx
new file mode 100644
index 00000000000..94318250e30
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListHorizontalRules.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListHorizontalRules: React.FunctionComponent = () => (
+  <List isPlain isBordered>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListIcons.tsx b/packages/react-core/src/components/List/examples/ListIcons.tsx
new file mode 100644
index 00000000000..e5c040a5d1c
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListIcons.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListIcons: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListInline.tsx b/packages/react-core/src/components/List/examples/ListInline.tsx
new file mode 100644
index 00000000000..1029d6544b0
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListInline.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListVariant } from '@patternfly/react-core';
+
+export const ListInline: React.FunctionComponent = () => (
+  <List variant={ListVariant.inline}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListLargeIcons.tsx b/packages/react-core/src/components/List/examples/ListLargeIcons.tsx
new file mode 100644
index 00000000000..223905912d9
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListLargeIcons.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import BookOpenIcon from '@patternfly/react-icons/dist/esm/icons/book-open-icon';
+import KeyIcon from '@patternfly/react-icons/dist/esm/icons/key-icon';
+import DesktopIcon from '@patternfly/react-icons/dist/esm/icons/desktop-icon';
+
+export const ListLargeIcons: React.FunctionComponent = () => (
+  <List isPlain iconSize="large">
+    <ListItem icon={<BookOpenIcon />}>First</ListItem>
+    <ListItem icon={<KeyIcon />}>Second</ListItem>
+    <ListItem icon={<DesktopIcon />}>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListOrdered.tsx b/packages/react-core/src/components/List/examples/ListOrdered.tsx
new file mode 100644
index 00000000000..3ff58c048c8
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListOrdered.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem, ListComponent, OrderType } from '@patternfly/react-core';
+
+export const ListOrdered: React.FunctionComponent = () => (
+  <List component={ListComponent.ol} type={OrderType.number}>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);
diff --git a/packages/react-core/src/components/List/examples/ListPlain.tsx b/packages/react-core/src/components/List/examples/ListPlain.tsx
new file mode 100644
index 00000000000..d238e104396
--- /dev/null
+++ b/packages/react-core/src/components/List/examples/ListPlain.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+export const ListPlain: React.FunctionComponent = () => (
+  <List isPlain>
+    <ListItem>First</ListItem>
+    <ListItem>Second</ListItem>
+    <ListItem>Third</ListItem>
+  </List>
+);