diff --git a/ej2-react/appearance/css-variables.md b/ej2-react/appearance/css-variables.md
new file mode 100644
index 000000000..9d936fa45
--- /dev/null
+++ b/ej2-react/appearance/css-variables.md
@@ -0,0 +1,155 @@
+---
+layout: post
+title: Themes using CSS Variables in React component | Syncfusion
+description: Learn here all about themes using CSS varaibles in Syncfusion React Appearance component of Syncfusion Essential JS 2 and more.
+control: Themes using CSS Variables
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# About CSS variables in themes
+
+[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
+
+Syncfusion currently offers two modern and highly customizable themes using CSS variables. These themes are designed to provide a consistent and visually appealing look and feel across all Syncfusion components. The themes available are:
+
+* Material 3 Theme
+* Fluent 2 Theme
+
+## CSS themes - Syncfusion React components
+
+[Material 3](https://m3.material.io/) and [Fluent 2](https://fluent2.microsoft.design/get-started/whatisnew) themes have been introduced across all EJ2 Controls, featuring both `light` and `dark` variants. This themes utilizes `CSS variables` to allow easy customization of control colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
+
+> Kindly note that in the Material 3 theme, CSS variables with rgb() values are used for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
+
+### Utilization of CSS variables in modern themes
+
+Modern themes like Material 3 and Fluent 2 incorporate support for CSS variables, where `Material 3` utilizes `rgb()` values for customizing colors and `Fluent 2` uses `hex` values for color customization. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of these themes. The examples below shows CSS variables with their values used for the respective themes.
+
+{% tabs %}
+{% highlight ts tabtitle="material3.css" %}
+{% include code-snippet/common/css-value-cs1/material3.css %}
+{% endhighlight %}
+{% highlight ts tabtitle="fluent2.css" %}
+{% include code-snippet/common/css-value-cs1/fluent2.css %}
+{% endhighlight %}
+{% endtabs %}
+
+### How to get these themes?
+
+To access themes provided by Syncfusion, you have two primary options,
+
+* Package
+* CDN links
+
+| | Light | Dark |
+|-----------|---------|--------|
+|Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
+| | [Fluent 2 Light](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-theme) | [Fluent 2 Dark](https://www.npmjs.com/package/@syncfusion/ej2-fluent2-dark-theme) |
+| CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css) |
+| | [Fluent 2 light](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css) | [Fluent 2 Dark](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css) |
+
+### Color Customization in themes
+
+CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
+
+#### Customization using CSS
+
+Here you can find the example for `Material 3` customization using CSS class.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/material3-cs2/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/material3-cs2/app/index.tsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.css" %}
+{% include code-snippet/common/material3-cs2/index.css %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
+
+**Default Material 3 primary value**
+
+
+
+**Customized Material 3 primary value**
+
+
+
+Example for `Fluent 2` customization using CSS class.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/fluent2-cs2/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/fluent2-cs2/app/index.tsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.css" %}
+{% include code-snippet/common/fluent2-cs2/index.css %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs2" %}
+
+**Default fluent2 primary value**
+
+
+
+**Customized fluent 2 primary value**
+
+
+
+With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React Components.
+
+### Switching Light and Dark mode with CSS variables
+
+Switching between modes has become easier with the updated modern themes, which offer Light and Dark variants. In both the `Material 3` and `Fluent 2` light themes, there are distinct class variables for light and dark modes in a `single file`, providing flexibility for seamless switching between the two modes within your application.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/material3-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/material3-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
+
+### Mode switching in Fluent 2 theme
+
+Similar to `Material 3`, we offer both Light and Dark variants with `Fluent 2`. In the Fluent 2 theme, there are distinct class variables for light and dark modes, as shown in the preview below.
+
+{% tabs %}
+{% highlight js tabtitle="index.jsx" %}
+{% include code-snippet/common/fluent2-cs1/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/common/fluent2-cs1/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/common/fluent2-cs1" %}
+
+### How to switch dark mode?
+
+To activate dark mode, just append the `e-dark-mode` class to the body section of your application for both `Material 3` and `Fluent 2` theme. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
+
+`Material 3` dark mode
+
+
+
+`Fluent 2` dark mode
+
+
+
+### ThemeStudio Application
+
+The ThemeStudio application now includes seamless integration with the Material 3 and Fluent 2 themes, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
+
+Access the Syncfusion ThemeStudio application, featuring our themes, via the following link: [Link to Syncfusion ThemeStudio](https://ej2.syncfusion.com/themestudio/?theme=material3)
diff --git a/ej2-react/appearance/images/fluent2-customize.png b/ej2-react/appearance/images/fluent2-customize.png
new file mode 100644
index 000000000..6f88875a3
Binary files /dev/null and b/ej2-react/appearance/images/fluent2-customize.png differ
diff --git a/ej2-react/appearance/images/fluent2-dark.png b/ej2-react/appearance/images/fluent2-dark.png
new file mode 100644
index 000000000..91194f761
Binary files /dev/null and b/ej2-react/appearance/images/fluent2-dark.png differ
diff --git a/ej2-react/appearance/images/fluent2-default.png b/ej2-react/appearance/images/fluent2-default.png
new file mode 100644
index 000000000..cbf61b306
Binary files /dev/null and b/ej2-react/appearance/images/fluent2-default.png differ
diff --git a/ej2-react/appearance/images/material3-customize.PNG b/ej2-react/appearance/images/material3-customize.PNG
index 464ad44d0..f8d6df575 100644
Binary files a/ej2-react/appearance/images/material3-customize.PNG and b/ej2-react/appearance/images/material3-customize.PNG differ
diff --git a/ej2-react/appearance/images/material3-dark.PNG b/ej2-react/appearance/images/material3-dark.PNG
index 47bfba2fb..6c6c9a803 100644
Binary files a/ej2-react/appearance/images/material3-dark.PNG and b/ej2-react/appearance/images/material3-dark.PNG differ
diff --git a/ej2-react/appearance/images/material3-default.PNG b/ej2-react/appearance/images/material3-default.PNG
index 4201282eb..e140ac8f9 100644
Binary files a/ej2-react/appearance/images/material3-default.PNG and b/ej2-react/appearance/images/material3-default.PNG differ
diff --git a/ej2-react/appearance/material3.md b/ej2-react/appearance/material3.md
deleted file mode 100644
index d4eadeda1..000000000
--- a/ej2-react/appearance/material3.md
+++ /dev/null
@@ -1,117 +0,0 @@
----
-layout: post
-title: Material 3 in React Appearance component | Syncfusion
-description: Learn here all about Material 3 in Syncfusion React Appearance component of Syncfusion Essential JS 2 and more.
-control: Material 3
-platform: ej2-react
-documentation: ug
-domainurl: ##DomainURL##
----
-
-# Material 3 Theme with CSS Variables
-
-[Material 3](https://m3.material.io/) is the latest version of Google's open-source design system, Material Design. It's the successor to [Material 2](https://m2.material.io/), which is a popular design system used in many apps. It has been specifically designed to align seamlessly with the new visual style and system UI introduced in Android 12 and above.
-
-[CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties), also known as custom properties, are entities defined by CSS authors that contain specific values that can be reused throughout a CSS file. They are identified by their name, which must begin with two hyphens (--) followed by an identifier. These variables can be assigned any valid CSS value, such as colors, lengths, or fonts. To retrieve the value of a CSS variable, the var() function is used.
-
-## Material 3 - Syncfusion React Components
-
-Syncfusion has introduced the Material 3 theme across all EJ2 Components, featuring both `light` and `dark` variants. This theme utilizes `CSS variables` to allow easy customization of Component colors in CSS format. With this implementation, users can seamlessly switch between light and dark color schemes, providing a flexible solution to meet their preferences and application needs.
-
-> Kindly note that in the Material 3 theme, Syncfusion utilizes CSS variables with rgb() values for color variables. The use of hex values in this context may lead to improper functionality. For example, in previous versions of the Material theme or other themes, the primary color variable was defined as follows: $primary: #6200ee;. However, in the Material 3 theme, the primary color variable is defined as follows: --color-sf-primary: 98, 0, 238;.
-
-### How does Syncfusion Material 3 theme utilize CSS Variables?
-
-Syncfusion's Material 3 theme incorporates support for CSS variables, utilizing rgb() values for customizing colors. For more information you can refer this [documentation](./theme#syncfusion-material-3-theme) for color variables of material 3 theme.
-
-```CSS
-:root {
- --color-sf-black: 0, 0, 0;
- --color-sf-white: 255, 255, 255;
- --color-sf-primary: 103, 80, 164;
- --color-sf-primary-container: 234, 221, 255;
- --color-sf-secondary: 98, 91, 113;
- --color-sf-secondary-container: 232, 222, 248;
- --color-sf-tertiary: 125, 82, 96;
- --color-sf-tertiary-container: 255, 216, 228;
- --color-sf-surface: 255, 255, 255;
- --color-sf-surface-variant: 231, 224, 236;
- --color-sf-background: var(--color-sf-surface);
- --color-sf-on-primary: 255, 255, 255;
- --color-sf-on-primary-container: 33, 0, 94;
- --color-sf-on-secondary: 255, 255, 255;
- --color-sf-on-secondary-container: 30, 25, 43;
- --color-sf-on-tertiary: 255, 255, 255;
-}
-```
-
-### How to get the Material 3 theme?
-
-To access the Material 3 theme provided by Syncfusion, you have two primary options,
-
-* Package
-* CDN links
-
-| | Light | Dark |
-|-----------|---------|--------|
-|Package | [Material 3 Light](https://www.npmjs.com/package/@syncfusion/ej2-material3-theme) | [Material 3 Dark](https://www.npmjs.com/package/@syncfusion/ej2-material3-dark-theme) |
-| CDN | [Material 3 Light](https://cdn.syncfusion.com/ej2/24.2.8/material3.css) | [Material 3 Dark](https://cdn.syncfusion.com/ej2/24.2.8/material3-dark.css) |
-
-### Color Customization in Material 3
-
-CSS variables allows you to dynamically change color values in real-time using JavaScript. This flexibility enables you to create interactive experiences where colors can adjust based on user interactions or other dynamic factors.
-
-#### Customization using CSS
-
-Here you can find the example for Material 3 customization using Css class.
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/common/material3-cs2/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/common/material3-cs2/app/index.tsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.css" %}
-{% include code-snippet/common/material3-cs2/index.css %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/common/material3-cs2" %}
-
-**Default primary value**
-
-
-
-**Customized primary value**
-
-
-
-With this CSS variable support, you can effortlessly customize the color variable values for Syncfusion React Components.
-
-### Material 3 Light Theme
-
-Syncfusion has implemented the Material 3 theme, offering both Light and Dark variants. In the Material 3 light theme, there are distinct class variables for both light and dark modes, providing flexibility for seamless switching between the two modes within your application.
-
-{% tabs %}
-{% highlight js tabtitle="index.jsx" %}
-{% include code-snippet/common/material3-cs1/app/index.jsx %}
-{% endhighlight %}
-{% highlight ts tabtitle="index.tsx" %}
-{% include code-snippet/common/material3-cs1/app/index.tsx %}
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "page.domainurl/code-snippet/common/material3-cs1" %}
-
-### How to switch dark mode?
-
-With CSS variable support, transitioning between light and dark theme modes has become effortless. To activate dark mode, just append the `e-dark-mode` class to the body section of your application. Once applied, the theme seamlessly switches to dark mode. Please refer to the example image below for visual guidance.
-
-
-
-### ThemeStudio Application
-
-The ThemeStudio application now includes seamless integration with the Material 3 theme, offering a comprehensive solution for customization requirements. This enhancement enables users to effortlessly customize and personalize their themes.
-
-Access the Syncfusion ThemeStudio application, featuring the Material 3 theme, via the following link: [Link to Syncfusion ThemeStudio with Material 3 Theme](https://ej2.syncfusion.com/themestudio/?theme=material3)
diff --git a/ej2-react/appearance/theme.md b/ej2-react/appearance/theme.md
index cb7a5ea3f..f694d5876 100644
--- a/ej2-react/appearance/theme.md
+++ b/ej2-react/appearance/theme.md
@@ -14,6 +14,8 @@ The Syncfusion React UI can allow you to apply styles for the components. The fo
|Theme |Style Sheet Name|
|--------|--------|
+|Fluent 2 | fluent2.css |
+|Fluent 2 Dark | fluent2-dark.css |
|Material 3 | material3.css |
|Material 3 Dark | material3-dark.css |
|Bootstrap 5 | bootstrap5.css |
@@ -124,6 +126,8 @@ Syncfusion React Themes are available in the CDN. Make sure that the version in
| Theme Name | CDN Reference |
|--- | --- |
+| Fluent 2 | [https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css](https://cdn.syncfusion.com/ej2/26.1.35/fluent2.css) |
+| Fluent 2 Dark | [https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css](https://cdn.syncfusion.com/ej2/26.1.35/fluent2-dark.css) |
| Material 3 | [https://cdn.syncfusion.com/ej2/22.1.34/material3.css](https://cdn.syncfusion.com/ej2/22.1.34/material3.css) |
| Material 3 Dark | [https://cdn.syncfusion.com/ej2/22.1.34/material3-dark.css](https://cdn.syncfusion.com/ej2/22.1.34/material3-dark.css) |
| Fluent | [https://cdn.syncfusion.com/ej2/22.1.34/fluent.css](https://cdn.syncfusion.com/ej2/22.1.34/fluent.css) |
@@ -147,6 +151,287 @@ The following list of common variables are used in the Syncfusion JavaScript lib
+### Syncfusion Fluent 2 theme
+
+
+
+
+
+
Name
+
Value (Default Theme)
+
Value (Dark Theme)
+
+
+
+
+
--color-sf-black
+
+ #000
+
+
+ #000
+
+
+
+
--color-sf-white:
+
+ #fff
+
+
+ #fff
+
+
+
+
--color-sf-primary
+
+ #0f6cbd
+
+
+ #115ea3
+
+
+
+
--color-sf-primary-text-color
+
+ #fff
+
+
+ #fff
+
+
+
+
--color-sf-primary-light
+
+ #b4d6fa
+
+
+ #0e4775
+
+
+
+
--color-sf-primary-lighter
+
+ #ebf3fc
+
+
+ #082338
+
+
+
+
--color-sf-primary-dark
+
+ #0f548c
+
+
+ #62abf5
+
+
+
+
--color-sf-primary-darker
+
+ #0c3b5e
+
+
+ #96c6fa
+
+
+
+
--color-sf-success
+
+ #0e700e
+
+
+ #107c10
+
+
+
+
--color-sf-info
+
+ #008aa9
+
+
+ #0099bc
+
+
+
+
--color-sf-warning
+
+ #bc4b09
+
+
+ #faa06b
+
+
+
+
--color-sf-danger
+
+ #d13438
+
+
+ #dc626d
+
+
+
+
--color-sf-success-light
+
+ #54b054
+
+
+ #094509
+
+
+
+
--color-sf-info-light
+
+ #56bfd7
+
+
+ #005669
+
+
+
+
--color-sf-warning-light
+
+ #fee5d7
+
+
+ #4a1e04
+
+
+
+
--color-sf-danger-light
+
+ #eeacb2
+
+
+ #6e0811
+
+
+
+
--color-sf-success-dark
+
+ #54b054
+
+
+ #c9eac9
+
+
+
+
--color-sf-info-dark
+
+ #56bfd7
+
+
+ #cdedf4
+
+
+
+
--color-sf-warning-dark
+
+ #8a3707
+
+
+ #fee5d7
+
+
+
+
--color-sf-danger-dark
+
+ #6e0811
+
+
+ #fee5d7
+
+
+
+
--color-sf-success-light-alt
+
+ #f1faf1
+
+
+ #052505
+
+
+
+
--color-sf-info-light-alt
+
+ #f2fafc
+
+
+ #002e38
+
+
+
+
--color-sf-warning-light-alt
+
+ #fff9f5
+
+
+ #4a1e04
+
+
+
+
--color-sf-danger-light-alt
+
+ #fdf3f4
+
+
+ #3b0509
+
+
+
+
--color-sf-badge-warning
+
+ #fde300
+
+
+ #fde300
+
+
+
+
--color-sf-badge-warning-text
+
+ #847619
+
+
+ #fde300
+
+
+
+
--color-sf-primary-label-color
+
+ #0f6cbd
+
+
+ #479ef5
+
+
+
+
--color-sf-primary-cell-selection
+
+ #ebf3fc
+
+
+ #ebf3fc
+
+
+
+
+
### Syncfusion Material 3 theme
diff --git a/ej2-react/code-snippet/common/css-value-cs1/fluent2.css b/ej2-react/code-snippet/common/css-value-cs1/fluent2.css
new file mode 100644
index 000000000..0dfd19fa4
--- /dev/null
+++ b/ej2-react/code-snippet/common/css-value-cs1/fluent2.css
@@ -0,0 +1,23 @@
+/* Hex values of fluent2 theme */
+:root {
+ --color-sf-black: #000;
+ --color-sf-white: #fff;
+ --color-sf-primary: #0f6cbd;
+ --color-sf-primary-text-color: #fff;
+ --color-sf-primary-light: #b4d6fa;
+ --color-sf-primary-lighter: #ebf3fc;
+ --color-sf-primary-dark: #0f548c;
+ --color-sf-primary-darker: #0c3b5e;
+ --color-sf-success: #0e700e;
+ --color-sf-info: #008aa9;
+ --color-sf-warning: #bc4b09;
+ --color-sf-danger: #d13438;
+ --color-sf-success-light: #54b054;
+ --color-sf-info-light: #56bfd7;
+ --color-sf-warning-light: #fee5d7;
+ --color-sf-danger-light: #eeacb2;
+ --color-sf-success-dark: #54b054;
+ --color-sf-info-dark: #56bfd7;
+ --color-sf-warning-dark: #8a3707;
+ --color-sf-danger-dark: #6e0811;
+ }
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/css-value-cs1/material3.css b/ej2-react/code-snippet/common/css-value-cs1/material3.css
new file mode 100644
index 000000000..fe8b6cba3
--- /dev/null
+++ b/ej2-react/code-snippet/common/css-value-cs1/material3.css
@@ -0,0 +1,19 @@
+/* rgb() values of material3 theme */
+:root {
+ --color-sf-black: 0, 0, 0;
+ --color-sf-white: 255, 255, 255;
+ --color-sf-primary: 103, 80, 164;
+ --color-sf-primary-container: 234, 221, 255;
+ --color-sf-secondary: 98, 91, 113;
+ --color-sf-secondary-container: 232, 222, 248;
+ --color-sf-tertiary: 125, 82, 96;
+ --color-sf-tertiary-container: 255, 216, 228;
+ --color-sf-surface: 255, 255, 255;
+ --color-sf-surface-variant: 231, 224, 236;
+ --color-sf-background: var(--color-sf-surface);
+ --color-sf-on-primary: 255, 255, 255;
+ --color-sf-on-primary-container: 33, 0, 94;
+ --color-sf-on-secondary: 255, 255, 255;
+ --color-sf-on-secondary-container: 30, 25, 43;
+ --color-sf-on-tertiary: 255, 255, 255;
+ }
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/fluent2-cs1/app/index.jsx b/ej2-react/code-snippet/common/fluent2-cs1/app/index.jsx
new file mode 100644
index 000000000..06d4a8828
--- /dev/null
+++ b/ej2-react/code-snippet/common/fluent2-cs1/app/index.jsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { useState } from 'react';
+import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+enableRipple(true);
+function App() {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const handleCheckboxChange = (event) => {
+ setIsChecked(event.target.checked);
+
+ // Add or remove the classes on the body element based on the checkbox state
+ const body = document.body;
+
+ if (event.target.checked) {
+ body.classList.add('dark');
+ body.classList.add('dark');
+ } else {
+ body.classList.remove('e-dark-mode');
+ body.classList.remove('e-dark-mode');
+ }
+ };
+ return (
+ {/* Primary Button - Used to represent a primary action. */}
+
+ button
+
+ {/* Success Button - Used to represent a positive action. */}
+ button
+
+ {/* Info Button - Used to represent an informative action. */}
+ button
+
+ {/* Warning Button - Used to represent an action with caution.*/}
+ button
+
+ {/* Danger Button - Used to represent a negative action.*/}
+ button
+
+
);
+}
+export default App;
+ReactDom.render(, document.getElementById('button'));
diff --git a/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx b/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx
new file mode 100644
index 000000000..bb2d89311
--- /dev/null
+++ b/ej2-react/code-snippet/common/fluent2-cs1/app/index.tsx
@@ -0,0 +1,47 @@
+
+import {ButtonComponent, CheckBoxComponent} from '@syncfusion/ej2-react-buttons';
+import { enableRipple } from '@syncfusion/ej2-base';
+import * as React from 'react';
+import * as ReactDom from 'react-dom';
+import { useState } from 'react';
+enableRipple(true);
+
+function App() {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const handleCheckboxChange = (event: React.ChangeEvent) => {
+ setIsChecked(event.target.checked);
+
+ // Add or remove the class on the body element based on the checkbox state
+ if (event.target.checked) {
+ document.body.classList.add('dark');
+ document.body.classList.add('e-dark-mode');
+ } else {
+ document.body.classList.remove('dark');
+ document.body.classList.remove('e-dark-mode');
+ }
+ };
+ return (
+
+ { /* checkbox - Used to represent checkbox. */ }
+
+ { /* Primary Button - Used to represent a primary action. */ }
+ Button
+
+ { /* Success Button - Used to represent a positive action. */ }
+ Button
+
+ { /* Info Button - Used to represent an informative action. */ }
+ Button
+
+ { /* Warning Button - Used to represent an action with caution.*/ }
+ Button
+
+ { /* Danger Button - Used to represent a negative action.*/ }
+ Button
+
+
+ );
+}
+export default App;
+ReactDom.render(,document.getElementById('button'));
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/fluent2-cs1/index.css b/ej2-react/code-snippet/common/fluent2-cs1/index.css
new file mode 100644
index 000000000..cd656242c
--- /dev/null
+++ b/ej2-react/code-snippet/common/fluent2-cs1/index.css
@@ -0,0 +1,18 @@
+button {
+ margin: 25px 5px 20px 20px;
+}
+
+#loader {
+ color: #008cff;
+ height: 40px;
+ left: 45%;
+ position: absolute;
+ top: 45%;
+ width: 30%;
+}
+.e-checkbox-wrap {
+ margin-top: 18px;
+ }
+ .dark{
+ background-color: black;
+ }
\ No newline at end of file
diff --git a/ej2-react/code-snippet/common/fluent2-cs1/index.html b/ej2-react/code-snippet/common/fluent2-cs1/index.html
new file mode 100644
index 000000000..0d152c8a0
--- /dev/null
+++ b/ej2-react/code-snippet/common/fluent2-cs1/index.html
@@ -0,0 +1,22 @@
+
+
+
+
+ Syncfusion React Button
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/ej2-react/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js b/ej2-react/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js
new file mode 100644
index 000000000..c9bd65c8d
--- /dev/null
+++ b/ej2-react/code-snippet/spreadsheet/save-as-blobdata-cs1/systemjs.config.js
@@ -0,0 +1,58 @@
+System.config({
+ transpiler: "ts",
+ typescriptOptions: {
+ target: "es5",
+ module: "commonjs",
+ moduleResolution: "node",
+ emitDecoratorMetadata: true,
+ experimentalDecorators: true,
+ "jsx": "react"
+ },
+ meta: {
+ 'typescript': {
+ "exports": "ts"
+ }
+ },
+ paths: {
+ "syncfusion:": "https://cdn.syncfusion.com/ej2/26.1.35/"
+ },
+ map: {
+ app: 'app',
+ ts: "https://unpkg.com/plugin-typescript@4.0.10/lib/plugin.js",
+ typescript: "https://unpkg.com/typescript@2.2.2/lib/typescript.js",
+ "@syncfusion/ej2-base": "syncfusion:ej2-base/dist/ej2-base.umd.min.js",
+ "@syncfusion/ej2-data": "syncfusion:ej2-data/dist/ej2-data.umd.min.js",
+ "@syncfusion/ej2-lists": "syncfusion:ej2-lists/dist/ej2-lists.umd.min.js",
+ "@syncfusion/ej2-navigations": "syncfusion:ej2-navigations/dist/ej2-navigations.umd.min.js",
+ "@syncfusion/ej2-notifications": "syncfusion:ej2-notifications/dist/ej2-notifications.umd.min.js",
+ "@syncfusion/ej2-popups": "syncfusion:ej2-popups/dist/ej2-popups.umd.min.js",
+ "@syncfusion/ej2-dropdowns": "syncfusion:ej2-dropdowns/dist/ej2-dropdowns.umd.min.js",
+ "@syncfusion/ej2-inputs": "syncfusion:ej2-inputs/dist/ej2-inputs.umd.min.js",
+ "@syncfusion/ej2-splitbuttons": "syncfusion:ej2-splitbuttons/dist/ej2-splitbuttons.umd.min.js",
+ "@syncfusion/ej2-buttons": "syncfusion:ej2-buttons/dist/ej2-buttons.umd.min.js",
+ "@syncfusion/ej2-calendars": "syncfusion:ej2-calendars/dist/ej2-calendars.umd.min.js",
+ "@syncfusion/ej2-excel-export": "syncfusion:ej2-excel-export/dist/ej2-excel-export.umd.min.js",
+ "@syncfusion/ej2-pdf-export": "syncfusion:ej2-pdf-export/dist/ej2-pdf-export.umd.min.js",
+ "@syncfusion/ej2-file-utils": "syncfusion:ej2-file-utils/dist/ej2-file-utils.umd.min.js",
+ "@syncfusion/ej2-compression": "syncfusion:ej2-compression/dist/ej2-compression.umd.min.js",
+ "@syncfusion/ej2-grids": "syncfusion:ej2-grids/dist/ej2-grids.umd.min.js",
+ "@syncfusion/ej2-charts": "syncfusion:ej2-charts/dist/ej2-charts.umd.min.js",
+ "@syncfusion/ej2-svg-base": "syncfusion:ej2-svg-base/dist/ej2-svg-base.umd.min.js",
+ "@syncfusion/ej2-spreadsheet": "syncfusion:ej2-spreadsheet/dist/ej2-spreadsheet.umd.min.js",
+ "@syncfusion/ej2-react-base": "syncfusion:ej2-react-base/dist/ej2-react-base.umd.min.js",
+ "@syncfusion/ej2-react-spreadsheet": "syncfusion:ej2-react-spreadsheet/dist/ej2-react-spreadsheet.umd.min.js",
+ "react-dom/client": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react-dom": "https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js",
+ "react": "https://unpkg.com/react@18.2.0/umd/react.production.min.js",
+
+ },
+ packages: {
+ 'app': { main: 'app', defaultExtension: 'tsx' },
+ }
+
+});
+
+System.import('app');
+
+
+
diff --git a/ej2-react/spreadsheet/open-save.md b/ej2-react/spreadsheet/open-save.md
index f424e7296..98ded8616 100644
--- a/ej2-react/spreadsheet/open-save.md
+++ b/ej2-react/spreadsheet/open-save.md
@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
# Open save in React Spreadsheet component
-In import an excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved. Server configuration is used for this process.
+In import an Excel file, it needs to be read and converted to client side Spreadsheet model. The converted client side Spreadsheet model is sent as JSON which is used to render Spreadsheet. Similarly, when you save the Spreadsheet, the client Spreadsheet model is sent to the server as JSON for processing and saved. Server configuration is used for this process.
To get start quickly with Open and Save, you can check on this video:
@@ -50,7 +50,7 @@ Please find the below table for the beforeOpen event arguments.
### Open an external URL excel file while initial load
-You can achieve to access the remote excel file by using the [`created`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#created) event. In this event you can fetch the excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) this file by using Spreadsheet component open method.
+You can achieve to access the remote Excel file by using the [`created`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#created) event. In this event you can fetch the Excel file and convert it to a blob. Convert this blob to a file and [`open`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) this file by using Spreadsheet component open method.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -80,7 +80,7 @@ You can add your own custom header to the open action in the Spreadsheet. For pr
### Open excel file into a read-only mode
-You can open excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) methods.
+You can open Excel file into a read-only mode by using the [`openComplete`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#opencomplete) event. In this event, you must protect all the sheets and lock its used range cells by using [`protectSheet`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#protectsheet) and [`lockCells`](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#lockcells) methods.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -95,9 +95,9 @@ You can open excel file into a read-only mode by using the [`openComplete`](http
### Open an excel file using a file uploader
-If you explore your machine to select and upload an excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/react/documentation/api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/react/documentation//api/spreadsheet/#open) method to see the appropriate output.
+If you explore your machine to select and upload an Excel document using the file uploader, you will receive the uploaded document as a raw file in the [success](https://ej2.syncfusion.com/react/documentation/api/uploader/#success) event of the file uploader. In this `success` event, you should pass the received raw file as an argument to the Spreadsheet's [open](https://ej2.syncfusion.com/react/documentation//api/spreadsheet/#open) method to see the appropriate output.
-The following code example shows how to import an excel document using file uploader in spreadsheet.
+The following code example shows how to import an Excel document using file uploader in spreadsheet.
{% tabs %}
{% highlight js tabtitle="app.jsx" %}
@@ -164,9 +164,81 @@ The following code example shows how to open the spreadsheet data as base64 stri
{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+### To open an Excel file located on a server
+
+By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to load an Excel file located on a server, you need to configure the server endpoint to fetch the Excel file from the server location, process it using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, and send it back to the client side as `JSON data`. On the client side, you should use the [openFromJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#openfromjson) method to load that `JSON data` into the Spreadsheet component.
+
+**Server Endpoint**:
+
+```csharp
+ public IActionResult Open([FromBody] FileOptions options)
+ {
+ OpenRequest open = new OpenRequest();
+ string filePath = _env.ContentRootPath.ToString() + "\\Files\\" + options.FileName + ".xlsx";
+ // Getting the file stream from the file path.
+ FileStream fileStream = new FileStream(filePath, FileMode.Open);
+ // Converting "MemoryStream" to "IFormFile".
+ IFormFile formFile = new FormFile(fileStream, 0, fileStream.Length, "", options.FileName + ".xlsx");
+ open.File = formFile;
+ // Processing the Excel file and return the workbook JSON.
+ var result = Workbook.Open(open);
+ fileStream.Close();
+ return Content(result);
+ }
+
+ public class FileOptions
+ {
+ public string FileName { get; set; } = string.Empty;
+ }
+```
+
+**Client Side**:
+
+```js
+
+ // Fetch call to server to load the Excel file.
+ fetch('https://localhost:{{Your port number}}/Home/Open', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({ FileName: 'Sample' }),
+ })
+ .then((response) => response.json())
+ .then((data) => {
+ // Load the JSON data into spreadsheet.
+ spreadsheet.openFromJson({ file: data });
+ })
+
+```
+
+You can find the server endpoint code to fetch and process the Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below.
+
+```js
+// To open an Excel file from the server.
+fetch('https://localhost:{port number}/Home/Open')
+```
+
+### To open an excel file from blob data
+
+By default, the Spreadsheet component provides an option to browse files from the local file system and open them within the component. If you want to open an Excel file from blob data, you need to fetch the blob data from the server or another source and convert this blob data into a `File` object. Then, you can use the [open](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#open) method in the Spreadsheet component to load that `File` object.
+
+Please find the code to fetch the blob data and load it into the Spreadsheet component below.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/open-from-blobdata-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/open-from-blobdata-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/open-from-blobdata-cs1" %}
+
### External workbook confirmation dialog
-When you open an excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data.
+When you open an Excel file that contains external workbook references, you will see a confirmation dialog. This dialog allows you to either continue with the file opening or cancel the operation. This confirmation dialog will appear only if you set the `AllowExternalWorkbook` property value to **false** during the open request, as shown below. This prevents the spreadsheet from displaying inconsistent data.
```csharp
public IActionResult Open(IFormCollection openRequest)
@@ -369,6 +441,92 @@ The following code example shows how to save the spreadsheet data as base64 stri
{% previewsample "page.domainurl/code-snippet/spreadsheet/base-64-string" %}
+### To save an Excel file to a server
+
+By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file to a server location, you need to configure the server endpoint to convert the spreadsheet data into a file stream and save it to the server location. To do this, first, on the client side, you must convert the spreadsheet data into `JSON` format using the [saveAsJson](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#saveasjson) method and send it to the server endpoint. On the server endpoint, you should convert the received spreadsheet `JSON` data into a file stream using `Syncfusion.EJ2.Spreadsheet.AspNet.Core`, then convert the stream into an Excel file, and finally save it to the server location.
+
+**Client Side**:
+
+```js
+
+ // Convert the spreadsheet workbook to JSON data.
+ spreadsheet.saveAsJson().then((json) => {
+ const formData = new FormData();
+ formData.append('FileName', "Sample");
+ formData.append('saveType', 'Xlsx');
+ // Passing the JSON data to perform the save operation.
+ formData.append('JSONData', JSON.stringify(json.jsonObject.Workbook));
+ formData.append('PdfLayoutSettings', JSON.stringify({ FitSheetOnOnePage: false }));
+ // Using fetch to invoke the save process.
+ fetch('https://localhost:{{Your port number}}/Home/Save', {
+ method: 'POST',
+ body: formData
+ }).then((response) => {
+ console.log(response);
+ });
+ });
+
+```
+
+**Server Endpoint**:
+
+```csharp
+
+ public string Save(SaveSettings saveSettings)
+ {
+ ExcelEngine excelEngine = new ExcelEngine();
+ IApplication application = excelEngine.Excel;
+ try
+ {
+
+ // Save the workbook as stream.
+ Stream fileStream = Workbook.Save(saveSettings);
+ // Using XLSIO, we are opening the file stream and saving the file in the server under "Files" folder.
+ // You can also save the stream file in your server location.
+ IWorkbook workbook = application.Workbooks.Open(fileStream);
+ string basePath = _env.ContentRootPath + "\\Files\\" + saveSettings.FileName + ".xlsx";
+ var file = System.IO.File.Create(basePath);
+ fileStream.Seek(0, SeekOrigin.Begin);
+ // To convert the stream to file options.
+ fileStream.CopyTo(file);
+ file.Dispose();
+ fileStream.Dispose();
+ return string.Empty;
+ }
+ catch (Exception ex)
+ {
+ return ex.Message;
+ }
+ }
+
+```
+
+You can find the server endpoint code to save the spreadsheet data as an Excel file in this [attachment](https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication1_(1)-880363187). After launching the server endpoint, you need to update the URL on the client side sample as shown below.
+
+```js
+
+//To save an Excel file to the server.
+fetch('https://localhost:{port number}/Home/Save')
+
+```
+
+### To save an excel file as blob data
+
+By default, the Spreadsheet component saves the Excel file and downloads it to the local file system. If you want to save an Excel file as blob data, you need to set `needBlobData` property to **true** and `isFullPost` property to **false** in the [beforeSave](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#beforesave) event of the spreadsheet. Subsequently, you will receive the spreadsheet data as a blob in the [saveComplete](https://ej2.syncfusion.com/react/documentation/api/spreadsheet/#savecomplete) event. You can then post the blob data to the server endpoint for saving.
+
+Please find below the code to retrieve blob data from the Spreadsheet component below.
+
+{% tabs %}
+{% highlight js tabtitle="app.jsx" %}
+{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app/app.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="app.tsx" %}
+{% include code-snippet/spreadsheet/save-as-blobdata-cs1/app/app.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/spreadsheet/save-as-blobdata-cs1" %}
+
### Supported file formats
The following list of Excel file formats are supported in Spreadsheet:
@@ -414,7 +572,7 @@ The following code snippets shows server configuration using `WebAPI` service.
[Route("api/[controller]")]
public class SpreadsheetController : Controller
{
- //To open excel file
+ //To open Excel file
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
@@ -426,7 +584,7 @@ The following code snippets shows server configuration using `WebAPI` service.
return Content(Workbook.Open(open));
}
- //To save as excel file
+ //To save as Excel file
[AcceptVerbs("Post")]
[HttpPost]
[EnableCors("AllowAllOrigins")]
@@ -457,4 +615,4 @@ You can refer to our [React Spreadsheet](https://www.syncfusion.com/react-ui-com
* [Filtering](./filter)
* [Sorting](./sort)
-* [Hyperlink](./link)
\ No newline at end of file
+* [Hyperlink](./link)