<h1>
 <a href="https://www.syncfusion.com/javascript-ui-controls">
  <img src="https://ej2.syncfusion.com/github/images/syncfusion.svg" alt="Syncfusion Inc." title="Syncfusion Inc." align="top" height="40px" />
  <span>Syncfusion Essential JS 2 - JavaScript UI Controls Library</span>
 </a>
</h1>

<a href="https://www.npmjs.com/package/@syncfusion/ej2">
<img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm" style="height:20px;"></a>&nbsp;&nbsp;<a href="https://www.syncfusion.com/eula/es/"><img src="https://ej2.syncfusion.com/github/images/license.svg" alt="license"></a>

The Syncfusion JavaScript UI controls library is the only suite that you will ever need to build an application since it contains over 70+ high-performance, lightweight, modular, and responsive UI components in a single package.

 [![Screens of showcase applications](https://ej2.syncfusion.com/products/ej2-banner.gif)](https://syncfusion.com/javascript-ui-controls/)
 
 *Screens of [showcase applications](#showcase-applications) created using Syncfusion Essential JS 2 UI controls*

## Table of Contents
* [Framework highlights](#framework-highlights)
* [Control list](#control-list)
 * [Grids](#grids)
    * [Editors](#editors)
    * [Dropdowns](#dropdowns)
    * [Data Visualization](#data-visualization)
    * [Calendars](#calendars)
    * [Navigation](#navigation)
    * [Buttons](#buttons)
    * [Layout](#layout)
    * [Notification](#notification)
    * [Viewer](#viewer)
* [Resources](#resources)
* [Supported Frameworks](#supported-frameworks)
* [Showcase Applications](#showcase-applications)
* [Release Notes](#release-notes)
* [License](#license)

## Framework highlights
### Lightweight and user friendly
The entire Essential JS 2 framework is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires.
### Modular architecture
 All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application.
### Built for performance
 Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible.
### Responsive and touch friendly
 All Essential JS 2 controls are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops.
### Stunning built-in themes
 Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "[Theme Studio](https://ej2.syncfusion.com/themestudio/)" to customize the provided built-in themes.
### Globalization simplified
 Easily build applications to be used by a global audience in various language and culture settings.
### Stay current
 With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.

## Control List

### Grids
<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-data-grid?utm_medium=listing&utm_source=github">
            <b>Data Grid</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-grids"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-grids" title="@syncfusion/ej2-grids"/></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-grids"><img src="https://ej2.syncfusion.com/badges/ej2-grids/coverage.svg" alt="code coverage of @syncfusion/ej2-grids" title="@syncfusion/ej2-grids" /></a>
        </td>
        <td>
            <a href="controls/grids/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/grid/grid-overview.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/grid/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-pivot-table?utm_medium=listing&utm_source=github"><b>Pivot Table</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-pivotview"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-pivotview" title="@syncfusion/ej2-pivotview" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-pivotview"><img src="https://ej2.syncfusion.com/badges/ej2-pivotview/coverage.svg" alt="code coverage of @syncfusion/ej2-pivotview" title="@syncfusion/ej2-pivotview" /></a>
        </td>
        <td>
            <a href="controls/pivotview/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/pivot-view/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/pivotview/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-tree-grid?utm_medium=listing&utm_source=github"><b>Tree Grid</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-treegrid"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-treegrid" title="@syncfusion/ej2-treegrid" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-treegrid"><img src="https://ej2.syncfusion.com/badges/ej2-treegrid/coverage.svg" alt="code coverage of @syncfusion/ej2-treegrid" title="@syncfusion/ej2-treegrid" /></a>
        </td>
        <td>
            <a href="controls/treegrid/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/tree-grid/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/treegrid/getting-started/">Documentation</a>
        </td>
    </tr>
        <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-spreadsheet?utm_medium=listing&utm_source=github"><b>Spreadsheet</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-spreadsheet"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-spreadsheet" title="@syncfusion/ej2-spreadsheet" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-spreadsheet"><img src="https://ej2.syncfusion.com/badges/ej2-spreadsheet/coverage.svg" alt="code coverage of @syncfusion/ej2-spreadsheet" title="@syncfusion/ej2-spreadsheet" /></a>
        </td>
        <td>
            <a href="controls/spreadsheet/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/spreadsheet/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/spreadsheet/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### File Viewers & Editors

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-in-place-editor?utm_medium=listing&utm_source=github"><b>In-place Editor</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-inplace-editor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-inplace-editor" title="@syncfusion/ej2-inplace-editor" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inplace-editor"><img src="https://ej2.syncfusion.com/badges/ej2-inplace-editor/coverage.svg" alt="code coverage of @syncfusion/ej2-inplace-editor" title="@syncfusion/ej2-inplace-editor" /></a>
        </td>
        <td>
            <a href="controls/inplaceeditor/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/inplace-editor/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/in-place-editor/getting-started/">Documentation</a>
        </td>
    </tr>
     <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-pdf-viewer?utm_medium=listing&utm_source=github"><b>PDF Viewer</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-pdfviewer"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-pdfviewer" title="@syncfusion/ej2-pdfviewer" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-pdfviewer"><img src="https://ej2.syncfusion.com/badges/ej2-pdfviewer/coverage.svg" alt="code coverage of @syncfusion/ej2-pdfviewer" title="@syncfusion/ej2-pdfviewer" /></a>
        </td>
        <td>
            <a href="controls/pdfviewer/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/pdfviewer/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/pdfviewer/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-wysiwyg-rich-text-editor?utm_medium=listing&utm_source=github"><b>Rich Text Editor</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-richtexteditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-richtexteditor" title="@syncfusion/ej2-richtexteditor" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-richtexteditor"><img src="https://ej2.syncfusion.com/badges/ej2-richtexteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-richtexteditor" title="@syncfusion/ej2-richtexteditor" /></a>
        </td>
        <td>
            <a href="controls/richtexteditor/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/rich-text-editor/tools.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-word-processor?utm_medium=listing&utm_source=github"><b>Word Processor</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-documenteditor"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-documenteditor" title="@syncfusion/ej2-documenteditor" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-documenteditor"><img src="https://ej2.syncfusion.com/badges/ej2-documenteditor/coverage.svg" alt="code coverage of @syncfusion/ej2-documenteditor" title="@syncfusion/ej2-documenteditor" /></a>
        </td>
        <td>
            <a href="controls/documenteditor/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/document-editor/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/document-editor/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Dropdowns

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-autocomplete?utm_medium=listing&utm_source=github"><b>AutoComplete</b></a>
        </td>
        <td rowspan="6">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-dropdowns"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-dropdowns" title="@syncfusion/ej2-dropdowns" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-dropdowns"><img src="https://ej2.syncfusion.com/badges/ej2-dropdowns/coverage.svg" alt="code coverage of @syncfusion/ej2-dropdowns" title="@syncfusion/ej2-dropdowns" /></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/auto-complete">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/auto-complete/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/auto-complete/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-combobox?utm_medium=listing&utm_source=github"><b>ComboBox</b></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/combo-box">Source</a>
        </td>
        <td>
            <a href="https://ej2syncfusion.com/demos#/material/combo-box/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/combo-box/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-list?utm_medium=listing&utm_source=github"><b>Dropdown List</b></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/drop-down-list">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/drop-down-list/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/drop-down-list/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-tree?utm_medium=listing&utm_source=github"><b>Dropdown Tree</b></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/drop-down-tree">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/drop-down-tree/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/drop-down-tree/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-multiselect-dropdown?utm_medium=listing&utm_source=github"><b>MultiSelect Dropdown</b></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/multi-select">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/multi-select/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/multi-select/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-listbox?utm_medium=listing&utm_source=github"><b>List Box</b></a>
        </td>
        <td>
            <a href="controls/dropdowns/src/list-box">Source</a>
        </td>
        <td>
            <a href="https://ej2syncfusion.com/demos/#/material/list-box/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/list-box/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Inputs

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-textbox?utm_medium=listing&utm_source=github"><b>TextBox</b></a>
        </td>
        <td rowspan="3">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inputs"><img src="https://ej2.syncfusion.com/badges/ej2-inputs/coverage.svg" alt="code coverage of @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>
        </td>
        <td>
            <a href="controls/inputs/src/textbox">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/textbox/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/textbox/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-input-mask?utm_medium=listing&utm_source=github"><b>Input Mask</b></a>
        </td>
        <td>
            <a href="controls/inputs/src/maskedtextbox">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/maskedtextbox/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/maskedtextbox/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-numeric-textbox?utm_medium=listing&utm_source=github"><b>Numeric Textbox</b></a>
        </td>
        <td>
            <a href="controls/inputs/src/numerictextbox">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/numerictextbox/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/numerictextbox/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-radio-button?utm_medium=listing&utm_source=github"><b>Radio Button</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
        </td>
        <td>
            <a href="controls/buttons/src/radio-button">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/radio-button.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/radio-button/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-checkbox?utm_medium=listing&utm_source=github"><b>Checkbox</b></a>
        </td>
        <td>
            <a href="controls/buttons/src/check-box">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/button/checkbox.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/check-box/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-color-picker?utm_medium=listing&utm_source=github"><b>Color Picker</b></a>
        </td>
        <td rowspan="3">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inputs"><img src="https://ej2.syncfusion.com/badges/ej2-inputs/coverage.svg" alt="code coverage of @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>
        </td>
        <td>
            <a href="controls/inputs/src/color-picker">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/color-picker/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/color-picker/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-file-upload?utm_medium=listing&utm_source=github"><b>File Upload</b></a>
        </td>
        <td>
            <a href="controls/inputs/src/uploader">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/uploader/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/uploader/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-range-slider?utm_medium=listing&utm_source=github"><b>Range Slider</b></a>
        </td>
        <td>
            <a href="controls/inputs/src/slider">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/slider/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/range-slider/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-toggle-switch-button?utm_medium=listing&utm_source=github"><b>Toggle Switch Button</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
        </td>
        <td>
            <a href="controls/buttons/src/switch">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/switch.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/switch/getting-started/">Documentation</a>
        </td>
    </tr>
</table>


### Data Visualization

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-charts?utm_medium=listing&utm_source=github"><b>Charts</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>
        </td>
        <td>
            <a href="controls/charts/src/chart">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/chart/line.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/chart/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-stock-chart?utm_medium=listing&utm_source=github"><b>Stock Chart</b></a>
        </td>
        <td>
            <a href="controls/charts/src/stock-chart">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/stock-chart/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/stock-chart/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-circular-gauge?utm_medium=listing&utm_source=github"><b>Circular Gauge</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-circulargauge"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-circulargauge" title="@syncfusion/ej2-circulargauge" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-circulargauge"><img src="https://ej2.syncfusion.com/badges/ej2-circulargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-circulargauge" title="@syncfusion/ej2-circulargauge" /></a>
        </td>
        <td>
            <a href="controls/circulargauge/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/circular-gauge/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/circular-gauge/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-diagram?utm_medium=listing&utm_source=github"><b>Diagram</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-diagrams"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-diagrams" title="@syncfusion/ej2-diagrams" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-diagrams"><img src="https://ej2.syncfusion.com/badges/ej2-diagrams/coverage.svg" alt="code coverage of @syncfusion/ej2-diagrams" title="@syncfusion/ej2-diagrams" /></a>
        </td>
        <td>
            <a href="controls/diagrams/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/diagram/default-functionalities.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/diagram/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-heatmap-chart?utm_medium=listing&utm_source=github"><b>HeatMap Chart</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-heatmap"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-heatmap" title="@syncfusion/ej2-heatmap" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-heatmap"><img src="https://ej2.syncfusion.com/badges/ej2-heatmap/coverage.svg" alt="code coverage of @syncfusion/ej2-heatmap" title="@syncfusion/ej2-heatmap" /></a>
        </td>
        <td>
            <a href="controls/heatmap/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/heatmap/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/heatmap-chart/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-linear-gauge?utm_medium=listing&utm_source=github"><b>Linear Gauge</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-lineargauge"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-lineargauge" title="@syncfusion/ej2-lineargauge" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-lineargauge"><img src="https://ej2.syncfusion.com/badges/ej2-lineargauge/coverage.svg" alt="code coverage of @syncfusion/ej2-lineargauge" title="@syncfusion/ej2-lineargauge" /></a>
        </td>
        <td>
            <a href="controls/lineargauge/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/linear-gauge/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/linear-gauge/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-maps?utm_medium=listing&utm_source=github"><b>Maps</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-maps"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-maps" title="@syncfusion/ej2-maps" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-maps"><img src="https://ej2.syncfusion.com/badges/ej2-maps/coverage.svg" alt="code coverage of @syncfusion/ej2-maps" title="@syncfusion/ej2-maps" /></a>
        </td>
        <td>
            <a href="controls/maps/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/maps/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/maps/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-range-selector?utm_medium=listing&utm_source=github"><b>Range Selector</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>
        </td>
        <td>
            <a href="controls/charts/src/range-navigator">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/range-navigator/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/range-navigator/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-smith-chart?utm_medium=listing&utm_source=github"><b>Smith Chart</b></a>
        </td>
        <td>
            <a href="controls/charts/src/smithchart">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/smith-chart/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/smithchart/getting-started/">Documentation</a>
        </td>
    </tr>
        <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-barcode?utm_medium=listing&utm_source=github"><b>Barcode Generator</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-barcode-generator"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-barcode-generator" title="@syncfusion/ej2-barcode-generator" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-barcode-generator"><img src="https://ej2.syncfusion.com/badges/ej2-barcode-generator/coverage.svg" alt="code coverage of @syncfusion/ej2-barcode-generator" title="@syncfusion/ej2-barcode-generator" /></a>
        </td>
        <td>
            <a href="controls/barcodegenerator/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/javascript/demos/#/material/barcode/ean8.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/barcode/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-sparkline?utm_medium=listing&utm_source=github"><b>Sparkline Charts</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>
        </td>
        <td>
            <a href="controls/charts/src/sparkline">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/sparkline/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/sparkline/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-treemap?utm_medium=listing&utm_source=github"><b>TreeMap</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-treemap"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-treemap" title="@syncfusion/ej2-treemap" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-treemap"><img src="https://ej2.syncfusion.com/badges/ej2-treemap/coverage.svg" alt="code coverage of @syncfusion/ej2-treemap" title="@syncfusion/ej2-treemap" /></a>
        </td>
        <td>
            <a href="controls/treemap/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/treemap/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/treemap/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-bullet-chart?utm_medium=listing&utm_source=github"><b>Bullet Chart</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-charts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-charts"><img src="https://ej2.syncfusion.com/badges/ej2-charts/coverage.svg" alt="code coverage of @syncfusion/ej2-charts" title="@syncfusion/ej2-charts" /></a>
        </td>
        <td>
            <a href="controls/charts/src/bullet-chart">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/bullet-chart/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/bullet-chart/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-kanban-board?utm_medium=listing&utm_source=github"><b>Kanban</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-kanban"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-kanban" title="@syncfusion/ej2-kanban" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-kanban"><img src="https://ej2.syncfusion.com/badges/ej2-kanban/coverage.svg" alt="code coverage of @syncfusion/ej2-kanban" title="@syncfusion/ej2-kanban" /></a>
        </td>
        <td>
            <a href="controls/kanban/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/kanban/overview.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/kanban/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Calendars

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-scheduler?utm_medium=listing&utm_source=github"><b>Scheduler</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-schedule"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-schedule" title="@syncfusion/ej2-schedule" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-schedule"><img src="https://ej2.syncfusion.com/badges/ej2-schedule/coverage.svg" alt="code coverage of @syncfusion/ej2-schedule" title="@syncfusion/ej2-schedule" /></a>
        </td>
        <td>
            <a href="controls/schedule/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/schedule/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/schedule/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-calendar?utm_medium=listing&utm_source=github"><b>Calendar</b></a>
        </td>
        <td rowspan="5">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-calendars"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-calendars" title="@syncfusion/ej2-calendars" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-calendars"><img src="https://ej2.syncfusion.com/badges/ej2-calendars/coverage.svg" alt="code coverage of @syncfusion/ej2-calendars" title="@syncfusion/ej2-calendars" /></a>
        </td>
        <td>
            <a href="controls/calendars/src/calendar">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/calendar/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/calendar/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-datepicker?utm_medium=listing&utm_source=github"><b>DatePicker</b></a>
        </td>
        <td>
            <a href="controls/calendars/src/datepicker">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/datepicker/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/datepicker/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-daterangepicker?utm_medium=listing&utm_source=github"><b>DateRangePicker</b></a>
        </td>
        <td>
            <a href="controls/calendars/src/daterangepicker">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/daterangepicker/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/daterangepicker/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-datetime-picker?utm_medium=listing&utm_source=github"><b>DateTime Picker</b></a>
        </td>
        <td>
            <a href="controls/calendars/src/datetimepicker">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/datetimepicker/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/datetimepicker/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-timepicker?utm_medium=listing&utm_source=github"><b>TimePicker</b></a>
        </td>
        <td>
            <a href="controls/calendars/src/timepicker">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/timepicker/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/timepicker/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-gantt-chart?utm_medium=listing&utm_source=github"><b>Gantt Chart</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-gantt"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-gantt" title="@syncfusion/ej2-gantt" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-gantt"><img src="https://ej2.syncfusion.com/badges/ej2-gantt/coverage.svg" alt="code coverage of @syncfusion/ej2-gantt" title="@syncfusion/ej2-gantt" /></a>
        </td>
        <td>
            <a href="controls/gantt/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/gantt/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/gantt/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Navigation

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-accordion?utm_medium=listing&utm_source=github"><b>Accordion</b></a>
        </td>
        <td rowspan="7">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-navigations"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-navigations" title="@syncfusion/ej2-navigations" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-navigations"><img src="https://ej2.syncfusion.com/badges/ej2-navigations/coverage.svg" alt="code coverage of @syncfusion/ej2-navigations" title="@syncfusion/ej2-navigations" /></a>
        </td>
        <td>
            <a href="controls/navigations/src/accordion">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/accordion/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/accordion/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-context-menu?utm_medium=listing&utm_source=github"><b>Context Menu</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/context-menu">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/context-menu/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/context-menu/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-menu-bar?utm_medium=listing&utm_source=github"><b>Menu Bar</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/menu">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/menu/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/menu/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-sidebar?utm_medium=listing&utm_source=github"><b>Sidebar</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/sidebar">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/sidebar/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/sidebar/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-tabs?utm_medium=listing&utm_source=github"><b>Tabs</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/tab">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/tab/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/tab/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-toolbar?utm_medium=listing&utm_source=github"><b>Toolbar</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/toolbar">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/toolbar/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/toolbar/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-treeview?utm_medium=listing&utm_source=github"><b>TreeView</b></a>
        </td>
        <td>
            <a href="controls/navigations/src/treeview">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/treeview/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/treeview/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-file-manager?utm_medium=listing&utm_source=github"><b>File Manager</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-filemanager"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-filemanager" title="@syncfusion/ej2-filemanager" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-filemanager"><img src="https://ej2.syncfusion.com/badges/ej2-filemanager/coverage.svg" alt="code coverage of @syncfusion/ej2-filemanager" title="@syncfusion/ej2-filemanager" /></a>
        </td>
        <td>
            <a href="controls/filemanager/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/file-manager/overview.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/file-manager/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Buttons

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-button?utm_medium=listing&utm_source=github"><b>Button</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
        </td>
        <td>
            <a href="controls/buttons/src/button">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/button/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-button-group?utm_medium=listing&utm_source=github"><b>Button Group</b></a>
        </td>
        <td rowspan="4">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-splitbuttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-splitbuttons" title="@syncfusion/ej2-splitbuttons" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-splitbuttons"><img src="https://ej2.syncfusion.com/badges/ej2-splitbuttons/coverage.svg" alt="code coverage of @syncfusion/ej2-splitbuttons" title="@syncfusion/ej2-splitbuttons" /></a>
        </td>
        <td>
            <a href="controls/splitbuttons/src/button-group">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/button-group.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/button-group/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-dropdown-menu?utm_medium=listing&utm_source=github"><b>Dropdown Menu</b></a>
        </td>
        <td>
            <a href="controls/splitbuttons/src/drop-down-button">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/dropdown-button.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/drop-down-button/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-progress-button?utm_medium=listing&utm_source=github"><b>Progress Button</b></a>
        </td>
        <td>
            <a href="controls/splitbuttons/src/progress-button">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/progress-button.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/progress-button/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-split-button?utm_medium=listing&utm_source=github"><b>Split Button</b></a>
        </td>
        <td>
            <a href="controls/splitbuttons/src/split-button">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/button/split-button.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/split-button/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-chips?utm_medium=listing&utm_source=github"><b>Chips</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-buttons"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-buttons"><img src="https://ej2.syncfusion.com/badges/ej2-buttons/coverage.svg" alt="code coverage of @syncfusion/ej2-buttons" title="@syncfusion/ej2-buttons" /></a>
        </td>
        <td>
            <a href="controls/buttons/src/chips">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/chips/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/chips/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Layout

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-avatar?utm_medium=listing&utm_source=github"><b>Avatar</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-layouts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-layouts"><img src="https://ej2.syncfusion.com/badges/ej2-layouts/coverage.svg" alt="code coverage of @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a>
        </td>
        <td>
            <a href="controls/layouts/styles/avatar">Styles</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/avatar/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/avatar/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-card?utm_medium=listing&utm_source=github"><b>Card</b></a>
        </td>
        <td>
            <a href="controls/layouts/styles/card">Styles</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/card/basic.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/card/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-modal-dialog?utm_medium=listing&utm_source=github"><b>Dialog</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-popups"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-popups" title="@syncfusion/ej2-popups" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-popups"><img src="https://ej2.syncfusion.com/badges/ej2-popups/coverage.svg" alt="code coverage of @syncfusion/ej2-popups" title="@syncfusion/ej2-popups" /></a>
        </td>
        <td>
            <a href="controls/popups/src/dialog">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/dialog/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/dialog/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-listview?utm_medium=listing&utm_source=github"><b>ListView</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-lists"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-lists" title="@syncfusion/ej2-lists" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-lists"><img src="https://ej2.syncfusion.com/badges/ej2-lists/coverage.svg" alt="code coverage of @syncfusion/ej2-lists" title="@syncfusion/ej2-lists" /></a>
        </td>
        <td>
            <a href="controls/lists/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/listview/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/listview/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-tooltip?utm_medium=listing&utm_source=github"><b>Tooltip</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-popups"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-popups" title="@syncfusion/ej2-popups" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-popups"><img src="https://ej2.syncfusion.com/badges/ej2-popups/coverage.svg" alt="code coverage of @syncfusion/ej2-popups" title="@syncfusion/ej2-popups" /></a>
        </td>
        <td>
            <a href="controls/popups/src/tooltip">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/tooltip/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/tooltip/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-splitter?utm_medium=listing&utm_source=github"><b>Splitter</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-layouts"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-layouts"><img src="https://ej2.syncfusion.com/badges/ej2-layouts/coverage.svg" alt="code coverage of @syncfusion/ej2-layouts" title="@syncfusion/ej2-layouts" /></a>
        </td>
        <td>
            <a href="controls/layouts/src/splitter">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/splitter/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/splitter/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-dashboard-layout?utm_medium=listing&utm_source=github"><b>Dashboard Layout</b></a>
        </td>
        <td>
            <a href="controls/layouts/src/dashboard-layout">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/dashboard-layout/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/dashboard-layout/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Notifications

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-badge?utm_medium=listing&utm_source=github"><b>Badge</b></a>
        </td>
        <td rowspan="2">
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-notifications"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-notifications" title="@syncfusion/ej2-notifications" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-notifications"><img src="https://ej2.syncfusion.com/badges/ej2-notifications/coverage.svg" alt="code coverage of @syncfusion/ej2-notifications" title="@syncfusion/ej2-notifications" /></a>
        </td>
        <td>
            <a href="controls/notifications/styles/badge">Styles</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/badge/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/badge/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-toast?utm_medium=listing&utm_source=github"><b>Toast</b></a>
        </td>
        <td>
            <a href="controls/notifications/src/toast">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/toast/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/toast/getting-started/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-progressbar?utm_medium=listing&utm_source=github"><b>Progress Bar</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-progressbar"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-progressbar" title="@syncfusion/ej2-progressbar" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-progressbar"><img src="https://ej2.syncfusion.com/badges/ej2-progressbar/coverage.svg" alt="code coverage of @syncfusion/ej2-progressbar" title="@syncfusion/ej2-progressbar" /></a>
        </td>
        <td>
            <a href="controls/progressbar/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/progress-bar/linear/">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/progress-bar/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

### Forms

<table>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-form-validation?utm_medium=listing&utm_source=github"><b>Form Validation</b></a>
        </td>
         <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-inputs"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-inputs"><img src="https://ej2.syncfusion.com/badges/ej2-inputs/coverage.svg" alt="code coverage of @syncfusion/ej2-inputs" title="@syncfusion/ej2-inputs" /></a>
        </td>
        <td>
            <a href="controls/inputs/src/form-validator">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos#/material/form-validator/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/form-validator/validation-rules/">Documentation</a>
        </td>
    </tr>
    <tr>
        <td>
            <a href="https://www.syncfusion.com/javascript-ui-controls/js-query-builder?utm_medium=listing&utm_source=github"><b>Query Builder</b></a>
        </td>
        <td>
            <a href="https://www.npmjs.com/package/@syncfusion/ej2-querybuilder"><img src="https://ej2.syncfusion.com/github/images/npm-logo.png" alt="npm package @syncfusion/ej2-querybuilder" title="@syncfusion/ej2-querybuilder" /></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="https://ej2.syncfusion.com/badges/ej2-querybuilder"><img src="https://ej2.syncfusion.com/badges/ej2-querybuilder/coverage.svg" alt="code coverage of @syncfusion/ej2-querybuilder" title="@syncfusion/ej2-querybuilder" /></a>
        </td>
        <td>
            <a href="controls/querybuilder/src">Source</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/demos/#/material/query-builder/default.html">Live demo</a>
        </td>
        <td>
            <a href="https://ej2.syncfusion.com/documentation/query-builder/getting-started/">Documentation</a>
        </td>
    </tr>
</table>

## Supported Frameworks

| [<img src="https://ej2.syncfusion.com/github/images/angular.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/react.svg"  height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/blazor.svg" height="50" />](https://www.syncfusion.com/blazor-components?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Blazor](https://www.syncfusion.com/blazor-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; |
| :-----: | :-----: | :-----: | :-----: | :-----: | :-----: |

## Showcase Applications

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/angular/appointmentplanner/#/dashboard">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/appointment-planner.png" alt="Appointment Planner"
                title="Appointment Planner" align="middle" />
        </kbd>
        <br /><br />
        <span><b>Appointment Planner</b></span>
    </a>

</p>
<br /><br />

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/angular/diagrambuilder/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/diagram-builder.png" alt="Diagram Builder"
                title="Diagram Builder" align="middle" />
        </kbd>
        <br /><br />
        <span><b>Diagram Builder</b></span>
    </a>
</p>
<br /><br />
<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/angular/stockchart">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/stock-chart.png" alt="Stock Chart" title="Stock Chart"
                align="middle" />
        </kbd>
        <br /><br />
        <span><b>Stock Chart</b></span>
    </a>
</p>
<br /><br />

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/vue/assetmanagement/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/asset-management.png" alt="IT Asset Management"
                title="IT Asset Management" align="middle" />
        </kbd>
        <br /><br />
        <span><b>IT Asset Management</b></span>
    </a>
</p>
<br /><br />

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/typescript/webmail/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/web-mail.png" alt="Web Mail" title="Web Mail"
                align="middle" />
        </kbd>
        <br /><br />
        <span><b>Web Mail</b></span>
    </a>
</p>
<br /><br />

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/typescript/loancalculator/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/loan-calculator.png" alt="Loan Calculator"
                title="Loan Calculator" align="middle" />
        </kbd>
        <br /><br />
        <span><b>Loan Calculator</b></span>
    </a>
</p>
<br /><br />

<p align="center">
    <a href="https://ej2.syncfusion.com/showcase/typescript/healthtracker/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/health-tracker.png" alt="Health Tracker"
                title="Health Tracker" align="middle" />
        </kbd>
        <br /><br />
        <span><b>Health Tracker</b></span>
    </a>
</p>
<br /><br />

<p align="center">
    <a href="https://aspdotnetcore.syncfusion.com/showcase/aspnetcore/task-planner/">
        <kbd>
            <img src="https://ej2.syncfusion.com/github/images/task-planner.png" alt="Task Planner" title="Task Planner"
                align="middle" />
        </kbd>
        <br /><br />
        <span><b>Task Planner</b></span>
    </a>
</p>
<br /><br />

## Resources
* [Documentation](https://ej2.syncfusion.com/documentation/)
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
* [Custom Resource Generator](https://crg.syncfusion.com/)
* [Contact Support](https://www.syncfusion.com/support/directtrac/incidents/newincident?utm_medium=listing&utm_source=github)
* [Forums](https://www.syncfusion.com/forums/essential-js2?utm_medium=listing&utm_source=github)
* [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github)
* [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github)
* [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github)

## Release Notes
 Please refer this [link](https://ej2.syncfusion.com/documentation/release-notes/index/)

## License
 This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase [here](https://www.syncfusion.com/sales/products) or start a free 30-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials).
 A free [community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.
     © Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.
    The Syncfusion Essential Studio license and copyright applies to this distribution.
