diff --git a/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..9d4d66f77
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrCarousel, IgrCarouselSlide } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Carousel</h1>
+      <div className={style.container}>
+        <IgrCarousel>
+          <IgrCarouselSlide active={true}>
+            <h2>London</h2>
+            <p>The capital of the United Kingdom, known for its history and landmarks.</p>
+          </IgrCarouselSlide>
+          <IgrCarouselSlide>
+            <h2>Paris</h2>
+            <p>The capital of France, famous for the Eiffel Tower and its museums.</p>
+          </IgrCarouselSlide>
+          <IgrCarouselSlide>
+            <h2>Tokyo</h2>
+            <p>The capital of Japan, a bustling metropolis blending tradition and technology.</p>
+          </IgrCarouselSlide>
+        </IgrCarousel>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/carousel/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/carousel/default/index.ts b/packages/cli/templates/react/igr-ts/carousel/default/index.ts
new file mode 100644
index 000000000..872465678
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/carousel/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrCarouselTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Carousel"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "carousel";
+		this.projectType = "igr-ts";
+		this.name = "Carousel";
+		this.description = "basic IgrCarousel";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrCarouselTemplate();
diff --git a/packages/cli/templates/react/igr-ts/carousel/index.ts b/packages/cli/templates/react/igr-ts/carousel/index.ts
new file mode 100644
index 000000000..3b43573ec
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/carousel/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrCarouselComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Carousel";
+		this.group = "Layouts";
+		this.description = `presents a set of slides by sequentially displaying one at a time`;
+	}
+}
+module.exports = new IgrCarouselComponent();
diff --git a/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..9452ac9a7
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,20 @@
+import style from './style.module.css';
+import { IgrChat } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const messages = [
+  { id: '1', text: 'Hi! How can I help you today?', sender: 'assistant', timestamp: new Date().toISOString() },
+  { id: '2', text: 'Can you show me the Ignite UI for React chat component?', sender: 'user', timestamp: new Date().toISOString() },
+  { id: '3', text: 'Absolutely — this is it!', sender: 'assistant', timestamp: new Date().toISOString() },
+];
+
+export default function $(ClassName)() {
+  return (
+    <div className={style.page}>
+      <h1 className={style.title}>Chat</h1>
+      <div className={style.container}>
+        <IgrChat messages={messages} options={{ currentUserId: 'user' }} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..941734f6c
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/chat/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,21 @@
+:local(.page) {
+  flex: 1 1 auto;
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+:local(.container) {
+  width: 100%;
+}
+:local(.container) :global(igc-chat) {
+  display: block;
+  width: min(100%, 720px);
+  height: 560px;
+  margin: 0 auto;
+}
+:local(.title) {
+  margin: 0 0 20px;
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/chat/default/index.ts b/packages/cli/templates/react/igr-ts/chat/default/index.ts
new file mode 100644
index 000000000..ce9ada744
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/chat/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrChatTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Chat"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "chat";
+		this.projectType = "igr-ts";
+		this.name = "Chat";
+		this.description = "basic IgrChat";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrChatTemplate();
diff --git a/packages/cli/templates/react/igr-ts/chat/index.ts b/packages/cli/templates/react/igr-ts/chat/index.ts
new file mode 100644
index 000000000..165374e12
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/chat/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrChatComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Chat";
+		this.group = "Data Entry & Display";
+		this.description = `a chat UI component for displaying messages, attachments and input interaction`;
+	}
+}
+module.exports = new IgrChatComponent();
diff --git a/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..061a42d17
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,30 @@
+import style from './style.module.css';
+import { IgrCombo } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+const cities = [
+  { id: 'london', name: 'London', country: 'United Kingdom' },
+  { id: 'paris', name: 'Paris', country: 'France' },
+  { id: 'new-york', name: 'New York', country: 'United States' },
+  { id: 'toronto', name: 'Toronto', country: 'Canada' },
+  { id: 'tokyo', name: 'Tokyo', country: 'Japan' },
+  { id: 'sydney', name: 'Sydney', country: 'Australia' },
+];
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Combo</h1>
+      <div className={style.container}>
+        <IgrCombo
+          label="Favorite cities"
+          placeholder="Select cities"
+          data={cities}
+          valueKey="id"
+          displayKey="name"
+          groupKey="country"
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/combo/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/combo/default/index.ts b/packages/cli/templates/react/igr-ts/combo/default/index.ts
new file mode 100644
index 000000000..b5f3baa7b
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/combo/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrComboTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Combo"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "combo";
+		this.projectType = "igr-ts";
+		this.name = "Combo";
+		this.description = "basic IgrCombo";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrComboTemplate();
diff --git a/packages/cli/templates/react/igr-ts/combo/index.ts b/packages/cli/templates/react/igr-ts/combo/index.ts
new file mode 100644
index 000000000..2c8a20742
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/combo/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrComboComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Combo";
+		this.group = "Data Entry & Display";
+		this.description = `a searchable, multi-select dropdown bound to a data source`;
+	}
+}
+module.exports = new IgrComboComponent();
diff --git a/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..a7461f78c
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDateRangePicker } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Date Range Picker</h1>
+      <div className={style.container}>
+        <IgrDateRangePicker label="Choose a date range" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-range-picker/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/date-range-picker/default/index.ts b/packages/cli/templates/react/igr-ts/date-range-picker/default/index.ts
new file mode 100644
index 000000000..9ef57a2fd
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-range-picker/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrDateRangePickerTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Date Range Picker"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-range-picker";
+		this.projectType = "igr-ts";
+		this.name = "Date Range Picker";
+		this.description = "basic IgrDateRangePicker";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrDateRangePickerTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-range-picker/index.ts b/packages/cli/templates/react/igr-ts/date-range-picker/index.ts
new file mode 100644
index 000000000..5f441f74e
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-range-picker/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDateRangePickerComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Date Range Picker";
+		this.group = "Scheduling";
+		this.description = `an input that allows the user to select a range of dates`;
+	}
+}
+module.exports = new IgrDateRangePickerComponent();
diff --git a/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..851db4143
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDateTimeInput } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Date Time Input</h1>
+      <div className={style.container}>
+        <IgrDateTimeInput label="Appointment date" inputFormat="MM/dd/yyyy" value={new Date(2026, 0, 15)} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-time-input/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/date-time-input/default/index.ts b/packages/cli/templates/react/igr-ts/date-time-input/default/index.ts
new file mode 100644
index 000000000..e37612bfe
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-time-input/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrDateTimeInputTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Date Time Input"];
+		this.controlGroup = "Scheduling";
+		this.listInComponentTemplates = true;
+		this.id = "date-time-input";
+		this.projectType = "igr-ts";
+		this.name = "Date Time Input";
+		this.description = "basic IgrDateTimeInput";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrDateTimeInputTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-time-input/index.ts b/packages/cli/templates/react/igr-ts/date-time-input/index.ts
new file mode 100644
index 000000000..a614442f5
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-time-input/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDateTimeInputComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Date Time Input";
+		this.group = "Scheduling";
+		this.description = `an input field for editing date and time values with a customizable format`;
+	}
+}
+module.exports = new IgrDateTimeInputComponent();
diff --git a/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..33d3eacbf
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,20 @@
+import { useRef } from 'react';
+import style from './style.module.css';
+import { IgrDialog, IgrButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  const dialogRef = useRef<IgrDialog>(null);
+
+  return (
+    <div>
+      <h1 className={style.title}>Dialog</h1>
+      <div className={style.container}>
+        <IgrButton onClick={() => dialogRef.current?.show()}><span>Open Dialog</span></IgrButton>
+        <IgrDialog ref={dialogRef} title="Confirm action">
+          <p>Are you sure you want to proceed?</p>
+        </IgrDialog>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/dialog/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/dialog/default/index.ts b/packages/cli/templates/react/igr-ts/dialog/default/index.ts
new file mode 100644
index 000000000..84e79775a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/dialog/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrDialogTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Dialog"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "dialog";
+		this.projectType = "igr-ts";
+		this.name = "Dialog";
+		this.description = "basic IgrDialog";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrDialogTemplate();
diff --git a/packages/cli/templates/react/igr-ts/dialog/index.ts b/packages/cli/templates/react/igr-ts/dialog/index.ts
new file mode 100644
index 000000000..332f690c7
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/dialog/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDialogComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Dialog";
+		this.group = "Notifications";
+		this.description = `a modal dialog built on the native dialog element`;
+	}
+}
+module.exports = new IgrDialogComponent();
diff --git a/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..5cec09ae6
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrFileInput } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>File Input</h1>
+      <div className={style.container}>
+        <IgrFileInput label="Upload file" multiple={true} accept=".png,.jpg,.pdf" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/file-input/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/file-input/default/index.ts b/packages/cli/templates/react/igr-ts/file-input/default/index.ts
new file mode 100644
index 000000000..66b1c1c01
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/file-input/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrFileInputTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["File Input"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "file-input";
+		this.projectType = "igr-ts";
+		this.name = "File Input";
+		this.description = "basic IgrFileInput";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrFileInputTemplate();
diff --git a/packages/cli/templates/react/igr-ts/file-input/index.ts b/packages/cli/templates/react/igr-ts/file-input/index.ts
new file mode 100644
index 000000000..d61c3c613
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/file-input/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrFileInputComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "File Input";
+		this.group = "Data Entry & Display";
+		this.description = `an input field for selecting and uploading one or more files`;
+	}
+}
+module.exports = new IgrFileInputComponent();
diff --git a/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..cc78d3a15
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,16 @@
+import style from './style.module.css';
+import { IgrHighlight } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Highlight</h1>
+      <div className={style.container}>
+        <IgrHighlight searchText="world">
+          <p>Hello, world! The world is a wonderful place.</p>
+        </IgrHighlight>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/highlight/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/highlight/default/index.ts b/packages/cli/templates/react/igr-ts/highlight/default/index.ts
new file mode 100644
index 000000000..bfbee1eb4
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/highlight/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrHighlightTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Highlight"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "highlight";
+		this.projectType = "igr-ts";
+		this.name = "Highlight";
+		this.description = "basic IgrHighlight";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrHighlightTemplate();
diff --git a/packages/cli/templates/react/igr-ts/highlight/index.ts b/packages/cli/templates/react/igr-ts/highlight/index.ts
new file mode 100644
index 000000000..3318c8d29
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/highlight/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrHighlightComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Highlight";
+		this.group = "Interactions";
+		this.description = `highlights matches of a search text within its slotted content`;
+	}
+}
+module.exports = new IgrHighlightComponent();
diff --git a/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..46734aa54
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrMaskInput } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Mask Input</h1>
+      <div className={style.container}>
+        <IgrMaskInput label="Phone number" mask="(000) 0000-000" placeholder="Enter phone number" />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/mask-input/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/mask-input/default/index.ts b/packages/cli/templates/react/igr-ts/mask-input/default/index.ts
new file mode 100644
index 000000000..a988da8b2
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/mask-input/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrMaskInputTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Mask Input"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "mask-input";
+		this.projectType = "igr-ts";
+		this.name = "Mask Input";
+		this.description = "basic IgrMaskInput";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrMaskInputTemplate();
diff --git a/packages/cli/templates/react/igr-ts/mask-input/index.ts b/packages/cli/templates/react/igr-ts/mask-input/index.ts
new file mode 100644
index 000000000..856d0c25e
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/mask-input/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrMaskInputComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Mask Input";
+		this.group = "Data Entry & Display";
+		this.description = `an input field that formats and validates user input based on a configurable mask`;
+	}
+}
+module.exports = new IgrMaskInputComponent();
diff --git a/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..740f9ba2e
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrNavDrawer, IgrNavDrawerItem, IgrIcon } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Nav Drawer</h1>
+      <div className={style.container}>
+        <IgrNavDrawer position="relative" open={true}>
+          <IgrNavDrawerItem active={true}>
+            <IgrIcon slot="icon" name="home" collection="default" />
+            <span slot="content">Home</span>
+          </IgrNavDrawerItem>
+          <IgrNavDrawerItem>
+            <IgrIcon slot="icon" name="search" collection="default" />
+            <span slot="content">Search</span>
+          </IgrNavDrawerItem>
+          <IgrNavDrawerItem>
+            <IgrIcon slot="icon" name="settings" collection="default" />
+            <span slot="content">Settings</span>
+          </IgrNavDrawerItem>
+        </IgrNavDrawer>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/nav-drawer/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/nav-drawer/default/index.ts b/packages/cli/templates/react/igr-ts/nav-drawer/default/index.ts
new file mode 100644
index 000000000..6453b400f
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/nav-drawer/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrNavDrawerTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Nav Drawer"];
+		this.controlGroup = "Menus";
+		this.listInComponentTemplates = true;
+		this.id = "nav-drawer";
+		this.projectType = "igr-ts";
+		this.name = "Nav Drawer";
+		this.description = "basic IgrNavDrawer";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrNavDrawerTemplate();
diff --git a/packages/cli/templates/react/igr-ts/nav-drawer/index.ts b/packages/cli/templates/react/igr-ts/nav-drawer/index.ts
new file mode 100644
index 000000000..78979cad6
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/nav-drawer/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrNavDrawerComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Nav Drawer";
+		this.group = "Menus";
+		this.description = `a side navigation container for quick access between views within an application`;
+	}
+}
+module.exports = new IgrNavDrawerComponent();
diff --git a/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..0d7a94bc6
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
\ No newline at end of file
diff --git a/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..fd87e5042
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrRangeSlider } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Range Slider</h1>
+      <div className={style.container}>
+        <IgrRangeSlider lower={20} upper={80} min={0} max={100} primaryTicks={5} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..f2831061d
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/range-slider/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,14 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: center;
+  width: 100%;
+  box-sizing: border-box;
+}
+:local(.container) :global(igc-range-slider) {
+  width: min(100%, 480px);
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
\ No newline at end of file
diff --git a/packages/cli/templates/react/igr-ts/range-slider/default/index.ts b/packages/cli/templates/react/igr-ts/range-slider/default/index.ts
new file mode 100644
index 000000000..1d8191913
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/range-slider/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrRangeSliderTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Range Slider"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "range-slider";
+		this.projectType = "igr-ts";
+		this.name = "Range Slider";
+		this.description = "basic IgrRangeSlider";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrRangeSliderTemplate();
diff --git a/packages/cli/templates/react/igr-ts/range-slider/index.ts b/packages/cli/templates/react/igr-ts/range-slider/index.ts
new file mode 100644
index 000000000..83b15c5e7
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/range-slider/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrRangeSliderComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Range Slider";
+		this.group = "Interactions";
+		this.description = `lets a user select two numeric values within a range`;
+	}
+}
+module.exports = new IgrRangeSliderComponent();
diff --git a/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..f9d2bf14b
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,25 @@
+import style from './style.module.css';
+import { IgrSelect, IgrSelectGroup, IgrSelectItem } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Select</h1>
+      <div className={style.container}>
+        <IgrSelect label="Favorite city" placeholder="Choose a city">
+          <IgrSelectGroup>
+            <span slot="label">Europe</span>
+            <IgrSelectItem value="london">London</IgrSelectItem>
+            <IgrSelectItem value="paris">Paris</IgrSelectItem>
+          </IgrSelectGroup>
+          <IgrSelectGroup>
+            <span slot="label">North America</span>
+            <IgrSelectItem value="new-york">New York</IgrSelectItem>
+            <IgrSelectItem value="toronto">Toronto</IgrSelectItem>
+          </IgrSelectGroup>
+        </IgrSelect>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/select/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/select/default/index.ts b/packages/cli/templates/react/igr-ts/select/default/index.ts
new file mode 100644
index 000000000..2bb9fe9c0
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/select/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrSelectTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Select"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "select";
+		this.projectType = "igr-ts";
+		this.name = "Select";
+		this.description = "basic IgrSelect";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrSelectTemplate();
diff --git a/packages/cli/templates/react/igr-ts/select/index.ts b/packages/cli/templates/react/igr-ts/select/index.ts
new file mode 100644
index 000000000..804acd503
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/select/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrSelectComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Select";
+		this.group = "Data Entry & Display";
+		this.description = `a control that provides a menu of options to choose from`;
+	}
+}
+module.exports = new IgrSelectComponent();
diff --git a/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..8c139bc49
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrSnackbar } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Snackbar</h1>
+      <div className={style.container}>
+        <IgrSnackbar open={true} actionText="Undo">Message archived.</IgrSnackbar>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/snackbar/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/snackbar/default/index.ts b/packages/cli/templates/react/igr-ts/snackbar/default/index.ts
new file mode 100644
index 000000000..88c7bc0ca
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/snackbar/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrSnackbarTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Snackbar"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "snackbar";
+		this.projectType = "igr-ts";
+		this.name = "Snackbar";
+		this.description = "basic IgrSnackbar";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrSnackbarTemplate();
diff --git a/packages/cli/templates/react/igr-ts/snackbar/index.ts b/packages/cli/templates/react/igr-ts/snackbar/index.ts
new file mode 100644
index 000000000..5b05d2cb9
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/snackbar/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrSnackbarComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Snackbar";
+		this.group = "Notifications";
+		this.description = `provides brief feedback about an operation with an optional action`;
+	}
+}
+module.exports = new IgrSnackbarComponent();
diff --git a/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..4a312dec5
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,21 @@
+import style from './style.module.css';
+import { IgrSplitter } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div className={style.page}>
+      <h1 className={style.title}>Splitter</h1>
+      <IgrSplitter className={style.splitter}>
+        <section slot="start" className={style.pane}>
+          <h2>Overview</h2>
+          <p>Resize the panes to explore the layout.</p>
+        </section>
+        <section slot="end" className={style.pane}>
+          <h2>Details</h2>
+          <p>Content stays organized in independently sized regions.</p>
+        </section>
+      </IgrSplitter>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..90c245ac1
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/splitter/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,31 @@
+:local(.page) {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+
+:local(.title) {
+  margin: 0 0 20px;
+  color: rgb(0, 153, 255);
+}
+
+:local(.splitter) {
+  display: block;
+  height: 420px;
+}
+
+:local(.pane) {
+  height: 100%;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+:local(.pane) h2 {
+  margin: 0 0 8px;
+}
+
+:local(.pane) p {
+  margin: 0;
+}
diff --git a/packages/cli/templates/react/igr-ts/splitter/default/index.ts b/packages/cli/templates/react/igr-ts/splitter/default/index.ts
new file mode 100644
index 000000000..64cfaa1e3
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/splitter/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrSplitterTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Splitter"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "splitter";
+		this.projectType = "igr-ts";
+		this.name = "Splitter";
+		this.description = "basic IgrSplitter";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrSplitterTemplate();
diff --git a/packages/cli/templates/react/igr-ts/splitter/index.ts b/packages/cli/templates/react/igr-ts/splitter/index.ts
new file mode 100644
index 000000000..a60aeef0b
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/splitter/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrSplitterComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Splitter";
+		this.group = "Layouts";
+		this.description = `resizable split panes for arranging content`;
+	}
+}
+module.exports = new IgrSplitterComponent();
diff --git a/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..3c628d817
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrStepper, IgrStep } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Stepper</h1>
+      <div className={style.container}>
+        <IgrStepper>
+          <IgrStep complete={true}>
+            <span slot="title">Destination</span>
+            <p>Choose where you want to travel.</p>
+          </IgrStep>
+          <IgrStep active={true}>
+            <span slot="title">Travelers</span>
+            <p>Add the details for each traveler.</p>
+          </IgrStep>
+          <IgrStep>
+            <span slot="title">Payment</span>
+            <p>Review your trip and complete the payment.</p>
+          </IgrStep>
+        </IgrStepper>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/stepper/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/stepper/default/index.ts b/packages/cli/templates/react/igr-ts/stepper/default/index.ts
new file mode 100644
index 000000000..737e1b123
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/stepper/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrStepperTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Stepper"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "stepper";
+		this.projectType = "igr-ts";
+		this.name = "Stepper";
+		this.description = "basic IgrStepper";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrStepperTemplate();
diff --git a/packages/cli/templates/react/igr-ts/stepper/index.ts b/packages/cli/templates/react/igr-ts/stepper/index.ts
new file mode 100644
index 000000000..678026f92
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/stepper/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrStepperComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Stepper";
+		this.group = "Layouts";
+		this.description = `divides content into logical steps within a wizard-like workflow`;
+	}
+}
+module.exports = new IgrStepperComponent();
diff --git a/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..e8ecb4773
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,18 @@
+import style from './style.module.css';
+import { IgrButton, IgrThemeProvider } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div className={style.page}>
+      <h1 className={style.title}>Theme Provider</h1>
+      <IgrThemeProvider theme="bootstrap">
+        <section className={style.example}>
+          <h2>Application theme</h2>
+          <p>Descendant components inherit the theme from the provider.</p>
+          <IgrButton variant="contained">Themed button</IgrButton>
+        </section>
+      </IgrThemeProvider>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..29ee89a18
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/theme-provider/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,25 @@
+:local(.page) {
+  width: 100%;
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 32px 24px 40px;
+  box-sizing: border-box;
+}
+
+:local(.title) {
+  margin: 0 0 20px;
+  color: rgb(0, 153, 255);
+}
+
+:local(.example) {
+  padding: 24px;
+  border: 1px solid var(--ig-gray-300);
+}
+
+:local(.example) h2 {
+  margin: 0 0 8px;
+}
+
+:local(.example) p {
+  margin: 0 0 20px;
+}
diff --git a/packages/cli/templates/react/igr-ts/theme-provider/default/index.ts b/packages/cli/templates/react/igr-ts/theme-provider/default/index.ts
new file mode 100644
index 000000000..110407a3c
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/theme-provider/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrThemeProviderTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Theme Provider"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "theme-provider";
+		this.projectType = "igr-ts";
+		this.name = "Theme Provider";
+		this.description = "basic IgrThemeProvider";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrThemeProviderTemplate();
diff --git a/packages/cli/templates/react/igr-ts/theme-provider/index.ts b/packages/cli/templates/react/igr-ts/theme-provider/index.ts
new file mode 100644
index 000000000..8a7474f79
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/theme-provider/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrThemeProviderComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Theme Provider";
+		this.group = "Layouts";
+		this.description = `provides theme and palette settings to descendant components`;
+	}
+}
+module.exports = new IgrThemeProviderComponent();
diff --git a/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..36cfd471b
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrTileManager, IgrTile } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Tile Manager</h1>
+      <div className={style.container}>
+        <IgrTileManager columnCount={3}>
+          <IgrTile colSpan={1} rowSpan={1}>
+            <span slot="title">Revenue</span>
+            <p>$120,430</p>
+          </IgrTile>
+          <IgrTile colSpan={1} rowSpan={1}>
+            <span slot="title">Active Users</span>
+            <p>8,240</p>
+          </IgrTile>
+          <IgrTile colSpan={1} rowSpan={1}>
+            <span slot="title">Support Tickets</span>
+            <p>12</p>
+          </IgrTile>
+        </IgrTileManager>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tile-manager/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/tile-manager/default/index.ts b/packages/cli/templates/react/igr-ts/tile-manager/default/index.ts
new file mode 100644
index 000000000..b63cd9467
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tile-manager/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrTileManagerTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Tile Manager"];
+		this.controlGroup = "Layouts";
+		this.listInComponentTemplates = true;
+		this.id = "tile-manager";
+		this.projectType = "igr-ts";
+		this.name = "Tile Manager";
+		this.description = "basic IgrTileManager";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrTileManagerTemplate();
diff --git a/packages/cli/templates/react/igr-ts/tile-manager/index.ts b/packages/cli/templates/react/igr-ts/tile-manager/index.ts
new file mode 100644
index 000000000..2cbd63126
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tile-manager/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrTileManagerComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Tile Manager";
+		this.group = "Layouts";
+		this.description = `enables dynamic arrangement, resizing and interaction of dashboard-like tiles`;
+	}
+}
+module.exports = new IgrTileManagerComponent();
diff --git a/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..7035b61c1
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrToast } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Toast</h1>
+      <div className={style.container}>
+        <IgrToast open={true}>File saved successfully.</IgrToast>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toast/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/toast/default/index.ts b/packages/cli/templates/react/igr-ts/toast/default/index.ts
new file mode 100644
index 000000000..e14f83b86
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toast/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrToastTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Toast"];
+		this.controlGroup = "Notifications";
+		this.listInComponentTemplates = true;
+		this.id = "toast";
+		this.projectType = "igr-ts";
+		this.name = "Toast";
+		this.description = "basic IgrToast";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrToastTemplate();
diff --git a/packages/cli/templates/react/igr-ts/toast/index.ts b/packages/cli/templates/react/igr-ts/toast/index.ts
new file mode 100644
index 000000000..7b4e0c1a0
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toast/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrToastComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Toast";
+		this.group = "Notifications";
+		this.description = `displays a brief, non-interactive notification`;
+	}
+}
+module.exports = new IgrToastComponent();
diff --git a/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..02e29be0f
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,16 @@
+import style from './style.module.css';
+import { IgrToggleButton } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Toggle Button</h1>
+      <div className={style.container}>
+        <IgrToggleButton value="bold" selected={true}><span>Bold</span></IgrToggleButton>
+        <IgrToggleButton value="italic"><span>Italic</span></IgrToggleButton>
+        <IgrToggleButton value="underline"><span>Underline</span></IgrToggleButton>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toggle-button/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/toggle-button/default/index.ts b/packages/cli/templates/react/igr-ts/toggle-button/default/index.ts
new file mode 100644
index 000000000..d8ee6f302
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toggle-button/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrToggleButtonTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Toggle Button"];
+		this.controlGroup = "Data Entry & Display";
+		this.listInComponentTemplates = true;
+		this.id = "toggle-button";
+		this.projectType = "igr-ts";
+		this.name = "Toggle Button";
+		this.description = "basic IgrToggleButton";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrToggleButtonTemplate();
diff --git a/packages/cli/templates/react/igr-ts/toggle-button/index.ts b/packages/cli/templates/react/igr-ts/toggle-button/index.ts
new file mode 100644
index 000000000..22a66bb1c
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/toggle-button/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrToggleButtonComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Toggle Button";
+		this.group = "Data Entry & Display";
+		this.description = `a button that exposes selected state, usable standalone or within a button group`;
+	}
+}
+module.exports = new IgrToggleButtonComponent();
diff --git a/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.test.tsx
@@ -0,0 +1,13 @@
+import { beforeAll, expect, test } from 'vitest';
+import { render } from '@testing-library/react';
+import $(ClassName) from './$(path)';
+import { setupTestMocks } from '../../setupTests';
+
+beforeAll(() => {
+  setupTestMocks();
+})
+
+test('renders $(ClassName) component', () => {
+  const wrapper = render(<$(ClassName) />);
+  expect(wrapper).toBeTruthy();
+});
diff --git a/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..b79c0b839
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,15 @@
+import style from './style.module.css';
+import { IgrTooltip } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+  return (
+    <div>
+      <h1 className={style.title}>Tooltip</h1>
+      <div className={style.container}>
+        <button id="tooltip-anchor">Hover me</button>
+        <IgrTooltip anchor="tooltip-anchor" message="This is a helpful tooltip message." open={true} />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tooltip/default/files/src/app/__path__/style.module.css
@@ -0,0 +1,9 @@
+:local(.container) {
+  padding-top: 24px;
+  display: flex;
+  flex-flow: row;
+  justify-content: space-around;
+}
+:local(.title) {
+  color: rgb(0, 153, 255);
+}
diff --git a/packages/cli/templates/react/igr-ts/tooltip/default/index.ts b/packages/cli/templates/react/igr-ts/tooltip/default/index.ts
new file mode 100644
index 000000000..ff3baf9e6
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tooltip/default/index.ts
@@ -0,0 +1,17 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+import { IGNITEUI_REACT_PACKAGE } from "../../constants";
+
+class IgrTooltipTemplate extends IgniteUIForReactTemplate {
+	constructor() {
+		super(__dirname);
+		this.components = ["Tooltip"];
+		this.controlGroup = "Interactions";
+		this.listInComponentTemplates = true;
+		this.id = "tooltip";
+		this.projectType = "igr-ts";
+		this.name = "Tooltip";
+		this.description = "basic IgrTooltip";
+		this.packages = [IGNITEUI_REACT_PACKAGE];
+	}
+}
+module.exports = new IgrTooltipTemplate();
diff --git a/packages/cli/templates/react/igr-ts/tooltip/index.ts b/packages/cli/templates/react/igr-ts/tooltip/index.ts
new file mode 100644
index 000000000..c69e75edc
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/tooltip/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrTooltipComponent extends BaseComponent {
+	constructor() {
+		super(__dirname);
+		this.name = "Tooltip";
+		this.group = "Interactions";
+		this.description = `displays supplementary information for an element on hover or focus`;
+	}
+}
+module.exports = new IgrTooltipComponent();