diff --git a/Jenkinsfile b/Jenkinsfile
index acb3d19f59..ba9c7df118 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -74,7 +74,7 @@ if(currentBuild.result != 'FAILURE')
stage 'Delete Workspace'
- def files = findFiles(glob: '**/cireports/*.*')
+ def files = findFiles(glob: '**/cireports/spellcheck/*.*')
if(files.size() > 0)
{
diff --git a/ej2-react-toc.html b/ej2-react-toc.html
index 94c4cef118..c8344cf32c 100644
--- a/ej2-react-toc.html
+++ b/ej2-react-toc.html
@@ -22,7 +22,7 @@
Skills
Agentic UI Builder
Release Notes
-
+
Getting Started
@@ -97,6 +97,7 @@
Styled Component Support
CSS Variables
Figma UI Kits
+ Migration to Theme Packages
@@ -267,6 +268,8 @@
Toolbar items
Custom views
File attachments
+ Chain of Thoughts
+ Generative UI
Templates
Speech
- Connecting to Adaptors
+ Connecting to Adaptors
@@ -3185,6 +3189,7 @@
Release Notes
+ - 2026 Volume 2 - 34.*
- 2026 Volume 1 - 33.*
- Weekly Release
diff --git a/ej2-react/Release-notes/29.2.4.md b/ej2-react/Release-notes/29.2.4.md
index 4b8ee3a693..0f9c53b869 100644
--- a/ej2-react/Release-notes/29.2.4.md
+++ b/ej2-react/Release-notes/29.2.4.md
@@ -31,7 +31,7 @@ documentation: ug
| ButtonGroup | 120 | 120 | 0 | All Passed |
| calendar | 177 | 177 | 0 | All Passed |
| Carousel | 61 | 61 | 0 | All Passed |
-| Chart | 3666 | 3666 | 0 | All Passed |
+| Chart | 4490 | 4490 | 0 | All Passed |
| Chat UI | 184 | 184 | 0 | All Passed |
| Checkbox | 216 | 216 | 0 | All Passed |
| CircularGauge | 283 | 283 | 0 | All Passed |
diff --git a/ej2-react/appearance/icons.md b/ej2-react/appearance/icons.md
index 943c3a4299..87df1f608e 100644
--- a/ej2-react/appearance/icons.md
+++ b/ej2-react/appearance/icons.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Predefined icons library in Syncfusion® React components
+# Predefined icons library in Syncfusion® React components
Syncfusion's icon library provides an extensive collection of pre-designed, font-based icons (embedded as base64 in themes) to enhance user interfaces in React applications. These icons ensure visual consistency across Syncfusion components and are available via npm or CDN with minimal setup.
@@ -21,29 +21,56 @@ Icons can be included in a React application using the following methods:
### The npm package
-Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package on npm. The package includes CSS/SCSS files for all supported themes.
+Syncfusion theme icons are distributed in the [@syncfusion/ej2-icons](https://www.npmjs.com/package/@syncfusion/ej2-icons) package and as well as through all theme packages such as [@syncfusion/ej2-tailwind3-theme](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) available on npm. These packages include CSS/SCSS files for all supported themes.
Install the package:
-```bash
-npm install @syncfusion/ej2-icons
-```
+{% tabs %}
+{% highlight bash tabtitle="Theme Package" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="Icon Package" %}
+
+npm install @syncfusion/ej2-icons --save
+
+{% endhighlight %}
+{% endtabs %}
Then import the desired theme’s icon stylesheet in your application:
`[src/App.css]`
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2--theme/styles/icons/.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Icon Package" %}
+
@import "../node_modules/@syncfusion/ej2-icons/styles/.css";
-```
-> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).
+{% endhighlight %}
+{% endtabs %}
+
+> To apply these styles, ensure you import `App.css` in your `src/App.tsx` (or equivalent entry file).`
**Example:**
-```css
+{% tabs %}
+{% highlight css tabtitle="Theme Package" %}
+
+@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/icons/tailwind3.css";
+
+{% endhighlight %}
+{% highlight css tabtitle="Component Package" %}
+
@import "../node_modules/@syncfusion/ej2-icons/styles/tailwind3.css";
-```
+
+{% endhighlight %}
+{% endtabs %}
### CDN reference
diff --git a/ej2-react/appearance/theme.md b/ej2-react/appearance/theme.md
index 27d80f54af..a0a33c33b2 100644
--- a/ej2-react/appearance/theme.md
+++ b/ej2-react/appearance/theme.md
@@ -1,14 +1,14 @@
---
layout: post
title: Theme in React Appearance component | Syncfusion
-description: Learn all about built-in themes including Tailwind 3.4, Material 3, Fluent 2, Bootstrap 5.3 in Syncfusion React (Essential JS 2) components, optimized CSS, and customization options.
+description: Explore Syncfusion React built-in themes including Tailwind 3.4, Material 3, Fluent 2, and Bootstrap 5.3 with optimized CSS and customization options.
control: Theme
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
---
-# React Themes in Syncfusion® Components
+# React Themes in Syncfusion® Components
Syncfusion® React UI components provide a comprehensive set of built-in themes to deliver a consistent, modern, and visually appealing appearance across applications. The following table lists all currently supported themes in the Syncfusion® React components library:
@@ -39,13 +39,32 @@ Syncfusion® React UI components provide a c
> The Syncfusion® React Bootstrap theme is based on Bootstrap v3, while the Bootstrap 4, Bootstrap 5, and Bootstrap 5.3 themes are aligned with their respective Bootstrap framework versions. In addition to these built-in themes, the [ThemeStudio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio) supports the Fusion theme, which can be customized and downloaded exclusively from [Theme Studio](https://ej2.syncfusion.com/themestudio/?theme=fusion).
+## Theme packages
+
+Syncfusion built-in themes are distributed as theme packages available on npm. These packages include CSS/SCSS files for all components. The following table lists all available theme packages:
+
+| Theme | Light Package | Dark Package |
+|-------|---------------|---------------|
+| Tailwind 3 | [`@syncfusion/ej2-tailwind3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) | [`@syncfusion/ej2-tailwind3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-dark-theme) |
+| Bootstrap 5.3 | [`@syncfusion/ej2-bootstrap5.3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-theme) | [`@syncfusion/ej2-bootstrap5.3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5.3-dark-theme) |
+| Fluent 2 | [`@syncfusion/ej2-fluent2-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [`@syncfusion/ej2-fluent2-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| Material 3 | [`@syncfusion/ej2-material3-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [`@syncfusion/ej2-material3-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+| Bootstrap 5 | [`@syncfusion/ej2-bootstrap5-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-theme) | [`@syncfusion/ej2-bootstrap5-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap5-dark-theme) |
+| Bootstrap 4 | [`@syncfusion/ej2-bootstrap4-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap4-theme) | - |
+| Bootstrap | [`@syncfusion/ej2-bootstrap-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-theme) | [`@syncfusion/ej2-bootstrap-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-bootstrap-dark-theme) |
+| Material | [`@syncfusion/ej2-material-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-theme) | [`@syncfusion/ej2-material-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-material-dark-theme) |
+| Tailwind | [`@syncfusion/ej2-tailwind-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-theme) | [`@syncfusion/ej2-tailwind-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-tailwind-dark-theme) |
+| Fluent | [`@syncfusion/ej2-fluent-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-theme) | [`@syncfusion/ej2-fluent-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fluent-dark-theme) |
+| Fabric | [`@syncfusion/ej2-fabric-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-theme) | [`@syncfusion/ej2-fabric-dark-theme`](https://www.npmjs.com/package/@syncfusion/ej2-fabric-dark-theme) |
+| High Contrast | [`@syncfusion/ej2-highcontrast-theme`](https://www.npmjs.com/package/@syncfusion/ej2-highcontrast-theme) | - |
+
## Optimized CSS files
Syncfusion® components support two size modes in each theme: **normal** (default) and **bigger**. The normal size mode provides the standard appearance suitable for most devices and scenarios. The bigger size mode increases the size of UI elements to enhance readability, touch interaction, and accessibility — particularly useful for high-resolution displays or touch-based applications.
Below is a comparison of the Button component in normal and bigger size modes:
-
+
Each complete theme stylesheet includes styles for both size modes, which increases the file size. To optimize performance in applications that do not need the bigger size mode, Syncfusion provides optimized (lite) theme variants that include only normal size styles. These lite files significantly reduce CSS size and improve application load times.
@@ -68,94 +87,86 @@ For better maintainability, customization, and bundle optimization, prefer the *
## Refer themes through npm packages
-Themes are shipped as both combined and individual CSS/SCSS files. Combined files are available in the `@syncfusion/ej2` package, while component-specific files are located in each component package’s `styles` folder. Both CSS and SCSS formats are provided.
+Themes are shipped as both combined and individual CSS/SCSS files. Each theme package includes Combined and component-specific styles in both CSS and SCSS formats. For a list of available theme packages, refer to the [available theme packages](#theme-packages) section.
-To use the combined CSS files, install the `ej2` package:
+To use the combined SCSS/CSS files, install the required theme package.
```bash
- npm install @syncfusion/ej2
+npm install @syncfusion/ej2-material3-theme
```
**Referring all components CSS**
```css
-@import "./node_modules/@syncfusion/ej2/.css";
+@import "@syncfusion/ej2--theme/styles/.css";
```
-**Referring all components SCSS**
+**Example:**
```css
-@import "./node_modules/@syncfusion/ej2/.scss";
+@import "@syncfusion/ej2-material3-theme/styles/material3.css";
```
-### Referring to individual component theme
-
-You can reference individual component themes either from dedicated component packages or from the unified `@syncfusion/ej2` package.
-
-**From individual package** (recommended for smallest possible bundle):
+**Referring all components SCSS**
-```css
-@import "/styles/.scss";
-@import "ej2-react-buttons/styles/button/.scss";
+```scss
+@use "@syncfusion/ej2--theme/styles/.scss" as *;
```
**Example:**
-```css
-@import "ej2-base/styles/tailwind3.scss";
-@import "ej2-react-buttons/styles/button/tailwind3.scss";
+```scss
+@use "@syncfusion/ej2-material3-theme/styles/material3.scss" as *;
```
-> The `ej2-base` package contains shared styles required by all Syncfusion® React components and must be imported first.
+### Referring to individual component theme
-**From `@syncfusion/ej2` package:**
+You can reference individual component themes from the unified theme package. In this package, each component includes an `index.css/index.scss` files that automatically loads all the required dependency styles.
```css
-@import "ej2//.scss";
-@import "ej2/button/.scss";
+@import "@syncfusion/ej2--theme/styles//index.css";
```
**Example:**
```css
-@import "ej2/base/tailwind3.scss";
-@import "ej2/button/tailwind3.scss";
+@import "@syncfusion/ej2-material3-theme/styles/grid/index.css";
```
### Referring all components optimized CSS file
-To reference optimized (lite) versions of all components from the `@syncfusion/ej2` package:
+To reference optimized (lite) versions of all component styles using theme packages.
```css
-@import "@syncfusion/ej2/-lite.css";
+@import "@syncfusion/ej2--theme/styles/-lite.css";
/* or */
-@import "@syncfusion/ej2/-lite.scss";
+@use "@syncfusion/ej2--theme/styles/-lite.scss" as *;
```
**Example:**
```css
-@import "@syncfusion/ej2/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.css";
/* or */
-@import "@syncfusion/ej2/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/fluent2-lite.scss" as *;
```
### Referring individual component optimized CSS file
-From individual component packages:
+From individual component styles:
```css
-@import "/styles/-lite.css";
+@import "@syncfusion/ej2--theme/styles//index-lite.css";
/* or */
-@import "/styles/-lite.scss";
+@use "@syncfusion/ej2--theme/styles//index-lite.scss" as *;
```
**Example:**
```css
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.css";
+@import "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.css";
/* or */
-@import "@syncfusion/ej2-buttons/styles/fluent2-lite.scss";
+@use "@syncfusion/ej2-fluent2-theme/styles/grid/index-lite.scss" as *;
```
### Advantages of individual components theme
diff --git a/ej2-react/common/material-UI.md b/ej2-react/common/material-UI.md
index d8c1629f60..4b9d4c6319 100644
--- a/ej2-react/common/material-UI.md
+++ b/ej2-react/common/material-UI.md
@@ -1,6 +1,6 @@
---
layout: post
-title: Integration of Material-UI Components with Syncfusion React Grid | Syncfusion
+title: Integration of MUI Components with Syncfusion React Grid | Syncfusion
description: Learn how to integrate Material-UI components with Syncfusion React Grid using column templates for a consistent Material-themed user interface.
control: MaterialUI
platform: ej2-react
@@ -37,7 +37,7 @@ import * as React from 'react';
import { useState } from 'react';
import { GridComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-grids';
import { Button } from '@mui/material';
-import '@syncfusion/ej2-react-grids/styles/material.css';
+import '@syncfusion/ej2-material-theme/styles/grid/index.css';
const dataSource = [
{
diff --git a/ej2-react/common/redux-form.md b/ej2-react/common/redux-form.md
index 485d45214f..ad3b1672cd 100644
--- a/ej2-react/common/redux-form.md
+++ b/ej2-react/common/redux-form.md
@@ -8,7 +8,7 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Integration of Syncfusion® React Components in Redux Form
+# Integration of Syncfusion® React Components in Redux Form
[Redux Form](https://redux-form.com/) is a library for managing form state in React applications. It integrates with the Redux state management library ([Redux Store](https://redux.js.org/api/store)) and provides a straightforward way to handle form inputs, validation, submission, and synchronization with Redux.
@@ -119,10 +119,10 @@ export default LoginForm = reduxForm({
To incorporate Syncfusion® React components (DatePicker, TextBox, Button) into the login form, follow these steps:
-1. Install the required Syncfusion packages:
+1. Install the required Syncfusion components packages and needed theme package:
```bash
-npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfusion/ej2-react-buttons --save
+npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfusion/ej2-react-buttons @syncfusion/ej2-tailwind3-theme --save
```
2. Import the Syncfusion theme stylesheet in **App.js** to ensure proper component styling:
@@ -131,10 +131,8 @@ npm install @syncfusion/ej2-react-calendars @syncfusion/ej2-react-inputs @syncfu
{% highlight js tabtitle="App.js" %}
import './App.css';
-import '@syncfusion/ej2-base/styles/tailwind3.css';
-import '@syncfusion/ej2-react-inputs/styles/tailwind3.css';
-import '@syncfusion/ej2-react-calendars/styles/tailwind3.css';
-import '@syncfusion/ej2-react-buttons/styles/tailwind3.css';
+import '@syncfusion/ej2-tailwind3-theme/styles/textbox/index.css';
+import '@syncfusion/ej2-tailwind3-theme/styles/datepicker/index.css';
import LoginForm from "./LoginForm";
{% endhighlight %}
diff --git a/ej2-react/ui-kit/images/local-development-server-running.PNG b/ej2-react/ui-kit/images/local-development-server-running.PNG
index 6aa2ff7834..e10b61f509 100644
Binary files a/ej2-react/ui-kit/images/local-development-server-running.PNG and b/ej2-react/ui-kit/images/local-development-server-running.PNG differ
diff --git a/ej2-react/ui-kit/overview.md b/ej2-react/ui-kit/overview.md
index dd71a1cc43..9592236e44 100644
--- a/ej2-react/ui-kit/overview.md
+++ b/ej2-react/ui-kit/overview.md
@@ -21,7 +21,7 @@ The Essential® UI Kit for React comprises o
| Authentication |
|