# Alerts

You can add the component on any page in the template. You need to follow the steps given below:&#x20;

**Step 1:** Please add the code given below in the page where you want to add the component.

```
<Alert color="primary">
		This is a primary alert — check it out!
</Alert>
```

**Step 2:** Now Import the component from its parent library.

```
import { Alert } from 'reactstrap';
```

We have given you an example of adding a simple alert on the Ecommerce Dashboard.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbwEZuisg5H4GTxqS-t%2F-LbwIetmgFfYFWMNVEsF%2FSelection_023.png?alt=media\&token=26393193-5b64-4541-a3e0-f47ee0f1a616)

You can check some other layouts of alerts below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->alert->components` folder.&#x20;

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbhbZDabDyeuMK8_alA%2F-Lbhbg8W7vmFejnrzICc%2FScreenshot%202019-04-05%20at%206.38.42%20PM.png?alt=media\&token=1d77dcbb-8020-42c3-b26e-e0f0c8a12529)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbhbZDabDyeuMK8_alA%2F-LbhbkVKPBrcZVbIs4mz%2FScreenshot%202019-04-05%20at%206.38.57%20PM.png?alt=media\&token=11bbcd1c-d5a6-4cd7-9c7a-7b00d8b48b10)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbhbZDabDyeuMK8_alA%2F-LbhbqA3wD7M40v06c8O%2FScreenshot%202019-04-05%20at%206.39.08%20PM.png?alt=media\&token=fc66ac4d-9588-431a-844f-8f2176cf1c5f)
