diff --git a/src/Comments.ts b/src/Comments.ts
new file mode 100644
index 0000000..a578b2f
--- /dev/null
+++ b/src/Comments.ts
@@ -0,0 +1,26 @@
+import Field from "./Field";
+
+class Comments extends Field {
+  /**
+   * Height of the comments component
+   */
+  _height: number | undefined = undefined;
+
+  get height(): number | undefined {
+    return this._height;
+  }
+
+  set height(value: number | undefined) {
+    this._height = value;
+  }
+
+  constructor(props: any) {
+    super(props);
+    if (props.height) {
+      const parsedHeight = parseInt(props.height);
+      this._height = isNaN(parsedHeight) ? undefined : parsedHeight;
+    }
+  }
+}
+
+export default Comments;
diff --git a/src/WidgetFactory.ts b/src/WidgetFactory.ts
index 97a01c4..864cf1e 100644
--- a/src/WidgetFactory.ts
+++ b/src/WidgetFactory.ts
@@ -37,6 +37,7 @@ import CodeEditor from "./CodeEditor";
 import Avatar from "./Avatar";
 import Time from "./Time";
 import Alert from "./Alert";
+import Comments from "./Comments";
 
 class WidgetFactory {
   /**
@@ -168,6 +169,9 @@ class WidgetFactory {
       case "alert":
         this._widgetClass = Alert;
         break;
+      case "comments_timeline":
+        this._widgetClass = Comments;
+        break;
 
       default:
         break;
diff --git a/src/index.ts b/src/index.ts
index 61d086a..deed0b3 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -49,6 +49,7 @@ import CodeEditor from "./CodeEditor";
 import Time from "./Time";
 import HTMLPreview from "./HTMLPreview";
 import Alert from "./Alert";
+import Comments from "./Comments";
 
 import {
   Graph,
@@ -134,4 +135,5 @@ export {
   Alert,
   YAxisOpts,
   MinMaxValues,
+  Comments,
 };
diff --git a/src/spec/Comments.spec.ts b/src/spec/Comments.spec.ts
new file mode 100644
index 0000000..3347c8c
--- /dev/null
+++ b/src/spec/Comments.spec.ts
@@ -0,0 +1,32 @@
+// Write specs for the Comments component here with vitest
+import { describe, it, expect } from "vitest";
+import Comments from "../Comments";
+
+describe("Comments", () => {
+  it("sets height when provided in props", () => {
+    const comments = new Comments({ height: "150" });
+    expect(comments.height).toBe(150);
+  });
+
+  it("defaults height to undefined when not provided in props", () => {
+    const comments = new Comments({});
+    expect(comments.height).toBeUndefined();
+  });
+
+  it("sets height to undefined when provided height is not a number", () => {
+    const comments = new Comments({ height: "invalid" });
+    expect(comments.height).toBeUndefined();
+  });
+
+  it("updates height when set with a valid number", () => {
+    const comments = new Comments({});
+    comments.height = 200;
+    expect(comments.height).toBe(200);
+  });
+
+  it("updates height to undefined when set with an invalid value", () => {
+    const comments = new Comments({});
+    comments.height = undefined;
+    expect(comments.height).toBeUndefined();
+  });
+});
diff --git a/src/spec/WidgetFactory.spec.ts b/src/spec/WidgetFactory.spec.ts
index c39f24a..a1105bd 100644
--- a/src/spec/WidgetFactory.spec.ts
+++ b/src/spec/WidgetFactory.spec.ts
@@ -13,6 +13,7 @@ import {
   ButtonGroup,
   Time,
   HTMLPreview,
+  Comments,
 } from "..";
 
 describe("A WidgetFactory", () => {
@@ -119,4 +120,11 @@ describe("A WidgetFactory", () => {
     expect(widget).toBeInstanceOf(HTMLPreview);
     expect(widget.type).toBe("html_preview");
   });
+  it("should be albe to Comments type", () => {
+    const widgetFactory = new WidgetFactory();
+    const props = {};
+    const widget = widgetFactory.createWidget("comments_timeline", props);
+    expect(widget).toBeInstanceOf(Comments);
+    expect(widget.type).toBe("comments_timeline");
+  });
 });