diff --git a/Jenkinsfile b/Jenkinsfile
index ba9c7df118..acb3d19f59 100644
--- a/Jenkinsfile
+++ b/Jenkinsfile
@@ -74,7 +74,7 @@ if(currentBuild.result != 'FAILURE')
stage 'Delete Workspace'
- def files = findFiles(glob: '**/cireports/spellcheck/*.*')
+ def files = findFiles(glob: '**/cireports/*.*')
if(files.size() > 0)
{
diff --git a/ej2-react-toc.html b/ej2-react-toc.html
index 9a19125eb3..97a36f6ce5 100644
--- a/ej2-react-toc.html
+++ b/ej2-react-toc.html
@@ -372,7 +372,7 @@
Code Blocks
- Collaborative Editing
+ Real-time Collaboration
Editor Menus
Drag and drop
Paste Cleanup
@@ -1416,7 +1416,8 @@
Preact
- Feature Modules
+ Feature Modules
+ Security
Assistive Grid
Scrolling
@@ -1610,6 +1613,7 @@
Working With Data
Bubble HeatMap
Rendering Modes
+Title
Axis
Palette
Legend
@@ -2038,7 +2042,7 @@
Appearance
Accessibility
Events
- API Reference
+ API Reference
Pager
@@ -2058,6 +2062,16 @@
Data Binding
+Connecting to Adaptors
+
+
Connecting to data source
- MySQL
@@ -3193,7 +3207,7 @@
Release Notes
- - 2026 Volume 2 - 34.*
+ - 2026 Volume 2 - 34.*
- 2026 Volume 1 - 33.*
- Weekly Release
diff --git a/ej2-react/3d-chart/appearance.md b/ej2-react/3d-chart/appearance.md
index 5e64623fd4..6e7d1d0aab 100644
--- a/ej2-react/3d-chart/appearance.md
+++ b/ej2-react/3d-chart/appearance.md
@@ -127,18 +127,18 @@ The 3D chart can be rotated by using the [`enableRotation`](https://helpej2.sync
## Title
-The 3D chart can be given a title by using [`title`](https://helpej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property, to show the information about the data plotted.
+You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
{% tabs %}
{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.jsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx %}
{% endhighlight %}
{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/3d-chart/appearance/appearance-cs8/app/index.tsx %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/3d-chart/appearance/appearance-cs8" %}
+{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs3" %}
### Title position
diff --git a/ej2-react/3d-chart/getting-started.md b/ej2-react/3d-chart/getting-started.md
index 4585e29ba7..f49a48b616 100644
--- a/ej2-react/3d-chart/getting-started.md
+++ b/ej2-react/3d-chart/getting-started.md
@@ -1,8 +1,8 @@
---
layout: post
title: Getting started with React 3D Chart component | Syncfusion
-description: Checkout and learn about Getting started with React 3D Chart component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+description: Check out and learn about the Getting started with the React 3D Chart component of Syncfusion Essential JS 2 and more details.
+control: Getting started
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
@@ -10,77 +10,83 @@ domainurl: ##DomainURL##
# Getting started with React 3D Chart component
-This section describes the steps to create a simple 3D Chart and demonstrates the basic usage of the 3D Chart component.
+This section describes the steps to create a simple 3D Chart component and demonstrates its basic usage.
A quick video overview of the React 3D Charts setup is available:
{% youtube "https://www.youtube.com/watch?v=S3SPJYF4Fw8" %}
+## Prerequisites
+
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement). That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.
+
## Dependencies
-Below is the list of minimum dependencies required to use the 3D Chart component.
+When you install `@syncfusion/ej2-react-charts`, the following peer dependencies are installed automatically:
```
|-- @syncfusion/ej2-react-charts
- |-- @syncfusion/ej2-data
- |-- @syncfusion/ej2-react-base
- |-- @syncfusion/ej2-pdf-export
- |-- @syncfusion/ej2-file-utils
- |-- @syncfusion/ej2-compression
- |-- @syncfusion/ej2-svg-base
+ |-- @syncfusion/ej2-data — utilities for working with data sources.
+ |-- @syncfusion/ej2-react-base — base classes shared by all Syncfusion React components.
+ |-- @syncfusion/ej2-pdf-export — PDF export support.
+ |-- @syncfusion/ej2-file-utils — file handling for export features.
+ |-- @syncfusion/ej2-compression — compression utilities used by exports.
+ |-- @syncfusion/ej2-svg-base — SVG rendering base used by chart visuals.
```
-Once you install `@syncfusion/ej2-react-charts`, the other required dependencies will be installed automatically along with the main package.
-
## Installation and configuration
-### Create a React application
+### Step 1: Create a React application with Vite
+
+Use the [Vite CLI](https://vitejs.dev/) to create a new React application. Vite provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide).
-To easily set up a React application, use the Vite CLI (`npm create vite`), which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like [`create-react-app`](https://github.com/facebook/create-react-app). For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
-> **Note:** To create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) instead, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+Run the following command to scaffold a new project. When prompted, pick the framework and variant that match your preferred language:
-To create a new React application, run the following command.
+* For **TypeScript**: select `React` then `TypeScript`.
+* For **JavaScript**: select `React` then `JavaScript`.
```bash
npm create vite@latest my-app
```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+You can also skip the interactive prompts by passing the template flag directly:
-
-
-To set up a React application in TypeScript environment, run the following command.
+{% tabs %}
+{% highlight bash tabtitle="TypeScript" %}
-```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
-npm run dev
-```
+npm install
-To set up a React application in JavaScript environment, run the following command.
+{% endhighlight %}
+{% highlight bash tabtitle="JavaScript" %}
-```bash
npm create vite@latest my-app -- --template react
cd my-app
-npm run dev
-```
+npm install
-### Install Syncfusion® 3D Chart package
+{% endhighlight %}
+{% endtabs %}
+
+For reference, the interactive prompt looks like this:
+
+
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
+### Step 2: Install the Syncfusion® React 3D Chart package
-To install the Syncfusion® 3D Chart package, use the following command
+All Syncfusion® Essential JS 2 packages are published to the [npm registry](https://www.npmjs.com/~syncfusionorg). Install the React 3D Chart package from the project folder:
```bash
-npm install @syncfusion/ej2-react-charts --save
+npm install @syncfusion/ej2-react-charts
```
-> The –save will instruct NPM to include the 3D Chart package inside of the **dependencies** section of the package.json.
+> Installing `@syncfusion/ej2-react-charts` automatically pulls in the peer dependencies listed in the [Dependencies](#dependencies) section above. The chart component does not require any theme stylesheet import to render.
-## Add 3D Chart to the project
+### Step 3: Add the 3D Chart component
-Add the 3D Chart component to `src/App.tsx` using the following code.
+`Chart3DComponent` is the root component for the 3D Chart. Open `src/App.tsx` (or `src/App.jsx` for the JavaScript template) and replace its contents with the following code.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -107,7 +113,7 @@ export default App;
Now run the `npm run dev` command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.
-```
+```bash
npm run dev
```
@@ -214,64 +220,38 @@ Since the JSON contains category data, set the [`valueType`](https://ej2.syncfus
{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs2" %}
-## Add 3D Chart title
+## Troubleshooting
-You can add a title using the [`title`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#title) property to the 3D Chart to provide quick information to the user about the data plotted in the 3D Chart.
+Use the following guidance to resolve common issues when getting started with the 3D Chart component.
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs3/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
+- **Chart does not render (blank page)**
+ - Verify that `index.html` contains a container with `id="root"`, and that `main.tsx`/`main.jsx` calls `ReactDOM.createRoot(document.getElementById("root"))` followed by `root.render()`.
+ - Run `npm install` again to ensure all peer dependencies listed in the [Dependencies](#dependencies) section are installed.
-{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs3" %}
+- **Tooltip, legend, or data labels are not visible after enabling them**
+ - The corresponding modules must be injected into the `services` array of the `Inject` component as shown in the [Module injection](#module-injection) section. For example, tooltip will not appear without `Tooltip3D`, and data labels will not render without `DataLabel3D`.
-## Enable legend
+- **Series data is not plotted or appears empty**
+ - Confirm that the `dataSource` array contains objects with the property names set in `xName` and `yName` (case sensitive).
+ - If the `x` field contains string categories, set the [`valueType`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3daxismodel#valuetype) of `primaryXAxis` to `Category`; otherwise points will not be mapped correctly.
-You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#legendsettings) object and by injecting the `Legend3D` module into the `services`.
+- **Build or dev server fails to start**
+ - Confirm that you are using a supported Node.js version (Node 18 or later for the latest Vite templates).
+ - Delete `node_modules` and `package-lock.json`, then run `npm install` again.
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs4" %}
-
-## Add data label
-
-You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3ddatalabelsettingsmodel#visible) property to `true` in the [`dataLabel`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dseriesmodel#datalabel) object and by injecting `DataLabel3D` module into the `services`. Now, the data labels are arranged smartly based on series.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs5/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs5" %}
-
-## Enable tooltip
-
-The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dtooltipsettingsmodel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#tooltip) object and by injecting `Tooltip3D` module into the `services`.
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
+## See also
-{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs6" %}
+Explore the following related topics:
-> You can refer to our [React 3D Charts](https://www.syncfusion.com/react-components/react-3d-chart) feature tour page for its groundbreaking feature representations. You can also explore our [React 3D Charts example](https://ej2.syncfusion.com/react/demos/#tailwind3/three-dimension-chart/column) that shows various 3D Chart types and how to represent time-dependent data, showing trends in data at equal intervals.
\ No newline at end of file
+- [Working with Data](./workig-with-data)
+- [Chart Dimensions](./dimensions)
+- [Category Axis](./category-axis)
+- [Numeric Axis](./numeric-axis)
+- [DateTime Axis](./datetime-axis)
+- [Axis Customization](./axis-customization)
+- [Data Labels](./data-label)
+- [Legend](./legend)
+- [Tooltip](./tool-tip)
+- [Appearance](./appearance)
+- [Print and Export](./print-export)
+- [Accessibility](./accessibility)
diff --git a/ej2-react/3d-chart/legend.md b/ej2-react/3d-chart/legend.md
index e6309fcc22..f4715cad54 100644
--- a/ej2-react/3d-chart/legend.md
+++ b/ej2-react/3d-chart/legend.md
@@ -15,6 +15,21 @@ domainurl: ##DomainURL##
Legend provides information about the series rendered in the 3D chart.
+## Enable legend
+
+You can use legend for the 3D Chart by setting the [`visible`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dlegendsettingsmodel#visible) property to `true` in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#legendsettings) object and by injecting the `Legend3D` module into the `services`.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs4/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs4" %}
+
## Position and alignment
By using the [`position`](https://ej2.syncfusion.com/react/documentation/api/chart3d/legendSettingsModel#position) property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default.
diff --git a/ej2-react/3d-chart/tool-tip.md b/ej2-react/3d-chart/tool-tip.md
index 2be0348610..7ecf8b1c0a 100644
--- a/ej2-react/3d-chart/tool-tip.md
+++ b/ej2-react/3d-chart/tool-tip.md
@@ -14,20 +14,20 @@ domainurl: ##DomainURL##
The 3D Chart will display details about the points through tooltip, when the mouse is moved over the specific point.
-## Default tooltip
+## Enable tooltip
-By default, tooltip is not visible. The tooltip can be enabled by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/threeDimensionalTooltipSettingsModel#enable) in `tooltipSettings` to **true** and by injecting the `Tooltip3D` module into the services.
+The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the [`enable`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3dtooltipsettingsmodel#enable) property as `true` in [`tooltip`](https://ej2.syncfusion.com/react/documentation/api/chart3d/chart3DModel#tooltip) object and by injecting `Tooltip3D` module into the `services`.
{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/3d-chart/tooltip/tooltip-cs1/app/index.jsx %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.jsx %}
{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/3d-chart/tooltip/tooltip-cs1/app/index.tsx %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/3d-chart/getting-started/getting-started-cs6/app/index.tsx %}
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/3d-chart/tooltip/tooltip-cs1" %}
+{% previewsample "page.domainurl/code-snippet/3d-chart/getting-started/getting-started-cs6" %}
diff --git a/ej2-react/Release-notes/29.2.4.md b/ej2-react/Release-notes/29.2.4.md
index 0f9c53b869..4b8ee3a693 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 | 4490 | 4490 | 0 | All Passed |
+| Chart | 3666 | 3666 | 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/Release-notes/34.1.30.md b/ej2-react/Release-notes/34.1.30.md
new file mode 100644
index 0000000000..cc8bcd4f64
--- /dev/null
+++ b/ej2-react/Release-notes/34.1.30.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v34.1.30
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.30
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v34.1.30 Release Notes
+
+{% include release-info.html date="July 09, 2026" version="v34.1.30" passed="79343" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.30 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8276 | 8276 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4140 | 4140 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16999 | 16999 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5605 | 5605 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 53 | 53 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 257 | 257 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5675 | 5675 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4734 | 4734 | 0 | All Passed |
+| sidebar | 92 | 92 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5022 | 5022 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/34.1.31.md b/ej2-react/Release-notes/34.1.31.md
new file mode 100644
index 0000000000..329b0f35f4
--- /dev/null
+++ b/ej2-react/Release-notes/34.1.31.md
@@ -0,0 +1,100 @@
+---
+title: Essential Studio for React Release Notes - v34.1.31
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.31
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v34.1.31 Release Notes
+
+{% include release-info.html date="July 14, 2026" version="v34.1.31" passed="79360" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.31 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 114 | 114 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8277 | 8277 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 30 | 30 | 0 | All Passed |
+| Data Grid | 4140 | 4140 | 0 | All Passed |
+| Date Picker | 431 | 431 | 0 | All Passed |
+| Date Range Picker | 521 | 521 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 16999 | 16999 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 212 | 212 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5608 | 5608 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 268 | 268 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 54 | 54 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 258 | 258 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 240 | 240 | 0 | All Passed |
+| Pivot Table | 5675 | 5675 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 629 | 629 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4734 | 4734 | 0 | All Passed |
+| sidebar | 92 | 92 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 71 | 71 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 139 | 139 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5033 | 5033 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/Release-notes/34.1.32.md b/ej2-react/Release-notes/34.1.32.md
new file mode 100644
index 0000000000..9d775abf14
--- /dev/null
+++ b/ej2-react/Release-notes/34.1.32.md
@@ -0,0 +1,101 @@
+---
+title: Essential Studio for React Release Notes - v34.1.32
+description: Learn here about the controls in the Essential Studio for React Weekly Release - Release Notes - v34.1.32
+platform: ej2-react
+documentation: ug
+---
+
+# Essential Studio for React - v34.1.32 Release Notes
+
+{% include release-info.html date="July 21, 2026" version="v34.1.32" passed="79627" failed="0" %}
+
+{% directory path: _includes/release-notes/v34.1.32 %}
+
+{% include {{file.url}} %}
+
+{% enddirectory %}
+
+## Test Results
+
+| Component Name | Test Cases | Passed | Failed | Remarks |
+|---------------|------------|--------|--------|---------|
+| 3D Chart | 232 | 232 | 0 | All Passed |
+| 3D Circular Chart | 374 | 374 | 0 | All Passed |
+| Accordion | 116 | 116 | 0 | All Passed |
+| AI Assist View | 575 | 575 | 0 | All Passed |
+| App Bar | 67 | 67 | 0 | All Passed |
+| AutoComplete | 200 | 200 | 0 | All Passed |
+| avatar | 43 | 43 | 0 | All Passed |
+| Block Editor | 2869 | 2869 | 0 | All Passed |
+| Breadcrumb | 160 | 160 | 0 | All Passed |
+| Bullet Chart | 169 | 169 | 0 | All Passed |
+| Button | 145 | 145 | 0 | All Passed |
+| ButtonGroup | 120 | 120 | 0 | All Passed |
+| calendar | 178 | 178 | 0 | All Passed |
+| Carousel | 62 | 62 | 0 | All Passed |
+| Chart | 8277 | 8277 | 0 | All Passed |
+| Chat UI | 690 | 690 | 0 | All Passed |
+| Checkbox | 37 | 37 | 0 | All Passed |
+| CircularGauge | 432 | 432 | 0 | All Passed |
+| ColorPicker | 130 | 130 | 0 | All Passed |
+| Combo Box | 148 | 148 | 0 | All Passed |
+| Common | 906 | 906 | 0 | All Passed |
+| Context Menu | 106 | 106 | 0 | All Passed |
+| Dashboard layout | 31 | 31 | 0 | All Passed |
+| Data Grid | 4180 | 4180 | 0 | All Passed |
+| Date Picker | 433 | 433 | 0 | All Passed |
+| Date Range Picker | 528 | 528 | 0 | All Passed |
+| Date Time Picker | 326 | 326 | 0 | All Passed |
+| Diagram | 17065 | 17065 | 0 | All Passed |
+| Dialog | 76 | 76 | 0 | All Passed |
+| DropDown Button | 132 | 132 | 0 | All Passed |
+| Dropdown List | 214 | 214 | 0 | All Passed |
+| Dropdown Tree | 110 | 110 | 0 | All Passed |
+| File Manager | 2198 | 2198 | 0 | All Passed |
+| Floating Action Button | 174 | 174 | 0 | All Passed |
+| Gantt | 5615 | 5615 | 0 | All Passed |
+| HeatMap Chart | 678 | 678 | 0 | All Passed |
+| Image Editor | 1653 | 1653 | 0 | All Passed |
+| In-place Editor | 643 | 643 | 0 | All Passed |
+| Kanban | 269 | 269 | 0 | All Passed |
+| LinearGauge | 427 | 427 | 0 | All Passed |
+| Listbox | 115 | 115 | 0 | All Passed |
+| ListView | 84 | 84 | 0 | All Passed |
+| Maps | 1390 | 1390 | 0 | All Passed |
+| Mention | 56 | 56 | 0 | All Passed |
+| Menu | 187 | 187 | 0 | All Passed |
+| Multicolumn Combo Box | 261 | 261 | 0 | All Passed |
+| Multiselect Dropdown | 465 | 465 | 0 | All Passed |
+| OTP Input | 241 | 241 | 0 | All Passed |
+| Pivot Table | 5751 | 5751 | 0 | All Passed |
+| Progress Bar | 83 | 83 | 0 | All Passed |
+| Progress Button | 132 | 132 | 0 | All Passed |
+| Query Builder | 480 | 480 | 0 | All Passed |
+| RadioButton | 45 | 45 | 0 | All Passed |
+| RangeNavigator | 140 | 140 | 0 | All Passed |
+| Rating | 198 | 198 | 0 | All Passed |
+| Ribbon | 630 | 630 | 0 | All Passed |
+| Rich Text Editor | 5138 | 5138 | 0 | All Passed |
+| schedule | 4743 | 4743 | 0 | All Passed |
+| sidebar | 94 | 94 | 0 | All Passed |
+| Signature | 105 | 105 | 0 | All Passed |
+| Skeleton | 144 | 144 | 0 | All Passed |
+| Slider | 147 | 147 | 0 | All Passed |
+| SmithChart | 49 | 49 | 0 | All Passed |
+| Sparkline | 58 | 58 | 0 | All Passed |
+| Speech To Text | 200 | 200 | 0 | All Passed |
+| Speed Dial | 366 | 366 | 0 | All Passed |
+| Split Button | 145 | 145 | 0 | All Passed |
+| Stepper | 91 | 91 | 0 | All Passed |
+| Stock Chart | 507 | 507 | 0 | All Passed |
+| Tab | 72 | 72 | 0 | All Passed |
+| Text Area | 112 | 112 | 0 | All Passed |
+| TextBox | 69 | 69 | 0 | All Passed |
+| Time Picker | 180 | 180 | 0 | All Passed |
+| Timeline | 213 | 213 | 0 | All Passed |
+| Toast | 140 | 140 | 0 | All Passed |
+| Toolbar | 142 | 142 | 0 | All Passed |
+| ToolTip | 133 | 133 | 0 | All Passed |
+| TreeGrid | 5033 | 5033 | 0 | All Passed |
+| Treemap | 329 | 329 | 0 | All Passed |
+| Treeview | 371 | 371 | 0 | All Passed |
\ No newline at end of file
diff --git a/ej2-react/accordion/getting-started.md b/ej2-react/accordion/getting-started.md
index 30e7a909c6..218c7d7b4f 100644
--- a/ej2-react/accordion/getting-started.md
+++ b/ej2-react/accordion/getting-started.md
@@ -61,19 +61,38 @@ To install Accordion component, use the following command
npm install @syncfusion/ej2-react-navigations --save
```
-## Adding CSS reference
+## Import Syncfusion® CSS styles
- Add components style as given below in `src/App.css`.
+Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme).
-```css
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-popups/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-react-navigations/styles/tailwind3.css';
+This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-```
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+
+yarn add @syncfusion/ej2-tailwind3-theme
+
+{% endhighlight %}
+{% endtabs %}
+
+By default, Vite projects include a `index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `index.css` file to prevent style conflicts.
+
+The required styles for the component are imported in the **src/App.css** file:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
+@import "@syncfusion/ej2-tailwind3-theme/styles/accordion/index.css";
+
+{% endhighlight %}
+{% endtabs %}
-> To refer `App.css` in the application then import it in the `src/App.tsx` file.
+> To refer **App.css** in the application then import it in the **src/App.tsx** file.
## Initialize the Accordion using Items
diff --git a/ej2-react/accumulation-chart/getting-started.md b/ej2-react/accumulation-chart/getting-started.md
index 4aed9e1f81..fcbec3293a 100644
--- a/ej2-react/accumulation-chart/getting-started.md
+++ b/ej2-react/accumulation-chart/getting-started.md
@@ -1,8 +1,8 @@
---
layout: post
title: Getting started with React Accumulation Chart component | Syncfusion
-description: Checkout and learn about Getting started with React Accumulation Chart component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+description: Check out and learn about the Getting started with React Accumulation Chart component of Syncfusion Essential JS 2 and more details.
+control: Getting started
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Getting Started with React Accumulation Chart Component
-This section describes the steps to create a simple Accumulation Chart.
+This section describes the steps to create a simple Accumulation Chart component.
A quick video overview of the React Accumulation Charts setup is available:
@@ -18,17 +18,15 @@ A quick video overview of the React Accumulation Charts setup is available:
## Prerequisites
-Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement)
+Before getting started, ensure that your development environment meets the [system requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement). That page documents the supported React, Node.js, and npm versions, and includes the React-version compatibility table for Syncfusion React components.
## Before You Begin
-This guide uses the React application structure generated by Vite with the TypeScript template.
+This guide uses the React application structure generated by Vite with the TypeScript template. The following files are part of that scaffold and work together as follows:
-The main files used in this guide are:
-
-* `src/App.tsx` — Defines the root React component.
-* `src/main.tsx` — Application entry point.
-* `index.html` — Root HTML file.
+* `src/App.tsx` — Defines the root React component that hosts the Accumulation Chart component. This is the only file edited in this guide.
+* `src/main.tsx` — Application entry point that renders `App` into the `#root` element defined in `index.html`.
+* `index.html` — Root HTML file that contains the `#root` container element used to mount the React application.
> **Note:** In a Vite React TypeScript application, the root component is commonly generated as `src/App.tsx`. If your application uses JavaScript, the equivalent file is typically `src/App.jsx`.
@@ -36,17 +34,15 @@ The main files used in this guide are:
## Installation and configuration
-> **Note:** As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app) For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
+> **Note:** As an alternative, you can create a React application using [`create-react-app`](https://github.com/facebook/create-react-app). For detailed instructions, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app).
-### Step 1: Set up the React environment
+### Step 1: Create a React application with Vite
Use [Vite](https://vitejs.dev/) to create and manage React applications. Vite provides a fast development environment and optimized builds for modern React applications. Syncfusion® React documentation also recommends Vite for setting up React applications.
Start by opening a terminal on your system **(Command Prompt, PowerShell, or Terminal)**. You may work from the default C: drive location or create a new folder and open the terminal in it.
-### Step 2: Create a React application
-
-Create a new React application using the below command.
+Create a new React application using the following command.
```bash
npm create vite@latest my-chart-app -- --template react-ts
@@ -68,21 +64,19 @@ npm install
> **Note:** If you prefer JavaScript instead of TypeScript, create the application using `npm create vite@latest my-chart-app -- --template react`.
-### Step 3: Install the Syncfusion® React Chart package
+### Step 2: Install the Syncfusion® React Chart package
-All Syncfusion Essential® JS 2 packages are available in the [npmjs.com](https://www.npmjs.com/~syncfusionorg) registry.
+All Syncfusion Essential® JS 2 packages are published to the [npm registry](https://www.npmjs.com/~syncfusionorg).
Install the React Chart package using the following command:
```bash
-npm install @syncfusion/ej2-react-charts --save
+npm install @syncfusion/ej2-react-charts
```
-> Installing `@syncfusion/ej2-react-charts` automatically installs the required dependency packages. The –save will instruct NPM to include the Chart package inside of the **dependencies** section of the package.json.
-
-The steps up to this point can be completed using the initially opened terminal or command prompt. For adding Chart components, open the project in the IDE installed on your device.
+> Installing `@syncfusion/ej2-react-charts` automatically pulls in the required peer dependencies (for example, `@syncfusion/ej2-base` and `@syncfusion/ej2-charts`). Run `npm install` once more if the package is not yet listed in `package.json`. Then open the project in your IDE to continue with the next step.
-### Step 4: Add Accumulation Chart to the project
+### Step 3: Add the Accumulation Chart component
Add the Accumulation Chart component to `src/App.tsx` using the following code.
@@ -90,59 +84,59 @@ Add the Accumulation Chart component to `src/App.tsx` using the following code.
{% highlight ts tabtitle="~/src/App.tsx" %}
import { AccumulationChartComponent } from '@syncfusion/ej2-react-charts';
function App() {
- return ();
+ return ();
}
export default App;
{% endhighlight %}
{% endtabs %}
-> **Note:** This will render an empty accumulation chart area by running `npm run dev` in terminal ([Refer Step 7](#step-7-run-the-application)). Proceed to the next steps to add data, series, and necessary module injections to visualize your data.
+> **Note:** Running `npm run dev` ([Step 6](#step-6-run-the-application)) at this point renders an empty Accumulation Chart area. Continue with the next steps to inject modules, add data, and configure a series so the chart can render the data.
-### Step 5: Module injection
+### Step 4: Inject required modules
-Accumulation Chart features are delivered as separate modules and must be explicitly injected. Here, the PieSeries module is used to render basic pie chart.
+Accumulation Chart features are delivered as separate modules and must be explicitly injected. The `Inject` component takes a `services` array that registers the modules the Accumulation Chart component is allowed to use; injecting only the modules you need keeps the bundle small. Here, the `PieSeries` module is used to render a basic pie chart:
-* `PieSeries` - Inject this module in to `services` to use pie series.
+* `PieSeries` — Inject this module into `services` to render a pie series.
-Import the above-mentioned module from the chart package and inject that into the `services` section of the Accumulation Chart component as follows.
+Import the module from the Chart package and register it through the `Inject` component as follows.
{% tabs %}
{% highlight ts tabtitle="~/src/App.tsx" %}
import { AccumulationChartComponent, PieSeries, Inject } from '@syncfusion/ej2-react-charts';
function App() {
- return (
-
-
-
- );
+ return (
+
+
+
+ );
}
export default App;
{% endhighlight %}
{% endtabs %}
-**Note:** At this stage, No pie series is rendered because the Accumulation Chart component has not yet been configured with a data source.
+> **Note:** At this stage, no pie series is rendered because the Accumulation Chart component has not yet been configured with a data source.
-### Step 6: Populate Accumulation Chart with data
+### Step 5: Populate the Accumulation Chart with data
-The pie chart data should be provided as a JSON array in the following format. You can define the data in the same `src/App.tsx` file or place it in a separate file (for example, `src/datasource.ts`) and import it into `App.tsx`.
+Pie chart data should be provided as a JSON array of objects, one object per slice. Each object uses the following fields:
-{% tabs %}
-{% highlight ts tabtitle="~/src/datasource.ts" %}
-const data = [
- { x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
- { x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
- { x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
- { x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
- { x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
- ];
-{% endhighlight %}
-{% endtabs %}
+* `x` — the slice's category label (used for tooltips and the legend).
+* `y` — the slice's numeric value. The slice's angular size is proportional to this value.
+* `text` — an optional label used by data labels (see [Add data label](https://ej2.syncfusion.com/react/documentation/accumulation-chart/data-label)). Omit this field if you do not plan to show data labels.
+
+Define the data in `src/App.tsx` and bind it to the chart. The series props used below are:
-After defining the required data set, bind the data to the Chart component in the `AccumulationSeriesDirective` tag. The following code snippet demonstrates the complete configuration required to render a basic pie chart.
+* `dataSource` — the array of data objects.
+* `xName` and `yName` — the field names in each data object used for the slice label and value.
+* `radius` — the radius of the pie, as a number (for example, `90` for pixels) or a percentage string (for example, `"90%"`).
+* `type` — the series type. Use `"Pie"` for a pie chart.
{% tabs %}
{% highlight ts tabtitle="~/src/App.tsx" %}
-import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PieSeries } from '@syncfusion/ej2-react-charts';
+import {
+ AccumulationChartComponent, AccumulationSeriesCollectionDirective,
+ AccumulationSeriesDirective, Inject, PieSeries
+} from '@syncfusion/ej2-react-charts';
function App() {
const data = [
@@ -153,24 +147,48 @@ function App() {
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' }
];
- return
-
-
-
-
- ;
+ return (
+
+
+
+
+
+
+ );
}
export default App;
{% endhighlight %}
{% endtabs %}
-### Step 7: Run the application
+### Step 6: Run the application
Run the application using the following command:
```bash
npm run dev
```
-Open the generated local URL (for example, `localhost:5173/`) from terminal in the browser. The application displays the basic pie chart as shown below:
-
\ No newline at end of file
+Open the generated local URL (for example, `http://localhost:5173/`) in the browser. The application displays the basic pie chart as shown below:
+
+
+
+To stop the dev server, press `Ctrl + C` in the terminal. To create a production build and preview it, run:
+
+```bash
+npm run build
+npm run preview
+```
+
+## See also
+
+* [React Accumulation Charts feature tour](https://www.syncfusion.com/react-components/react-charts).
+* [Pie, Doughnut, Pyramid, and Funnel chart types](https://ej2.syncfusion.com/react/documentation/accumulation-chart/pie-dough-nut).
+* [Accumulation Chart data label](https://ej2.syncfusion.com/react/documentation/accumulation-chart/data-label).
+* [Accumulation Chart legend](https://ej2.syncfusion.com/react/documentation/accumulation-chart/legend).
+* [Accumulation Chart tooltip](https://ej2.syncfusion.com/react/documentation/accumulation-chart/tool-tip).
\ No newline at end of file
diff --git a/ej2-react/ai-assistview/generative-ui.md b/ej2-react/ai-assistview/generative-ui.md
index a100bd7b97..0eaeec8233 100644
--- a/ej2-react/ai-assistview/generative-ui.md
+++ b/ej2-react/ai-assistview/generative-ui.md
@@ -43,7 +43,7 @@ You can configure the AI service to return structured JSON blocks through `syste
The following example demonstrates how to connect your AI service to generate and display dynamic UI components within the AI AssistView.
-```tsx
+```ts
import React, { useRef } from 'react';
import { AIAssistViewComponent } from '@syncfusion/ej2-react-interactive-chat';
diff --git a/ej2-react/ai-assistview/getting-started.md b/ej2-react/ai-assistview/getting-started.md
index 09c39593dd..c830f45dcb 100644
--- a/ej2-react/ai-assistview/getting-started.md
+++ b/ej2-react/ai-assistview/getting-started.md
@@ -8,59 +8,113 @@ documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with the React AI AssistView Component
+# Getting Started with the React AI AssistView
-This section explains how to create a simple **AI AssistView** component and configure its available functionalities in React.
+This section explains the steps required to create a simple [React AI AssistView](https://www.syncfusion.com/react-components/react-ai-assistview) component and demonstrate its basic usage in a React environment.
To get started quickly with the React AI AssistView component, you can check out this video tutorial:
{% youtube "https://www.youtube.com/watch?v=rwXanLEHdFU" %}
-## Create a React Application
+## Prerequisites
-Run the following commands to set up a React application:
+| Requirement | Version |
+|-------------|---------|
+| React | 15.5.4 or higher |
+| Node.js | 14.0.0 or above |
+| Yarn (optional) | 0.25 or above |
-```bash
-npm create vite@latest my-app -- --template react-ts
-```
+### React supported versions
+
+| React version | Minimum Syncfusion React Data AI AssistView version |
+| ------------- | ------------------------------------------- |
+| [React v19](https://react.dev/blog/2024/12/05/react-19) | 29.1.33 and above |
+| [React v18](https://reactjs.org/blog/2022/03/29/react-v18.html) | 20.2.36 and above |
+| [React v17](https://reactjs.org/blog/2020/10/20/react-v17.html) | 18.3.50 and above |
+| [React v16](https://reactjs.org/blog/2017/09/26/react-v16.0.html) | 16.2.45 and above | |
+
+### Browser support
+
+| Browser | Supported versions |
+|---|---|
+| Chrome | Latest |
+| Firefox | Latest |
+| Opera | Latest |
+| Edge | 13+ |
+| Internet Explorer (IE) | 11+ |
+| Safari | 9+ |
+| iOS Safari | 9+ |
+| Android Browser / Chrome for Android | 4.4+ |
+| Windows Mobile | IE 11+ |
+
+
+## Setup for local development
-This command will prompt you to install the required packages and start the application. Select the options as shown below.
+Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
-
+> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
-As Syncfusion packages are not installed yet, currently, the `No` option will be selected. Then, navigate to the project directory and install the dependencies using the following commands:
+To create a new React application, run one of the following commands based on your preferred language:
+***React with JavaScript***
+
+```bash
+npx create vite@latest my-app -- --template react
```
-cd my-app
-npm install
+
+***React with TypeScript***
+
+```bash
+npx create vite@latest my-app -- --template react-ts
```
-> **Note:** To set up a React application with Nextjs or Remix, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/quick-start) for more details.
+During the setup process, the CLI will prompt you for a few configuration options. Select the following:
-## Adding Syncfusion® Packages
+- **Which linter to use?** → **ESLint**
+- **Install with npm and start now?** → **Yes**
-All Syncfusion Essential® JS 2 packages are available on the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry. You can choose the component that you want to install.
+Selecting **Yes** automatically installs the project dependencies and starts the development server.
-To install the AI AssistView component package, run the following command:
+After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.
+
+Then, navigate to the project directory:
+
+```bash
+cd my-app
+```
+
+## Adding React AI AssistView packages
+
+To install the AI AssistView package, use the following command:
```bash
npm install @syncfusion/ej2-react-interactive-chat --save
```
-## Adding CSS References
+## Adding CSS reference
-To apply styling to the AI AssistView component, import the required CSS theme files into your `src/App.css` file. The following example uses the Tailwind3 theme, but other themes like Bootstrap 5, Tailwind CSS, or Fluent are also available.
+Themes for Syncfusion® AI AssistView component can be applied using CSS files provided through [npm theme packages](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme). For available themes, refer to the [Themes](https://ej2.syncfusion.com/react/documentation/appearance/theme) documentation.
-To install the [tailwind3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+Install the **Tailwind 3** theme package using the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
-```bash
npm install @syncfusion/ej2-tailwind3-theme --save
-```
-```css
+{% endhighlight %}
+{% endtabs %}
+
+Then add the following CSS reference to the **src/App.css** file:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
@import "../node_modules/@syncfusion/ej2-tailwind3-theme/styles/ai-assistview/index.css";
-```
-## Adding the AI AssistView Component
+{% endhighlight %}
+{% endtabs %}
+
+## Adding AI AssistView component
Now, you can start adding AI AssistView component in the application. For getting started, add the AI AssistView component by using `` tag directive in `src/App.tsx` file using following code. Now place the below AI AssistView code in the `src/App.tsx`.
@@ -79,7 +133,19 @@ function App() {
ReactDOM.render(, document.getElementById('aiAssistView'));
```
-## Run the Application
+## Registering your Syncfusion License
+
+Generate a license key from the [Syncfusion License Dashboard](https://www.syncfusion.com/account/downloads) and register it before rendering your React application:
+
+```ts
+import { registerLicense } from '@syncfusion/ej2-base';
+
+registerLicense('YOUR_LICENSE_KEY');
+```
+
+> **Note:** A valid Syncfusion license is required for production use. Without a valid license, a trial license warning message will be displayed.
+
+## Run the application
With the configuration complete, run the application to see the AI AssistView component rendered in your browser.
@@ -100,7 +166,7 @@ npm start
> **Note:** Starting from version 33.1x, when a user submits a prompt to the AI AssistView, the component automatically scrolls and focuses on the latest prompt and response. This behavior eliminates the need for users to manually scroll down to see the new response, ensuring they always view the most recent AI response without interruption. Prior to version 33.1x, the previous responses remained visible when new responses were added.
-## Configure Suggestions and Asynchronous Responses
+## Configure suggestions and asynchronous responses
The AI AssistView component can be configured to guide user interactions and provide dynamic content from an AI backend.
@@ -118,4 +184,24 @@ The following example demonstrates how to define prompt suggestions and handle t
{% endhighlight %}
{% endtabs %}
-{% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %}
\ No newline at end of file
+{% previewsample "page.domainurl/code-snippet/ai-assistview/defaultprompts" %}
+
+### Production build
+
+To create an optimized production build:
+
+```bash
+npm run build
+```
+
+Preview the production build locally:
+
+```bash
+npm run preview
+```
+
+## Troubleshooting
+
+- **AI AssistView not rendering styles:** Ensure the theme CSS is imported in `App.css` and that you removed the default Vite CSS in `index.css`.
+- **Trial license warning banner:** Register a license key via `registerLicense()` from `@syncfusion/ej2-base`.
+- **Port 5173 already in use:** Stop the conflicting process or run Vite on a different port with `npm run dev -- --port 3000`.
diff --git a/ej2-react/ai-tools/release-notes.md b/ej2-react/ai-tools/release-notes.md
index 8d2bfc69f9..52fec8fb33 100644
--- a/ej2-react/ai-tools/release-notes.md
+++ b/ej2-react/ai-tools/release-notes.md
@@ -1,55 +1,75 @@
---
layout: post
-title: Release Notes - Syncfusion React MCP Server | Syncfusion
-description: Explore the release notes for Syncfusion React MCP Server, featuring Agentic UI Builder, 145+ components, theme integration, and AI-powered React development tools.
-control: Syncfusion MCP Server Release Notes
+title: Release Notes - Syncfusion React AI and Smart Tooling | Syncfusion
+description: Explore the release notes for Syncfusion React AI and Smart Tooling, covering MCP Server, Skills, and Agentic UI Builder updates with new features, breaking changes, and stability improvements across all versions.
+control: Syncfusion React AI and Smart Tooling Release Notes
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
---
-# Syncfusion React MCP Server Release Notes
+# Syncfusion React AI and Smart Tooling Release Notes
-This document provides information about the changes and new features included in each version of the [@syncfusion/react-assistant](https://www.npmjs.com/package/@syncfusion/react-assistant) MCP server package.
+This document provides information about the changes and new features included in each version of the Syncfusion React AI and Smart Tooling, including the [@syncfusion/react-assistant](https://www.npmjs.com/package/@syncfusion/react-assistant) MCP Server, Skills, Agentic UI Builder and so on.
-## (v2.0.1) – March 27, 2026
+## MCP Server
-### Features
+**(v3.0.0) - July 21, 2026**
-- Updated package dependencies to resolve security vulnerabilities and enhance stability.
+**Breaking Changes**
-## (v2.0.0) – February 23, 2026
+- The **UI Builder** tool has been redefined as an agent-skill based experience and is no longer available within this server. For more information about the **Agentic UI Builder**, refer to this [link](https://www.syncfusion.com/explore/agentic-ui-builder).
-### Features
+**(v2.0.1) - March 27, 2026**
-- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete React applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
-- Agentic UI Builder sub-tools:
- - **Layout Tool** (#sf_react_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
- - **Component Tool** (#sf_react_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Syncfusion React components.
- - **Styling Tool** (#sf_react_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
-- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
+**Features**
+
+- Updated package dependencies to resolve security vulnerabilities and enhance stability.
-### Breaking Changes
+**(v2.0.0) - February 23, 2026**
+
+**Breaking Changes**
- Renamed the coding assistant tool identifier from **`SyncfusionReactAssistant`** to **`sf_react_assistant`** for consistency, brevity, and improved user experience.
-## (v1.0.1) – February 10, 2026
+**(v1.0.1) - February 10, 2026**
-### Features
+**Features**
- Updated package dependencies to resolve security vulnerabilities and enhance stability.
-## (v1.0.0) – December 16, 2025
+**(v1.0.0) - December 16, 2025**
-### Features
+**Features**
- Added support for API key validation through file path reference.
- Updated package dependencies and security standards for improved reliability and safety.
-## (v0.1.0) – October 10, 2025
+**(v0.1.0) - October 10, 2025**
-### Features
+**Features**
- Initial release of AI Coding Assistant for Syncfusion React components.
- Provides context-aware assistance for building React applications with Syncfusion components.
- Includes support for component APIs, properties, and troubleshooting guidance.
+
+## Skills
+
+**Features**
+
+- Introduced **Agent Skills** — a set of lightweight, modular capabilities that extend the AI Coding Assistant with specialized knowledge, including pre-defined instructions, best practices, and curated code patterns for building React applications with Syncfusion components.
+- Each skill is defined in a simple, readable `SKILL.md` file that specifies the correct setup, required modules, current APIs and patterns, and what a valid implementation looks like for a given component.
+- Works as a standard, lightweight approach supported by modern AI development tools: install skills, the tool detects them, and the relevant skill is automatically applied to the user's prompt.
+
+## Agentic UI Builder
+
+**(v2.0.0) - February 23, 2026**
+
+**Features**
+
+- Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete React applications using natural language prompts, significantly boosting your productivity and accelerating development workflow.
+- Agentic UI Builder sub-tools:
+ - **Layout Tool** (#sf_react_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns.
+ - **Component Tool** (#sf_react_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Syncfusion React components.
+ - **Styling Tool** (#sf_react_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration.
+- Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training).
diff --git a/ej2-react/appbar/getting-started.md b/ej2-react/appbar/getting-started.md
index 23aae33ad9..bcdde03e7a 100644
--- a/ej2-react/appbar/getting-started.md
+++ b/ej2-react/appbar/getting-started.md
@@ -64,14 +64,38 @@ npm install @syncfusion/ej2-react-buttons --save
The above command installs [AppBar dependencies](./getting-started#dependencies)
which are required to render the component in the `React` environment.
-## Adding Style sheet to the Application
+## Import Syncfusion® CSS styles
-Add AppBar component's styles as given below in `App.css`.
+Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme).
-```css
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind3.css";
-```
+This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+
+yarn add @syncfusion/ej2-tailwind3-theme
+
+{% endhighlight %}
+{% endtabs %}
+
+By default, Vite projects include a `index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `index.css` file to prevent style conflicts.
+
+The required styles for the component are imported in the **src/App.css** file:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
+@import "@syncfusion/ej2-tailwind3-theme/styles/appbar/index.css";
+
+{% endhighlight %}
+{% endtabs %}
+
+> To refer **App.css** in the application then import it in the **src/App.tsx** file.
## Add AppBar to the project
diff --git a/ej2-react/auto-complete/getting-started.md b/ej2-react/auto-complete/getting-started.md
index 1196c6bf12..5d1f77c9f9 100644
--- a/ej2-react/auto-complete/getting-started.md
+++ b/ej2-react/auto-complete/getting-started.md
@@ -1,14 +1,14 @@
---
layout: post
-title: Getting started with React Auto complete component | Syncfusion
-description: Checkout and learn about Getting started with React Auto complete component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+title: Getting started with React AutoComplete component | Syncfusion
+description: Checkout and learn about Getting started with React AutoComplete component of Syncfusion Essential JS 2 and more details.
+control: AutoComplete
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
---
-# Getting Started with React AutoComplete component
+# Getting started with React AutoComplete component
This section explains the steps required to create a simple React AutoComplete component and demonstrate its basic usage in a React environment.
@@ -18,136 +18,109 @@ To get started quickly with React AutoComplete, you can watch this video:
{% youtube "https://www.youtube.com/watch?v=qpnnfN_E8PY" %}
-## Setup for local development
+## Prerequisites
-Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
+[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement)
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
+## Set up the Vite project
-To create a new React application, run the following command.
+To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn.
-```bash
-npm create vite@latest my-app
-```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+npm create vite@latest my-project -- --template react
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+yarn create vite my-project --template react
+{% endhighlight %}
+{% endtabs %}
-
+After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt:
-To set up a React application in TypeScript environment, run the following command.
+1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`).
+2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later.
-```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
-```
-To set up a React application in JavaScript environment, run the following command.
+Navigate into the project directory with:
-```bash
-npm create vite@latest my-app -- --template react
-cd my-app
-npm run dev
+```
+cd my-project
```
-## Adding Syncfusion® AutoComplete packages
+## Add Syncfusion® React packages
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
-To install the AutoComplete component, use the following command
+Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
-```bash
-npm install @syncfusion/ej2-react-dropdowns --save
-```
+To install the React component package, use the following command:
-> The --save will instruct NPM to include the AutoComplete package inside of the **dependencies** section of the package.json.
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
-## Adding CSS reference
+npm install @syncfusion/ej2-react-dropdowns
-The following CSS files are available in the **../node_modules/@syncfusion** package folder. Add these as references in **src/App.css**.
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
-```css
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-react-inputs/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-react-dropdowns/styles/tailwind3.css";
-```
+yarn add @syncfusion/ej2-react-dropdowns
-> To refer **App.css** in the application then import it in the **src/App.tsx** file.
+{% endhighlight %}
+{% endtabs %}
+
+## Import Syncfusion® CSS styles
-## Adding AutoComplete component
+Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme).
-The React AutoComplete component can be added to the application by following these steps. To get started, add the AutoComplete component to the **src/App.tsx** file using the following code.
+This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
-The following autocomplete code should be placed in the **src/App.tsx** file.
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
-`[Class-component]`
+npm install @syncfusion/ej2-tailwind3-theme
-```ts
-import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
-import * as React from 'react';
-import './App.css';
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
-export default class App extends React.Component<{}, {}> {
- public render() {
- return (
- // specifies the tag for render the AutoComplete component
-
- );
- }
-}
-```
+yarn add @syncfusion/ej2-tailwind3-theme
-`[Functional-component]`
+{% endhighlight %}
+{% endtabs %}
-```ts
-import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
-import * as React from 'react';
-import './App.css';
+By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts.
-export default function App() {
- return (
- // specifies the tag for render the AutoComplete component
-
- );
-}
-```
+The required styles for the AutoComplete component are imported in the **src/App.css** file:
-## Binding data source
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
-After initialization, populate the data using [`dataSource`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#datasource) property. Here, an array of string values is passed to the AutoComplete component.
+@import "@syncfusion/ej2-tailwind3-theme/styles/auto-complete/index.css";
-`[Class-component]`
+{% endhighlight %}
+{% endtabs %}
-```ts
-import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
-import * as React from 'react';
-import './App.css';
+> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages).
-export default class App extends React.Component<{}, {}> {
- // define the array of data
- private sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
- public render() {
- return (
- // specifies the tag for render the AutoComplete component
-
- );
- }
-}
-```
+## Add the AutoComplete component
+
+Now, you can add the React AutoComplete component to your **src/App.jsx** file by importing and defining it within your application. Then, populate the AutoComplete with data using the [dataSource](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#datasource) property, which accepts an array of string values to display as suggestions. Use the following code:
-`[Functional-component]`
+{% tabs %}
+{% highlight js tabtitle="App.jsx" %}
-```ts
import { AutoCompleteComponent } from '@syncfusion/ej2-react-dropdowns';
-import * as React from 'react';
import './App.css';
-export default function App() {
- // define the array of data
- const sportsData: string[] = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
- return (
- // specifies the tag for render the AutoComplete component
-
+function App() {
+ // define the array of data
+ const sportsData = ['Badminton', 'Basketball', 'Cricket', 'Football', 'Golf', 'Gymnastics', 'Hockey', 'Rugby', 'Snooker', 'Tennis'];
+ return (
+ // specifies the tag for rendering the AutoComplete component
+
);
}
-```
+
+export default App;
+
+{% endhighlight %}
+{% endtabs %}
## Run the application
@@ -157,22 +130,7 @@ Run the `npm run dev` command in the terminal to start the development server. T
npm run dev
```
-The output appears as follows.
-
-`[Class-component]`
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/dropdownlist/basic-cs3/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/dropdownlist/basic-cs3/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs3" %}
-
-`[Functional-component]`
+The output will appear as follows:
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -183,41 +141,7 @@ The output appears as follows.
{% endhighlight %}
{% endtabs %}
- {% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs4" %}
-
-## Configure the Popup List
-
-By default, the width of the popup list automatically adjusts according to the AutoComplete input element's width and the height of the popup list has '300px'.
-
-You can also customize the suggestion list height and width using [`popupHeight`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#popupheight) and [`popupWidth`](https://ej2.syncfusion.com/react/documentation/api/auto-complete/index-default#popupwidth) property respectively.
-
-In the following sample, popup list's width and height are configured.
-
-`[Class-component]`
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/autocomplete/basic-cs19/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/autocomplete/basic-cs19/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs19" %}
-
-`[Functional-component]`
-
-{% tabs %}
-{% highlight js tabtitle="app.jsx" %}
-{% include code-snippet/autocomplete/basic-cs20/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="app.tsx" %}
-{% include code-snippet/autocomplete/basic-cs20/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
- {% previewsample "page.domainurl/code-snippet/autocomplete/basic-cs20" %}
+{% previewsample "page.domainurl/code-snippet/dropdownlist/basic-cs4" %}
> Refer to the [React AutoComplete](https://www.syncfusion.com/react-components/react-autocomplete) feature tour page for its groundbreaking feature representations. You can also explore our [React AutoComplete component example](https://ej2.syncfusion.com/react/demos/#/tailwind3/auto-complete/default) that shows how to render the AutoComplete in React.
diff --git a/ej2-react/avatar/getting-started.md b/ej2-react/avatar/getting-started.md
index ef81a925c4..b65c249af8 100644
--- a/ej2-react/avatar/getting-started.md
+++ b/ej2-react/avatar/getting-started.md
@@ -54,14 +54,38 @@ To install `Avatar` component, use the following command
npm install @syncfusion/ej2-layouts --save
```
-## Adding CSS Reference
+## Import Syncfusion® CSS styles
-The Avatar CSS files include base styles from `@syncfusion/ej2-base` and component styles from `@syncfusion/ej2-layouts`. Add the following CSS references to the `src/App.css` file to apply the required styles:
+Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme).
-```css
-@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
-@import '../node_modules/@syncfusion/ej2-layouts/styles/tailwind3.css';
-```
+This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install @syncfusion/ej2-tailwind3-theme --save
+
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+
+yarn add @syncfusion/ej2-tailwind3-theme
+
+{% endhighlight %}
+{% endtabs %}
+
+By default, Vite projects include a `index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `index.css` file to prevent style conflicts.
+
+The required styles for the component are imported in the **src/App.css** file:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
+@import "@syncfusion/ej2-tailwind3-theme/styles/avatar/index.css";
+
+{% endhighlight %}
+{% endtabs %}
+
+> To refer **App.css** in the application then import it in the **src/App.tsx** file.
## Adding a simple Avatar
diff --git a/ej2-react/badge/getting-started.md b/ej2-react/badge/getting-started.md
index 4131ff3a69..55589050d3 100644
--- a/ej2-react/badge/getting-started.md
+++ b/ej2-react/badge/getting-started.md
@@ -2,7 +2,7 @@
layout: post
title: Getting started with React Badge component | Syncfusion
description: Checkout and learn about Getting started with React Badge component of Syncfusion Essential JS 2 and more details.
-control: Getting started
+control: Badge
platform: ej2-react
documentation: ug
domainurl: ##DomainURL##
@@ -14,65 +14,95 @@ This section explains the steps required to create a simple React Badge componen
> **Ready to streamline your Syncfusion® React development?** Discover the full potential of Syncfusion® React components with Syncfusion® AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion® CodeStudio and more. [Explore Syncfusion® AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistant/overview).
-## Setup for local development
-
-Easily set up a React application using `create-vite-app`, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like `create-react-app`. For detailed steps, refer to the Vite [installation instructions](https://vitejs.dev/guide). Vite sets up your environment using JavaScript and optimizes your application for production.
-
-> **Note:** To create a React application using `create-react-app`, refer to this [documentation](https://ej2.syncfusion.com/react/documentation/getting-started/create-app) for more details.
-
-To create a new React application, run the following command.
-
-```bash
-npm create vite@latest my-app
-```
-This command will prompt you for a few settings for the new project, such as selecting a framework and a variant.
-
-
-
-To set up a React application in TypeScript environment, run the following command.
-
-```bash
-npm create vite@latest my-app -- --template react-ts
-cd my-app
-npm run dev
-```
-To set up a React application in JavaScript environment, run the following command.
-
-```bash
-npm create vite@latest my-app -- --template react
-cd my-app
-npm run dev
-```
-
-## Adding Syncfusion® Badge packages
-
-All the available Essential® JS 2 packages are published in the [`npmjs.com`](https://www.npmjs.com/~syncfusionorg) public registry.
-To install the Badge component, use the following command
-
-```bash
-npm install @syncfusion/ej2-react-notifications --save
+## Prerequisites
+
+[System requirements for Syncfusion® React UI components](https://ej2.syncfusion.com/react/documentation/system-requirement)
+
+## Set up the Vite project
+
+To create a new `Vite` project, use one of the commands that are specific to either NPM or Yarn.
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+npm create vite@latest my-project -- --template react
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+yarn create vite my-project --template react
+{% endhighlight %}
+{% endtabs %}
+
+After running the command, you will be prompted with a series of interactive questions to configure your project. Select the appropriate options for each prompt:
+
+1. **Select a linter to use**: Choose the linter for your project (for example, `ESLint`).
+2. **Install with npm and start now?**: Type `Yes` to proceed with installing the dependencies and automatically start the development server, or `No` to install dependencies manually later.
+
+Navigate into the project directory with:
+
```
-
-> The --save will instruct NPM to include the Badge package inside of the **dependencies** section of the package.json.
-
-## Adding CSS reference
-
-The following CSS files are available in the **../node_modules/@syncfusion** package folder. Add these as references in **src/App.css**.
-
-```css
-@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
-@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";
+cd my-project
```
-
-> To refer **App.css** in the application then import it in the **src/App.tsx** file.
+
+## Add Syncfusion® React packages
+
+Syncfusion® React component packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-react). To use Syncfusion® React components in the project, install the corresponding npm package.
+
+To install the React component package, use the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install @syncfusion/ej2-react-notifications
+
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+
+yarn add @syncfusion/ej2-react-notifications
+
+{% endhighlight %}
+{% endtabs %}
+
+## Import Syncfusion® CSS styles
+
+Themes for Syncfusion® React components can be applied using CSS or SASS files from the [npm theme packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#theme-packages), CDN, CRG, or [Theme Studio](https://ej2.syncfusion.com/react/documentation/appearance/theme-studio). For more information, see the [themes documentation](https://ej2.syncfusion.com/react/documentation/appearance/theme).
+
+This guide uses the `Tailwind 3` theme as an example, sourced from the theme package. In this package, each component includes an `index.css` file that automatically loads all the required dependency styles. To install the [Tailwind 3](https://www.npmjs.com/package/@syncfusion/ej2-tailwind3-theme) theme package, use the following command:
+
+{% tabs %}
+{% highlight bash tabtitle="npm" %}
+
+npm install @syncfusion/ej2-tailwind3-theme
+
+{% endhighlight %}
+{% highlight bash tabtitle="yarn" %}
+
+yarn add @syncfusion/ej2-tailwind3-theme
+
+{% endhighlight %}
+{% endtabs %}
+
+By default, Vite projects include a `src/index.css` file with default styles. These default styles may conflict with Syncfusion component styles. Clear all content from the `src/index.css` file to prevent style conflicts.
+
+The required styles for the Badge component are imported in the **src/App.css** file:
+
+{% tabs %}
+{% highlight css tabtitle="App.css" %}
+
+@import "@syncfusion/ej2-tailwind3-theme/styles/badge/index.css";
+
+{% endhighlight %}
+{% endtabs %}
+
+> You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on [referring themes through npm packages](https://ej2.syncfusion.com/react/documentation/appearance/theme#refer-themes-through-npm-packages).
## Adding Badge component
-The React Badge component can be added to the application by following these steps. To get started, add the Badge component to the **src/App.tsx** file using the following code.
+The React Badge component can be added to the application by following these steps. To get started, add the Badge component to the **src/App.jsx** file using the following code.
-The following badge code should be placed in the **src/App.tsx** file.
+The following badge code should be placed in the **src/App.jsx** file.
+
+{% tabs %}
+{% highlight js tabtitle="App.jsx" %}
-```ts
import * as React from 'react';
import * as ReactDOM from "react-dom";
import './App.css';
@@ -83,7 +113,9 @@ function App() {
);
}
export default App;
-```
+
+{% endhighlight %}
+{% endtabs %}
## Run the application
diff --git a/ej2-react/block-editor/accessibility.md b/ej2-react/block-editor/accessibility.md
index d74f4039f3..0b2eccea23 100644
--- a/ej2-react/block-editor/accessibility.md
+++ b/ej2-react/block-editor/accessibility.md
@@ -16,15 +16,15 @@ The accessibility compliance for the Block Editor component is outlined below.
| Accessibility Criteria | Compatibility |
| -- | -- |
-| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) |
|
-| [Section 508 Support](../common/accessibility#accessibility-standards) |
|
-| [Screen Reader Support](../common/accessibility#screen-reader-support) | |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | 
|
-| [Color Contrast](../common/accessibility#color-contrast) | 
|
-| [Mobile Device Support](../common/accessibility#mobile-device-support) | |
-| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | |
-| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | |
+| [WCAG 2.2 Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#accessibility-standards) | |
+| [Section 508 Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#accessibility-standards) | |
+| [Screen Reader Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#screen-reader-support) | |
+| [Right-To-Left Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#right-to-left-support) | |
+| [Color Contrast](https://ej2.syncfusion.com/react/documentation/common/accessibility#color-contrast) | |
+| [Mobile Device Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#mobile-device-support) | |
+| [Keyboard Navigation Support](https://ej2.syncfusion.com/react/documentation/common/accessibility#keyboard-navigation-support) | |
+| [Accessibility Checker Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | |
+| [Axe-core Accessibility Validation](https://ej2.syncfusion.com/react/documentation/common/accessibility#ensuring-accessibility) | |
+
+
+
+
+
+
+