diff --git a/packages/cli/templates/react/igr-ts/accordion/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/accordion/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/accordion/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/accordion/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/accordion/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..355e8f05b
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/accordion/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,27 @@
+import style from './style.module.css';
+import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+
Accordion
+
+
+
+ Ignite UI for React
+ Ignite UI for React is a complete library of UI components, giving you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach.
+
+
+ Ignite UI for Angular
+ Ignite UI for Angular is a complete set of Material-based UI Widgets, Components and Sketch UI kits by Infragistics.
+
+
+ Ignite UI for Web Components
+ Ignite UI for Web Components is a complete library of UI components, giving you the ability to build modern web applications.
+
+
+
+
+
Badge
+
+ Awaiting test
+ Critical issue
+ Verified
+
+
+
Banner
+
+
+ You are currently not logged in! Please, log into your account first.
+
+
+
+
Button Group
+
+
+ Left Center Right
+
+
+
Button
+
+ Large button
+
+
Card
+
+
+
+ New York City
+ City Guide
+
+
+ New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that's among the world's major commercial, financial and cultural centers.
+
+
+ Like Learn More
+
+
+
+
Chip
+
+ Chip Content
+
+
+
Circular Progress
+
+
+
) => {
+ event.preventDefault();
+ const form = event.target as HTMLFormElement;
+ const formData = new FormData(form);
+ const entries = Array.from(formData.entries());
+ const result = entries.map(([key, value]) => `${key}=${value}`).join('; ');
+ alert(result);
+ };
+
+ return (
+
+ );
+}
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/style.module.css
new file mode 100644
index 000000000..1bcd0e328
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/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/custom-templates/subscription-form/index.ts b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/index.ts
new file mode 100644
index 000000000..0a9c73063
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/index.ts
@@ -0,0 +1,15 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrSubscriptionFormTemplate extends IgniteUIForReactTemplate {
+constructor() {
+super(__dirname);
+this.listInComponentTemplates = false;
+this.listInCustomTemplates = true;
+this.id = "subscription-form";
+this.projectType = "igr-ts";
+this.name = "Subscription Form";
+this.description = "Subscription form with inputs, buttons and a checkbox inside";
+this.packages = ["igniteui-react@~19.5.2"];
+}
+}
+module.exports = new IgrSubscriptionFormTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/date-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-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-picker/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..d55d2ed7f
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,14 @@
+import style from './style.module.css';
+import { IgrDatePicker } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+ );
+}
diff --git a/packages/cli/templates/react/igr-ts/date-picker/default/files/src/app/__path__/style.module.css b/packages/cli/templates/react/igr-ts/date-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-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-picker/default/index.ts b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
new file mode 100644
index 000000000..cbe37f48a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/default/index.ts
@@ -0,0 +1,16 @@
+import { IgniteUIForReactTemplate } from "../../../../../lib/templates/IgniteUIForReactTemplate";
+
+class IgrDatePickerTemplate extends IgniteUIForReactTemplate {
+constructor() {
+super(__dirname);
+this.components = ["Date Picker"];
+this.controlGroup = "Scheduling";
+this.listInComponentTemplates = true;
+this.id = "date-picker";
+this.projectType = "igr-ts";
+this.name = "Date Picker";
+this.description = "basic IgrDatePicker";
+this.packages = ["igniteui-react@~19.5.2"];
+}
+}
+module.exports = new IgrDatePickerTemplate();
diff --git a/packages/cli/templates/react/igr-ts/date-picker/index.ts b/packages/cli/templates/react/igr-ts/date-picker/index.ts
new file mode 100644
index 000000000..d4616ec23
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/date-picker/index.ts
@@ -0,0 +1,11 @@
+import { BaseComponent } from "@igniteui/cli-core";
+
+class IgrDatePickerComponent extends BaseComponent {
+constructor() {
+super(__dirname);
+this.name = "Date Picker";
+this.group = "Scheduling";
+this.description = `displays date picker component`;
+}
+}
+module.exports = new IgrDatePickerComponent();
diff --git a/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.test.tsx b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.test.tsx
new file mode 100644
index 000000000..854681a3a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/divider/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/divider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
new file mode 100644
index 000000000..4e1e2876a
--- /dev/null
+++ b/packages/cli/templates/react/igr-ts/divider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -0,0 +1,18 @@
+import style from './style.module.css';
+import { IgrDivider } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+export default function $(ClassName)() {
+ return (
+
+
Divider
+
+
+
Content above
+
+
Content below
+
+
+
+
Dropdown
+
+
+ Options Option 1 Option 2 Option 3
+
+
+
Expansion Panel
+
+
+ Expansion Panel Title
+ This is the content of the expansion panel. Click the header to expand or collapse this section.
+
+
+
+
Icon
+
+
+ Home icon:
+
+
+ Search icon:
+
+
+
+
Input
+
+
+ This is some helper text
+
+
+
+
List
+
+
+ Job Positions
+ Abraham Lee
+ Software Developer
+
+
+ John Smith
+ Team Lead
+
+
+ Jonathan Deberkow
+ UX Designer
+
+
+
+
+
Navbar
+
+
+ Home
+
+
+
+
Radio Group
+
+
+ Banana
+ Orange
+ Mango
+
+
+
+
Ripple
+
+
+ Button with ripple
+
+
+
+
Tabs
+
+
+
+ Sgt. Peppers Lonely Hearts Club Band
+ The Dark Side of the Moon
+ Thriller
+
+
+ The Dark Side of the Moon
+ Led Zeppelin IV
+
+
+ No content available
+
+
+
+
+
Tree
+
+
+
+
+
+
+
+
+
+
+