diff --git a/packages/@lightningjs/ui-components/src/components/GridOverlay/GridOverlay.d.ts b/packages/@lightningjs/ui-components/src/components/GridOverlay/GridOverlay.d.ts
index 1a4238e910..edee7e7345 100644
--- a/packages/@lightningjs/ui-components/src/components/GridOverlay/GridOverlay.d.ts
+++ b/packages/@lightningjs/ui-components/src/components/GridOverlay/GridOverlay.d.ts
@@ -18,20 +18,73 @@
 
 import lng from '@lightningjs/core';
 import Base from '../Base';
-import type { StylePartial } from '../../types/lui';
-import type { TextBoxStyle } from '../TextBox';
+import { StylePartial } from '../../types/lui';
+import { TextBoxStyle } from '../TextBox';
 
-export type GridOverlayStyle = {
+type GridOverlayStyle = {
   propertyTextStyle: TextBoxStyle;
   valueTextStyle: TextBoxStyle;
 };
 
-export default class GridOverlay extends Base {
+declare namespace GridOverlay {
+  export interface TemplateSpec extends Base.TemplateSpec {
+    /**
+     * when set to true, it displays the column span rectangles.
+     */
+    showColumns?: boolean;
+
+    /**
+     * when set to true, it displays the rulers for spacing between columns.
+     */
+    showGutters?: boolean;
+
+    /**
+     * when set to true, it displays the X and Y margin rulers.
+     */
+    showMargins?: boolean;
+
+    /**
+     * when set to true, it displays the X and Y "safe" zone rulers. This represents the area where content should not be rendered to avoid screen clipping on a device.
+     */
+    showSafe?: boolean;
+
+    /**
+     * when set to true, it displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes.
+     */
+    showText?: boolean;
+
+    style?: StylePartial<GridOverlayStyle>;
+  }
+}
+declare class GridOverlay<
+  TemplateSpec extends GridOverlay.TemplateSpec = GridOverlay.TemplateSpec,
+  TypeConfig extends lng.Component.TypeConfig = lng.Component.TypeConfig
+> extends Base<TemplateSpec, TypeConfig> {
+  /**
+   * when set to true, it displays the column span rectangles.
+   */
   showColumns?: boolean;
+
+  /**
+   * when set to true, it displays the rulers for spacing between columns.
+   */
   showGutters?: boolean;
+
+  /**
+   * when set to true, it displays the X and Y margin rulers.
+   */
   showMargins?: boolean;
+
+  /**
+   * when set to true, it displays the X and Y "safe" zone rulers. This represents the area where content should not be rendered to avoid screen clipping on a device.
+   */
   showSafe?: boolean;
+
+  /**
+   * when set to true, it displays the textbox containing the exact numbers associated with the screen, margin, safe, and gutter sizes.
+   */
   showText?: boolean;
+
   get style(): GridOverlayStyle;
   set style(v: StylePartial<GridOverlayStyle>);
 
@@ -65,3 +118,5 @@ export default class GridOverlay extends Base {
   get _TextScreenH(): lng.Component;
   get _TextScreenW(): lng.Component;
 }
+
+export { GridOverlay as default, GridOverlayStyle };