diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 00000000..afc69eba
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,4 @@
+test/coverage/
+es/
+lib/
+umd/
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 00000000..54445846
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,38 @@
+{
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "extends": ["eslint:recommended", "plugin:react/recommended"],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "arrowFunctions": true,
+      "blockBindings": true,
+      "defaultParams": true,
+      "destructuring": true,
+      "forOf": true,
+      "generators": true,
+      "objectLiteralComputedProperties": true,
+      "objectLiteralShorthandMethods": true,
+      "objectLiteralShorthandProperties": true,
+      "experimentalObjectRestSpread": true,
+      "restParams": true,
+      "spread": true,
+      "templateStrings": true,
+      "modules": true,
+      "classes": true
+    }
+  },
+  "plugins": [
+    "react"
+  ],
+  "root": true,
+  "rules": {
+    "comma-dangle": 0,
+    "linebreak-style": 0
+  }
+}
diff --git a/package.json b/package.json
index 00edfca9..3501dcf7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coreui/react",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.5",
   "description": "CoreUI React Bootstrap 4 components",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -16,28 +16,34 @@
     "start": "nwb serve-react-demo",
     "test": "nwb test-react",
     "test:coverage": "nwb test-react --coverage",
-    "test:watch": "nwb test-react --server"
+    "test:watch": "nwb test-react --server",
+    "lint": "eslint src"
   },
   "dependencies": {
     "bootstrap": "4.0.0",
     "classnames": "^2.2.5",
+    "prop-types": "^15.6.1",
     "flag-icon-css": "^3.0.0",
-    "font-awesome": "4.7.0",
-    "react-perfect-scrollbar": "^1.0.0",
+    "font-awesome": "^4.7.0",
+    "react-perfect-scrollbar": "^1.0.5",
     "react-router-dom": "^4.2.2",
-    "reactstrap": "5.0.0-beta",
-    "simple-line-icons": "2.4.1"
+    "reactstrap": "^5.0.0",
+    "simple-line-icons": "^2.4.1"
   },
   "peerDependencies": {
     "react": "16.x"
   },
   "devDependencies": {
+    "babel-eslint": "^8.2.2",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
+    "eslint": "^4.19.1",
+    "eslint-plugin-import": "^2.10.0",
+    "eslint-plugin-react": "^7.7.0",
     "nwb": "0.21.x",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "sinon": "^4.4.9"
+    "react": "^16.3.1",
+    "react-dom": "^16.3.1",
+    "sinon": "^4.5.0"
   },
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
diff --git a/src/Aside.js b/src/Aside.js
index 1c0879db..df7134fd 100644
--- a/src/Aside.js
+++ b/src/Aside.js
@@ -11,7 +11,7 @@ const propTypes = {
   hidden: PropTypes.bool,
   isOpen: PropTypes.bool,
   offCanvas: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
@@ -20,7 +20,7 @@ const defaultProps = {
   fixed: false,
   hidden: false,
   isOpen: false,
-  offCanvas: true,
+  offCanvas: true
 };
 
 class AppAside extends Component {
diff --git a/src/AsideToggler.js b/src/AsideToggler.js
index 7b4a4917..43ff1e5c 100644
--- a/src/AsideToggler.js
+++ b/src/AsideToggler.js
@@ -10,14 +10,14 @@ const propTypes = {
   display: PropTypes.any,
   mobile: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  type: PropTypes.string,
+  type: PropTypes.string
 };
 
 const defaultProps = {
   display: 'lg',
   mobile: false,
   tag: 'button',
-  type: 'button',
+  type: 'button'
 };
 
 class AppAsideToggler extends Component {
@@ -51,10 +51,10 @@ class AppAsideToggler extends Component {
 
     return (
       <button
-        type="button"
-        className={classes}
-        {...attributes}
-        onClick={this.asideToggle}
+          type="button"
+          className={classes}
+          {...attributes}
+          onClick={this.asideToggle}
       >
         {children || <span className="navbar-toggler-icon" />}
       </button>
diff --git a/src/Breadcrumb.js b/src/Breadcrumb.js
index cf97f164..54eace8f 100644
--- a/src/Breadcrumb.js
+++ b/src/Breadcrumb.js
@@ -31,15 +31,15 @@ const BreadcrumbsItem = ({ match }) => {
   const routeName = findRouteName(match.url);
   if (routeName) {
     return (
-      match.isExact ? (
+      match.isExact ? 
         <BreadcrumbItem active>{routeName}</BreadcrumbItem>
-      ) : (
+       : 
         <BreadcrumbItem>
           <Link to={match.url || ''}>
             {routeName}
           </Link>
         </BreadcrumbItem>
-      )
+      
     );
   }
   return null;
@@ -65,13 +65,13 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   appRoutes: PropTypes.any,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
   tag: 'div',
   className: '',
-  appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }],
+  appRoutes: [{ path: '/', exact: true, name: 'Home', component: null }]
 };
 
 class AppBreadcrumb extends Component {
diff --git a/src/Footer.js b/src/Footer.js
index e8cefa90..c6515cc0 100644
--- a/src/Footer.js
+++ b/src/Footer.js
@@ -6,12 +6,12 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   fixed: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
   tag: 'footer',
-  fixed: false,
+  fixed: false
 };
 
 class AppFooter extends Component {
diff --git a/src/Header.js b/src/Header.js
index b9c26b61..d17c3119 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -6,12 +6,12 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   fixed: PropTypes.bool,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
   tag: 'header',
-  fixed: false,
+  fixed: false
 };
 
 class AppHeader extends Component {
diff --git a/src/HeaderDropdown.js b/src/HeaderDropdown.js
index 6d6969cc..cd23cb29 100644
--- a/src/HeaderDropdown.js
+++ b/src/HeaderDropdown.js
@@ -1,14 +1,15 @@
 import React, { Component } from 'react';
-import {
-  Dropdown,
-} from 'reactstrap';
+import { Dropdown } from 'reactstrap';
 import PropTypes from 'prop-types';
 
 const propTypes = {
   children: PropTypes.node,
+  direction: PropTypes.string
 };
 
-const defaultProps = {};
+const defaultProps = {
+  direction: 'down'
+};
 
 class AppHeaderDropdown extends Component {
   constructor(props) {
@@ -16,13 +17,13 @@ class AppHeaderDropdown extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: false,
+      dropdownOpen: false
     };
   }
 
   toggle() {
     this.setState({
-      dropdownOpen: !this.state.dropdownOpen,
+      dropdownOpen: !this.state.dropdownOpen
     });
   }
 
diff --git a/src/NavbarBrand.js b/src/NavbarBrand.js
index e5700e7e..d142cbf2 100644
--- a/src/NavbarBrand.js
+++ b/src/NavbarBrand.js
@@ -8,11 +8,11 @@ const propTypes = {
   className: PropTypes.string,
   brand: PropTypes.any,
   full: PropTypes.any,
-  minimized: PropTypes.any,
+  minimized: PropTypes.any
 };
 
 const defaultProps = {
-  tag: 'a',
+  tag: 'a'
 };
 
 class AppNavbarBrand extends Component {
@@ -35,12 +35,12 @@ class AppNavbarBrand extends Component {
   navbarBrandImg(props, classBrand, key) {
     return (
       <img
-        src={this.imgSrc(props)}
-        width={this.imgWidth(props)}
-        height={this.imgHeight(props)}
-        alt={this.imgAlt(props)}
-        className={classBrand}
-        key={key.toString()}
+          src={this.imgSrc(props)}
+          width={this.imgWidth(props)}
+          height={this.imgHeight(props)}
+          alt={this.imgAlt(props)}
+          className={classBrand}
+          key={key.toString()}
       />
     );
   }
diff --git a/src/Shared/classes.js b/src/Shared/classes.js
index d72296d1..aad4137c 100644
--- a/src/Shared/classes.js
+++ b/src/Shared/classes.js
@@ -3,7 +3,7 @@ export const sidebarCssClasses = [
   'sidebar-sm-show',
   'sidebar-md-show',
   'sidebar-lg-show',
-  'sidebar-xl-show',
+  'sidebar-xl-show'
 ];
 
 export const asideMenuCssClasses = [
@@ -11,5 +11,5 @@ export const asideMenuCssClasses = [
   'aside-menu-sm-show',
   'aside-menu-md-show',
   'aside-menu-lg-show',
-  'aside-menu-xl-show',
+  'aside-menu-xl-show'
 ];
diff --git a/src/Sidebar.js b/src/Sidebar.js
index 5821466c..155078b7 100644
--- a/src/Sidebar.js
+++ b/src/Sidebar.js
@@ -13,7 +13,7 @@ const propTypes = {
   isOpen: PropTypes.bool,
   offCanvas: PropTypes.bool,
   staticContext: PropTypes.any,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
@@ -23,7 +23,7 @@ const defaultProps = {
   fixed: false,
   minimized: false,
   isOpen: false,
-  offCanvas: false,
+  offCanvas: false
 };
 
 class AppSidebar extends Component {
diff --git a/src/SidebarFooter.js b/src/SidebarFooter.js
index 15e2d446..45209870 100644
--- a/src/SidebarFooter.js
+++ b/src/SidebarFooter.js
@@ -5,11 +5,11 @@ import classNames from 'classnames';
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
-  tag: 'div',
+  tag: 'div'
 };
 
 class AppSidebarFooter extends Component {
@@ -17,11 +17,11 @@ class AppSidebarFooter extends Component {
     const { className, children, tag: Tag, ...attributes } = this.props;
 
     const classes = classNames(className, 'sidebar-footer');
-    const footer = children ? (
+    const footer = children ? 
       <Tag className={classes} {...attributes} >
         {children}
       </Tag>
-    ) : (null);
+     : null;
 
     return (
       footer
diff --git a/src/SidebarForm.js b/src/SidebarForm.js
index ee7a3b7e..21c8d161 100644
--- a/src/SidebarForm.js
+++ b/src/SidebarForm.js
@@ -5,22 +5,22 @@ import classNames from 'classnames';
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
-  tag: 'div',
+  tag: 'div'
 };
 
 class AppSidebarForm extends Component {
   render() {
     const { className, children, tag: Tag, ...attributes } = this.props;
     const classes = classNames(className, 'sidebar-form');
-    const form = children ? (
+    const form = children ? 
       <Tag className={classes} {...attributes} >
         {children}
       </Tag>
-    ) : (null);
+     : null;
 
     return (
       form
diff --git a/src/SidebarHeader.js b/src/SidebarHeader.js
index 46cdfc49..0c6f98f5 100644
--- a/src/SidebarHeader.js
+++ b/src/SidebarHeader.js
@@ -5,22 +5,22 @@ import classNames from 'classnames';
 const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
-  tag: 'div',
+  tag: 'div'
 };
 
 class AppSidebarHeader extends Component {
   render() {
     const { className, children, tag: Tag, ...attributes } = this.props;
     const classes = classNames(className, 'sidebar-header');
-    const header = children ? (
+    const header = children ? 
       <Tag className={classes} {...attributes} >
         {children}
       </Tag>
-    ) : (null);
+     : null;
 
     return (
       header
diff --git a/src/SidebarMinimizer.js b/src/SidebarMinimizer.js
index 08405776..1d9a7271 100644
--- a/src/SidebarMinimizer.js
+++ b/src/SidebarMinimizer.js
@@ -6,12 +6,12 @@ const propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  type: PropTypes.string,
+  type: PropTypes.string
 };
 
 const defaultProps = {
   tag: 'button',
-  type: 'button',
+  type: 'button'
 };
 
 class AppSidebarMinimizer extends Component {
diff --git a/src/SidebarNav.js b/src/SidebarNav.js
index 68d504d5..37ed5980 100644
--- a/src/SidebarNav.js
+++ b/src/SidebarNav.js
@@ -13,7 +13,7 @@ const propTypes = {
   navFunc: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   isOpen: PropTypes.bool,
   staticContext: PropTypes.any,
-  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
 };
 
 const defaultProps = {
@@ -24,10 +24,10 @@ const defaultProps = {
         name: 'Dashboard',
         url: '/dashboard',
         icon: 'icon-speedometer',
-        badge: { variant: 'info', text: 'NEW' },
-      }],
+        badge: { variant: 'info', text: 'NEW' }
+      }]
   },
-  isOpen: false,
+  isOpen: false
 };
 
 class AppSidebarNav extends Component {
@@ -75,18 +75,18 @@ class AppSidebarNav extends Component {
   // nav list section title
   navTitle(title, key) {
     const classes = classNames('nav-title', title.class);
-    return (<li key={key} className={classes}>{this.navWrapper(title)} </li>);
+    return <li key={key} className={classes}>{this.navWrapper(title)} </li>;
   }
 
   // simple wrapper for nav-title item
   navWrapper(item) {
-    return (item.wrapper && item.wrapper.element ? (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name)) : item.name);
+    return item.wrapper && item.wrapper.element ? React.createElement(item.wrapper.element, item.wrapper.attributes, item.name) : item.name;
   }
 
   // nav list divider
   navDivider(divider, key) {
     const classes = classNames('divider', divider.class);
-    return (<li key={key} className={classes} />);
+    return <li key={key} className={classes} />;
   }
 
   // nav label with nav link
@@ -99,7 +99,7 @@ class AppSidebarNav extends Component {
         !item.icon ? 'fa fa-circle' : item.icon,
         item.label.variant ? `text-${item.label.variant}` : '',
         item.label.class ? item.label.class : '',
-      ),
+      )
     };
     return (
       this.navLink(item, key, classes)
@@ -123,7 +123,7 @@ class AppSidebarNav extends Component {
     const classes = {
       item: classNames(item.class),
       link: classNames('nav-link', item.variant ? `nav-link-${item.variant}` : ''),
-      icon: classNames('nav-icon', item.icon),
+      icon: classNames('nav-icon', item.icon)
     };
     return (
       this.navLink(item, key, classes)
diff --git a/src/SidebarToggler.js b/src/SidebarToggler.js
index b437e45b..86ba10b3 100644
--- a/src/SidebarToggler.js
+++ b/src/SidebarToggler.js
@@ -10,14 +10,14 @@ const propTypes = {
   display: PropTypes.any,
   mobile: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  type: PropTypes.string,
+  type: PropTypes.string
 };
 
 const defaultProps = {
   display: 'lg',
   mobile: false,
   tag: 'button',
-  type: 'button',
+  type: 'button'
 };
 
 class AppSidebarToggler extends Component {
@@ -48,9 +48,9 @@ class AppSidebarToggler extends Component {
     const classes = classNames(className, 'navbar-toggler');
 
     return (
-      <button type="button" className={classes} {...attributes} onClick={this.sidebarToggle}>
+      <Tag type="button" className={classes} {...attributes} onClick={this.sidebarToggle}>
         {children || <span className="navbar-toggler-icon" />}
-      </button>
+      </Tag>
     );
   }
 }