> For the complete documentation index, see [llms.txt](https://iron-network.gitbook.io/reactify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://iron-network.gitbook.io/reactify/reactify-redux-thunk-saga/ui-components/list.md).

# List

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

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

```
<List className="p-0">
		<ListItem button>
			<ListItemIcon><i className="zmdi zmdi-inbox zmdi-hc-lg"></i></ListItemIcon>
			<ListItemText primary="Inbox (2)" />
		</ListItem>
		<ListItem button>
			<ListItemIcon><i className="zmdi zmdi-folder-star-alt zmdi-hc-lg"></i></ListItemIcon>
			<ListItemText primary="Drafts" />
		</ListItem>
		<ListItem button>
			<ListItemIcon><i className="zmdi zmdi-mail-send zmdi-hc-lg"></i></ListItemIcon>
			<ListItemText primary="Send" />
		</ListItem>
</List>
```

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

```
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
```

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

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbweM5JhxrD9eF7AqeH%2F-Lbwfn4VWd9lW_6BuEHT%2FSelection_040.png?alt=media\&token=f092a3f3-2bd6-4893-a1f2-4d2ec490499f)

You can check some other layouts of list below. For adding any of the below layout in the template, please check their relative code in the `src->routes->components->list->component` folder.

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvP11UgKU4MlVzPa8h%2F-LbvQ1sQVE-NPlLm_mEG%2FScreenshot%202019-04-08%20at%2010.57.56%20AM.png?alt=media\&token=17d9fd28-4c5e-4444-9c73-e13aac59bbae)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvP11UgKU4MlVzPa8h%2F-LbvQ3XZeZRbPsxdx5M5%2FScreenshot%202019-04-08%20at%2010.58.40%20AM.png?alt=media\&token=8139f8ca-9566-483b-9580-375498b5c95d)

![](https://3423697845-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEnOfkACC-WsXr2rO7I%2F-LbvP11UgKU4MlVzPa8h%2F-LbvQ5JwCY0GVn1R-CRJ%2FScreenshot%202019-04-08%20at%2010.59.16%20AM.png?alt=media\&token=af48af36-4f96-4e26-87f4-09d8c8f67bd9)