### Install Navigations Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/navigations/README.md

Use this command to install the navigations package and its dependencies.

```sh
npm install @syncfusion/ej2-react-navigations
```

--------------------------------

### Install MultiColumn ComboBox

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/multicolumncombobox/README.md

Install the MultiColumn ComboBox and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-multicolumn-combobox
```

--------------------------------

### Install ej2-react-popups

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/popups/README.md

Install the popup components and their dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-popups
```

--------------------------------

### Install EJ2 React Layouts Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/layouts/README.md

Use this command to install the Layout components and their dependencies.

```sh
npm install @syncfusion/ej2-react-layouts
```

--------------------------------

### Install Calendars Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/calendars/README.md

Use this command to install the calendars package and its dependencies.

```sh
npm install @syncfusion/ej2-react-calendars
```

--------------------------------

### Install Dropdowns Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/dropdowns/README.md

Install the @syncfusion/ej2-react-dropdowns package using npm. This command installs the core dropdowns functionality for React applications.

```bash
npm install @syncfusion/ej2-react-dropdowns
```

--------------------------------

### Create React App and Install Dependencies

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Use create-react-app to set up a new React project and install necessary packages.

```bash
npm install -g create-react-app
create-react-app quickstart
cd quickstart
npm install
```

--------------------------------

### Install ej2-react-base

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/README.md

Install the ej2-react-base package and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-base
```

--------------------------------

### Install EJ2 React Inputs Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/inputs/README.md

Use this command to install the @syncfusion/ej2-react-inputs package and its dependencies.

```sh
npm install @syncfusion/ej2-react-inputs
```

--------------------------------

### Install React Lists Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/lists/README.md

Install the ej2-react-lists package and its dependencies using npm.

```sh
npm install @syncfusion/ej2-react-lists
```

--------------------------------

### Render Syncfusion Kanban Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/kanban/README.md

Integrate the KanbanComponent into your React application. This example demonstrates basic setup with data binding, key field, and column definitions.

```typescript
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import * as React from 'react';
import './App.css';

function App() {
    let data = [
        { Id: 1, Status: 'Open', Summary: 'Analyze the new requirements gathered from the customer.', Type: 'Story', Priority: 'Low', Tags: 'Analyze,Customer', Estimate: 3.5, Assignee: 'Nancy Davloio', RankId: 1 },
        { Id: 2, Status: 'InProgress', Summary: 'Fix the issues reported in the IE browser.', Type: 'Bug', Priority: 'Release Breaker', Tags: 'IE', Estimate: 2.5, Assignee: 'Janet Leverling', RankId: 2  },
        { Id: 3, Status: 'Testing', Summary: 'Fix the issues reported by the customer.', Type: 'Bug', Priority: 'Low', Tags: 'Customer', Estimate: '3.5', Assignee: 'Steven walker', RankId: 1 },
        { Id: 4, Status: 'Close', Summary: 'Arrange a web meeting with the customer to get the login page requirements.', Type: 'Others', Priority: 'Low', Tags: 'Meeting', Estimate: 2, Assignee: 'Michael Suyama', RankId: 1 },
        { Id: 5, Status: 'Validate', Summary: 'Validate new requirements', Type: 'Improvement', Priority: 'Low', Tags: 'Validation', Estimate: 1.5, Assignee: 'Robert King', RankId: 1 }
    ];
    return (
            <div className="App">
                <KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }}>
                    <ColumnsDirective>
                    <ColumnDirective headerText="To Do" keyField="Open"/>
                    <ColumnDirective headerText="In Progress" keyField="InProgress"/>
                    <ColumnDirective headerText="Testing" keyField="Testing"/>
                    <ColumnDirective headerText="Done" keyField="Close"/>
                    </ColumnsDirective>
                </KanbanComponent>
            </div>
          );
};
export default App;
```

--------------------------------

### Install React In-place Editor

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/inplaceeditor/README.md

Install the In-place Editor component and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-inplace-editor
```

--------------------------------

### Install SplitButtons Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/splitbuttons/README.md

Use npm to install the SplitButtons package and its dependencies.

```sh
npm install @syncfusion/ej2-react-splitbuttons
```

--------------------------------

### Install React Query Builder Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/querybuilder/README.md

Install the Syncfusion React Query Builder package using npm.

```bash
npm install @syncfusion/ej2-react-querybuilder --save
```

--------------------------------

### Install Interactive Chat Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/interactivechat/README.md

Use this command to install the @syncfusion/ej2-react-interactive-chat package and its dependencies.

```sh
npm install @syncfusion/ej2-react-interactive-chat
```

--------------------------------

### Features Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example demonstrating how to document features for a control, including the required ID format and the use of escape sequences for the '#' symbol.

```markdown
### Features
{:#ejaccordion-features}

* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303, #140304 - Accordion provides option to add new items dynamically by using the `addItem` method
```

--------------------------------

### Install React HeatMap Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/heatmap/README.md

Command to install the Syncfusion React HeatMap package using npm.

```sh
npm install @syncfusion/ej2-react-heatmap --save
```

--------------------------------

### Breaking Changes Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example illustrating how to document breaking changes, including the required ID format and the structure for listing each change.

```markdown
### Breaking Changes
{:#ejaccordion-breaking-changes}

* Now, Circular series end angle will not be adjusted based on the start angle, so the output will be like semi-circle instead of full circle. In order to render the complete circular series with customized start angle, you have to add the start angle value to end angle property now. This break will occur only if you have specified startAngle already 
```

--------------------------------

### Install Schedule Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/schedule/README.md

Install the Syncfusion React Schedule component and its dependent packages using npm.

```sh
npm install @syncfusion/ej2-react-schedule
```

--------------------------------

### Install Notifications Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/notifications/README.md

Install the Syncfusion React Notifications component and its dependencies using npm.

```sh
npm install @syncfusion/ej2-react-notifications
```

--------------------------------

### Install React Ribbon Component

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/ribbon/README.md

Install the Ribbon component and its dependent packages using npm. This command saves the packages to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-ribbon --save
```

--------------------------------

### Install Syncfusion React Document Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/documenteditor/README.md

Install the Syncfusion React Document Editor package from npm.

```bash
npm install @syncfusion/ej2-react-documenteditor --save
```

--------------------------------

### Install React Block Editor Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/blockeditor/README.md

Install the Block Editor package using npm. This is the first step to integrate the editor into your React application.

```sh
npm install @syncfusion/ej2-react-blockeditor
```

--------------------------------

### Install Syncfusion Kanban Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/kanban/README.md

Install the Syncfusion Kanban component and its dependencies using npm. This command adds the necessary package to your project's node_modules folder.

```bash
npm install @syncfusion/ej2-react-kanban --save
```

--------------------------------

### Install Syncfusion React Grid Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/grids/README.md

Install the Syncfusion React Grid package from npm. This command adds the necessary grid components and their dependencies to your project.

```bash
npm install @syncfusion/ej2-react-grids --save
```

--------------------------------

### Install Syncfusion Gantt Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/gantt/README.md

Install the Syncfusion React Gantt package using npm. This command adds the Gantt component to your project dependencies.

```bash
npm install @syncfusion/ej2-react-gantt --save
```

--------------------------------

### Install Syncfusion Pivot Table Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/pivotview/README.md

Install the Syncfusion React Pivot Table package from npm. This command adds the necessary component files to your project.

```bash
npm install @syncfusion/ej2-react-pivotview --save
```

--------------------------------

### Install Syncfusion React Diagram Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/diagrams/README.md

Install the Syncfusion React Diagram package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-diagrams --save
```

--------------------------------

### Install Syncfusion React Chart Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/charts/README.md

Install the necessary Syncfusion React Chart package from npm. This command adds the chart package as a dependency to your project.

```bash
npm install @syncfusion/ej2-react-charts --save
```

--------------------------------

### Install Syncfusion React Spreadsheet Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/spreadsheet/README.md

Install the Syncfusion React Spreadsheet package using npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-spreadsheet --save
```

--------------------------------

### Install Syncfusion React TreeGrid Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treegrid/README.md

Install the Syncfusion React TreeGrid package from npm. This command adds the necessary library to your project's dependencies.

```bash
npm install @syncfusion/ej2-react-treegrid --save
```

--------------------------------

### Bug Fixes Section Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

An example of documenting bug fixes for a control, adhering to the specified ID format and list structure. Note the use of escape sequences for '#'.

```markdown
### Bug Fixes
{:#ejaccordion-bug-fixes}

* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303 - Accordion provides option to add new items dynamically by using the `addItem` method
* #140303, #140304 - Accordion provides option to add new items dynamically by using the `addItem` method
```

--------------------------------

### Release Notes Formatting Example

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/base/releasenotes/README.md

Demonstrates the markdown format for release notes, including bug fixes and issue tracking identifiers.

```markdown
## ChromelessWindow

### Bug Fixes
{:#chromelesswindow-bug-fixes}

* #I336220 - When using `ShowDialog` on a `RibbonWindow`, a `NullReferenceException` will no longer occur.
* #F166385 - The gap between the bottom of the window and the `TaskBar` is now properly maintained.

```

--------------------------------

### Create React Application with Vite

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/richtexteditor/README.md

Scaffold a new React + TypeScript project using Vite, navigate into the project directory, and start the development server.

```bash
npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev
```

--------------------------------

### Install Syncfusion Barcode Generator Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/barcodegenerator/README.md

Command to install the Syncfusion React Barcode Generator package from npm.

```bash
npm install @syncfusion/ej2-react-barcode-generator --save
```

--------------------------------

### Create React App with TypeScript

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/barcodegenerator/README.md

Command to create a new React application using create-react-app with the TypeScript template.

```bash
npx create-react-app my-app --template typescript
cd my-app
npm start
```

--------------------------------

### Install Syncfusion TreeMap Package

Source: https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/treemap/README.md

Install the Syncfusion React TreeMap package from npm. This command adds the necessary library to your project's dependencies.

```sh
npm install @syncfusion/ej2-react-treemap --save
```