diff --git a/packages/react-core/src/components/Panel/examples/Panel.md b/packages/react-core/src/components/Panel/examples/Panel.md
index a3cd9c5fc6d..ac1847c7723 100644
--- a/packages/react-core/src/components/Panel/examples/Panel.md
+++ b/packages/react-core/src/components/Panel/examples/Panel.md
@@ -9,199 +9,50 @@ propComponents: [Panel, PanelMain, PanelMainBody, PanelHeader, PanelFooter]
### Basic
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BasicPanel = () => (
-
-
- Main content
-
-
-);
+```ts file="PanelBasic.tsx"
```
### Header
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
-
-const HeaderPanel = () => (
-
- Header content
-
-
- Main content
-
-
-);
+```ts file="PanelHeaderExample.tsx"
```
### Footer
-```js
-import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
-
-const FooterPanel = () => (
-
-
- Main content
-
- Footer content
-
-);
+```ts file="PanelFooterExample.tsx"
```
### Header and footer
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const HeaderFooterPanel = () => (
-
- Header content
-
-
- Main content
-
- Footer content
-
-);
+```ts file="PanelHeaderFooter.tsx"
```
### No body
-```js
-import { Panel, PanelMain } from '@patternfly/react-core';
-
-const NoBodyPanel = () => (
-
- Main content
-
-);
+```ts file="PanelNoBody.tsx"
```
### Raised
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const RaisedPanel = () => (
-
-
- Main content
-
-
-);
+```ts file="PanelRaised.tsx"
```
### Bordered
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const BorderedPanel = () => (
-
-
- Main content
-
-
-);
+```ts file="PanelBordered.tsx"
```
### Secondary variant
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const PanelSecondaryVariant = () => (
-
-
- Main content
-
-
-);
+```ts file="PanelSecondaryVariant.tsx"
```
### Scrollable
-```js
-import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
-
-const ScrollablePanel = () => (
-
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
-
-);
+```ts file="PanelScrollable.tsx"
```
### Scrollable with header and footer
-```js
-import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
-
-const ScrollableHeaderFooterPanel = () => (
-
- Header content
-
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Main content
-
-
- Footer content
-
-);
+```ts file="PanelScrollableHeaderFooter.tsx"
```
diff --git a/packages/react-core/src/components/Panel/examples/PanelBasic.tsx b/packages/react-core/src/components/Panel/examples/PanelBasic.tsx
new file mode 100644
index 00000000000..b79523e7df8
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelBasic.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBasic: React.FunctionComponent = () => (
+
+
+ Main content
+
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelBordered.tsx b/packages/react-core/src/components/Panel/examples/PanelBordered.tsx
new file mode 100644
index 00000000000..7e6a961dade
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelBordered.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelBordered: React.FunctionComponent = () => (
+
+
+ Main content
+
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx b/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx
new file mode 100644
index 00000000000..3252b4c9b36
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelFooterExample.tsx
@@ -0,0 +1,10 @@
+import { Panel, PanelMain, PanelMainBody, PanelFooter } from '@patternfly/react-core';
+
+export const PanelFooterExample: React.FunctionComponent = () => (
+
+
+ Main content
+
+ Footer content
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx b/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx
new file mode 100644
index 00000000000..eba0bf95cf2
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelHeaderExample.tsx
@@ -0,0 +1,11 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider } from '@patternfly/react-core';
+
+export const PanelHeaderExample: React.FunctionComponent = () => (
+
+ Header content
+
+
+ Main content
+
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx b/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx
new file mode 100644
index 00000000000..22f7abde218
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelHeaderFooter.tsx
@@ -0,0 +1,12 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelHeaderFooter: React.FunctionComponent = () => (
+
+ Header content
+
+
+ Main content
+
+ Footer content
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx b/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx
new file mode 100644
index 00000000000..8a8cec8ec30
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelNoBody.tsx
@@ -0,0 +1,7 @@
+import { Panel, PanelMain } from '@patternfly/react-core';
+
+export const PanelNoBody: React.FunctionComponent = () => (
+
+ Main content
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelRaised.tsx b/packages/react-core/src/components/Panel/examples/PanelRaised.tsx
new file mode 100644
index 00000000000..c1e67a3d44b
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelRaised.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelRaised: React.FunctionComponent = () => (
+
+
+ Main content
+
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx b/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx
new file mode 100644
index 00000000000..35ee511c671
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelScrollable.tsx
@@ -0,0 +1,35 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelScrollable: React.FunctionComponent = () => (
+
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx b/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx
new file mode 100644
index 00000000000..0875cec06eb
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelScrollableHeaderFooter.tsx
@@ -0,0 +1,38 @@
+import { Panel, PanelMain, PanelMainBody, PanelHeader, Divider, PanelFooter } from '@patternfly/react-core';
+
+export const PanelScrollableHeaderFooter: React.FunctionComponent = () => (
+
+ Header content
+
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Main content
+
+
+ Footer content
+
+);
diff --git a/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx b/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx
new file mode 100644
index 00000000000..d24a822c3dc
--- /dev/null
+++ b/packages/react-core/src/components/Panel/examples/PanelSecondaryVariant.tsx
@@ -0,0 +1,9 @@
+import { Panel, PanelMain, PanelMainBody } from '@patternfly/react-core';
+
+export const PanelSecondaryVariant: React.FunctionComponent = () => (
+
+
+ Main content
+
+
+);