diff --git a/packages/components/src/components/timeline/index.js b/packages/components/src/components/timeline/index.ts
similarity index 57%
rename from packages/components/src/components/timeline/index.js
rename to packages/components/src/components/timeline/index.ts
index f269c192f191..05627ed51e75 100644
--- a/packages/components/src/components/timeline/index.js
+++ b/packages/components/src/components/timeline/index.ts
@@ -1,4 +1,4 @@
-import Timeline from './timeline.jsx';
+import Timeline from './timeline';
 import './timeline.scss';
 
 export default Timeline;
diff --git a/packages/components/src/components/timeline/timeline.jsx b/packages/components/src/components/timeline/timeline.jsx
deleted file mode 100644
index 910e5331ea7e..000000000000
--- a/packages/components/src/components/timeline/timeline.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-import Text from '../text';
-
-const Oval = ({ children }) => {
-    return (
-        <div className='dc-timeline__oval'>
-            <Text color='colored-background' sizd='s' weight='bold' className='dc-timeline__number'>
-                {children}
-            </Text>
-        </div>
-    );
-};
-
-const Timeline = ({ children, disabled_items, ...props }) => {
-    return (
-        <div {...props}>
-            {children.map((child, idx) => (
-                <div
-                    key={idx}
-                    className={classNames('dc-timeline__flex', {
-                        'dc-timeline__flex--no-border': children.length === idx + 1,
-                        'dc-timeline__flex--disabled': disabled_items && disabled_items.includes(idx + 1),
-                    })}
-                >
-                    <Oval>{idx + 1}</Oval>
-                    <div className='dc-timeline__container'>
-                        <Text as='h2' color='prominent' size='xs' className='dc-timeline__title'>
-                            {child.props.item_title}
-                        </Text>
-                        <div className='dc-timeline__content'>{child}</div>
-                    </div>
-                </div>
-            ))}
-        </div>
-    );
-};
-
-const Item = ({ children, ...props }) => <div {...props}>{children}</div>;
-
-Timeline.Item = Item;
-
-export default Timeline;
diff --git a/packages/components/src/components/timeline/timeline.tsx b/packages/components/src/components/timeline/timeline.tsx
new file mode 100644
index 000000000000..f924b0304357
--- /dev/null
+++ b/packages/components/src/components/timeline/timeline.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import classNames from 'classnames';
+import Text from '../text';
+
+type TOval = {
+    children: number;
+};
+type TItem = React.HTMLAttributes<HTMLDivElement> & { item_title: React.ReactNode };
+type TTimeline = React.HTMLAttributes<HTMLDivElement> & { disabled_items?: number[] };
+
+const Oval = ({ children }: TOval) => {
+    return (
+        <div className='dc-timeline__oval'>
+            <Text color='colored-background' size='s' weight='bold' className='dc-timeline__number'>
+                {children}
+            </Text>
+        </div>
+    );
+};
+
+const Timeline = ({ children, disabled_items, ...props }: React.PropsWithChildren<TTimeline>) => {
+    return (
+        <div {...props}>
+            {Array.isArray(children) &&
+                children.map((child, idx) => (
+                    <div
+                        key={idx}
+                        className={classNames('dc-timeline__flex', {
+                            'dc-timeline__flex--no-border': children.length === idx + 1,
+                            'dc-timeline__flex--disabled': disabled_items?.includes(idx + 1),
+                        })}
+                    >
+                        <Oval>{idx + 1}</Oval>
+                        <div className='dc-timeline__container'>
+                            <Text as='h2' color='prominent' size='xs' className='dc-timeline__title'>
+                                {child.props.item_title}
+                            </Text>
+                            <div className='dc-timeline__content'>{child}</div>
+                        </div>
+                    </div>
+                ))}
+        </div>
+    );
+};
+
+const Item = ({ children, ...props }: React.PropsWithChildren<TItem>) => <div {...props}>{children}</div>;
+
+Timeline.Item = Item;
+
+export default Timeline;