---
description: >-
  Reactify provides you the ability to add widgets in the template. Please check
  the detailed documentation to learn, how to add the new widgets in the
  template.
---

# Adding Widgets

### Adding a new widget

Please follow the given steps to add a new widget in the template. We are taking an example of adding a "New Widget" on the "Ecommerce Dashboard" but you can add any widget on any of the dashboard in the template:

**Step 1:** Please create a new widget file(of extension .js) in the folder `src->components->Widgets`. Like We have created a file named `NewWidget.js` in the same folder.

**Step 2:** Now add the code in the widget file as per your requirements. For Example we have added the simple text block in the widget file as given in the code snippet below:

{% code title="NewWidget.js" %}
```javascript
/**
 * new widget
 */
import React, { Component } from 'react';

export default class NewWidget extends Component {
	render() {
		return (
			<div className="new-widget">
				<div className="bg-primary p-50 mb-30">
               <h2 className="text-light">{'This is a new widget'}</h2>
            </div>
			</div>
		)
	}
};
```
{% endcode %}

**Step 3:** Open the `index.js` file from the `src->components->Widgets` and import and then export the widget in the `export` array like given in the code snippet below:

{% code title="index.js" %}
```javascript
// Imported New Widget
const NewWidget = Loadable({
   loader: () => import("./NewWidget"),
   loading: MyLoadingComponent
})

export {
   ...
   TwitterFeedsV2,
   // Exported New Widget
   NewWidget
}
```
{% endcode %}

**Step 4:** Open `src->routes->dashboard->ecommerce->index.js` file and add the `NewWidget` in the `div` section `<div className="ecom-dashboard-wrapper">` as given in the code and also import the `NewWidget` at the top like other import statements already imported.

{% code title="index.js" %}
```javascript
import React, { Component } from 'react'

// intl messages
import IntlMessages from 'Util/IntlMessages';

// page title bar
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// Newly added widget import statement
import { NewWidget } from 'Components/Widgets';

export default class EcommerceDashboard extends Component {
   render() {
      const { match } = this.props;
      return (
         <div className="ecom-dashboard-wrapper">
            <PageTitleBar title={<IntlMessages id="sidebar.ecommerce" />} match={match} />

            // Newly added widget div section
            <NewWidget />
         </div>
      )
   }
}
```
{% endcode %}

Now save the file and open the browser, you will see your newly added widget on your dashboard like below screenshot:

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-Lbvcftx8csIjm42pkNh%2F-Lbvhu9lVyQCdxnQC63R%2FSelection_022.png?alt=media\&token=36bcb0a0-ad85-4203-bcae-03d72edaa50e)

### Adding an existing widget

Please follow the given steps to add an existing widget in the template. We are taking an example of adding a "ToDo List" on the "Ecommerce Dashboard" but you can add any widget on any of the dashboard in the template:

**Step 1:** Open `src->routes->dashboard->ecommerce->index.js` file and add the `TodoListWidget` in the `div` section `<div className="ecom-dashboard-wrapper">` as given in the code and also import the `TodoListWidget` at the top like other import statements already imported.

{% code title="index.js" %}
```javascript
/**
 * Ecommerce Dashboard
 */

import React, { Component } from 'react'
import IntlMessages from 'Util/IntlMessages';
import PageTitleBar from 'Components/PageTitleBar/PageTitleBar';

// Newly added widget import statement
import TodoListWidget from 'Components/Widgets';

export default class EcommerceDashboard extends Component {
   render() {
      const { match } = this.props;
      return (
         <div className="ecom-dashboard-wrapper">
            <PageTitleBar title={<IntlMessages id="sidebar.ecommerce" />} match={match} />
            
            // Newly added widget div section
            <TodoListWidget />
            
         </div>
      )
   }
}
```
{% endcode %}

Now save the file and open the browser, you will see your newly added widget on your dashboard like below screenshot:

![Added Todo List on Ecommerce Dashboard](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-L_VvDyYOKrrEaHEqtIa%2F-L_W2fiOM2uimd5zebVr%2FSelection_009.png?alt=media\&token=2875630a-1bf6-4797-8e75-66ba8838d395)

{% hint style="info" %}
It does not matters whether you are using the seed project or the complete template, the steps remains the same for both.
{% endhint %}
