fix: use igniteui-webcomponents/themes instead of igniteui-react/themes for all React component templates

Copilot · damyanpetev · web-flow · commit 87759d43fc03 · 2026-03-30T14:02:23.000Z
Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/7d42465f-2e0a-4fcc-b339-d251517bf700 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
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
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrAccordion, IgrExpansionPanel } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/avatar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrAvatar } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/badge/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrBadge } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/banner/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/banner/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrBanner } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/button-group/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/button-group/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrButtonGroup, IgrToggleButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/button/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/calendar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/calendar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrCalendar } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/card/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/card/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrCard, IgrCardHeader, IgrCardContent, IgrCardActions, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/checkbox/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/checkbox/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrCheckbox } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/chip/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/chip/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrChip } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/circular-progress/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrCircularProgress } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/custom-templates/subscription-form/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
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
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrDatePicker } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
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
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrDivider } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/dropdown/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrDropdown, IgrDropdownItem, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/expansion-panel/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrExpansionPanel } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/form/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrInput, IgrRadioGroup, IgrRadio } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/icon-button/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrIconButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/icon/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrIcon } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/input/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrInput } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/linear-progress/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrLinearProgress } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/list/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrList, IgrListItem, IgrListHeader, IgrAvatar, IgrButton } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/navbar/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrNavbar } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/radio-group/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrRadioGroup, IgrRadio } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/rating/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrRating } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/ripple/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrButton, IgrRipple } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/slider/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrSlider } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/switch/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrSwitch } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tabs/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrTabs, IgrTab, IgrTabPanel } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/text-area/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrTextarea } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
diff --git a/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx b/packages/cli/templates/react/igr-ts/tree/default/files/src/app/__path__/__filePrefix__.tsx
@@ -1,6 +1,6 @@
 import style from './style.module.css';
 import { IgrTree, IgrTreeItem } from 'igniteui-react';
-import 'igniteui-react/themes/light/bootstrap.css';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 export default function $(ClassName)() {
   return (
