diff --git a/packages/react-core/src/components/TimePicker/examples/TimePicker.md b/packages/react-core/src/components/TimePicker/examples/TimePicker.md
index 3995adab7be..0021a17bdc3 100644
--- a/packages/react-core/src/components/TimePicker/examples/TimePicker.md
+++ b/packages/react-core/src/components/TimePicker/examples/TimePicker.md
@@ -15,66 +15,32 @@ Appending the TimePicker to the `document.body` may cause accessibility issues,
 
 ### Basic 12 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-SimpleTimePicker = () => {
-  const onChange = (_event, time, hour, minute, seconds, isValid) => {
-    console.log('time', time);
-    console.log('hour', hour);
-    console.log('minute', minute);
-    console.log('seconds', seconds);
-    console.log('isValid', isValid);
-  };
-
-  return <TimePicker time="3:35 AM" onChange={onChange} />;
-};
+```ts file="./TimePickerBasic12Hour.tsx"
 ```
 
 ### Basic 24 hour
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="2020-10-14T18:06:02Z" is24Hour />;
+```ts file="./TimePickerBasic24Hour.tsx"
 ```
 
 ### Custom delimiter
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour delimiter="h" placeholder="" />;
+```ts file="./TimePickerCustomDelimiter.tsx"
 ```
 
 ### Minimum/maximum times
 
 The `minTime`/`maxTime` props restrict the options shown for the user to select from as well as trigger the `invalidMinMaxErrorMessage` if the user enters a time outside this range.
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />;
+```ts file="./TimePickerMinMaxTimes.tsx"
 ```
 
 ### With seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="3:35:20 PM" includeSeconds />;
+```ts file="./TimePickerWithSeconds.tsx"
 ```
 
 ### Basic 24 hours with seconds
 
-```js
-import React from 'react';
-import { TimePicker } from '@patternfly/react-core';
-
-<TimePicker time="12:35:50" includeSeconds is24Hour />;
+```ts file="./TimePickerBasic24HoursWithSeconds.tsx"
 ```
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx
new file mode 100644
index 00000000000..cca47536518
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic12Hour.tsx
@@ -0,0 +1,22 @@
+/* eslint-disable no-console */
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic12Hour: React.FunctionComponent = () => {
+  const onChange = (
+    _event: React.FormEvent<HTMLInputElement>,
+    time: string,
+    hour: number,
+    minute: number,
+    seconds: number,
+    isValid: boolean
+  ) => {
+    console.log('time', time);
+    console.log('hour', hour);
+    console.log('minute', minute);
+    console.log('seconds', seconds);
+    console.log('isValid', isValid);
+  };
+
+  return <TimePicker time="3:35 AM" onChange={onChange} />;
+};
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx
new file mode 100644
index 00000000000..71cdd0ecca9
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24Hour.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24Hour: React.FunctionComponent = () => <TimePicker time="2020-10-14T18:06:02Z" is24Hour />;
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx
new file mode 100644
index 00000000000..b66e60ad756
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerBasic24HoursWithSeconds.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerBasic24HourWithSeconds: React.FunctionComponent = () => (
+  <TimePicker time="12:35:50" includeSeconds is24Hour />
+);
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx
new file mode 100644
index 00000000000..95a435b47b7
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerCustomDelimiter.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerCustomDelimiter: React.FunctionComponent = () => <TimePicker is24Hour delimiter="h" placeholder="" />;
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx
new file mode 100644
index 00000000000..b08f6ceb0ab
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerMinMaxTimes.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerMinMaxTimes: React.FunctionComponent = () => (
+  <TimePicker is24Hour minTime="9:30" maxTime="17:15" placeholder="14:00" />
+);
diff --git a/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx
new file mode 100644
index 00000000000..918eabd8963
--- /dev/null
+++ b/packages/react-core/src/components/TimePicker/examples/TimePickerWithSeconds.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import { TimePicker } from '@patternfly/react-core';
+
+export const TimePickerWithSeconds: React.FunctionComponent = () => <TimePicker time="3:35:20 PM" includeSeconds />;