Material Design ReactJS Admin Web App with Bootstrap 4

Material Design ReactJS Admin Web App with Bootstrap 4


Admin preview


Material is a Google material design inspired admin template built with ReactJS & Bootstrap 4. It uses Scss CSS which makes it easy to customize.


  • 2 in 1. Admin template & Landing page
  • Google Material Design
  • Responsive Design
  • Light, Gray and Dark Themes
  • Multiple Layouts
  • Multiple Color Schemes, with 18 predefined schemes
  • Powerful Layout Settings
  • Create-react-app
  • 900+ official material design icons
  • Sass/Scss CSS, easily update style by changing a few variables
  • Modular Code, add & remove with ease
  • Work with jQuery
  • Nested routing with React-router
  • Lazy loading (Dynamic routing) Support
  • ES6 (ECMAScript6) with Babel
  • Package management with NPM
  • Modules bundling with Webpack 2
  • Airbnb React/JSX Style Guide
  • Cross Browser Support
  • High Resolution Support
  • Premium Support
  • Free Future Updates
  • And more


  • Creact-react-app Create React apps with no build configuration.
  • Bootstrap the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
  • ReactJS A declarative, efficient, and flexible JavaScript library for building user interfaces.
  • React-router the most popular router in the React ecosystem
  • Redux the most popular and well-documented Flux library
  • Material UI a set of React components that implement Google’s Material Design specification.
  • Babel Use next generation JavaScript, today.
  • jQuery Write less, do more


Version 4.0.0 (08-20-2018)
Note: It’s a big update, there might be errors, let me know, thanks!

- Feat: Upgrade @material-ui to 1.5.x
- Feat: Update Bootstrap to 4.1.3
- Feat: Add page loader
- Feat: Add HMR (Hot modular reloading) support
- Feat(Customizer): Add "showCustomizer" option
- Feat: New landing style
- Fix: Update dark theme
- Fix(Dashboard): Fix vague text problem
- Refactor(Style): Remove inline style
- Refactor: Refactor code
- Docs: Update docs

Version 3.1.0 (07-03-2018)

- Feat: Use latest react-react-app, now Webpack 4 behind the scene, up to 98% faster!
- Feat: Update NPM packages to latest version
- Fix: Fix lots of warnings
- Docs: Update docs

Version 3.0.0 (05-03-2018)

- Feat: Upgrade React to 16.3.x
- Feat: Upgrade Redux to 4.0.x
- Feat: Upgrade Bootstrap to 4.1.x
- Feat: Update NPM packages to latest version

Version 2.0.0 (09-03-2017)

- Feat: Upgrade react-router to v4
- Refactor: Refactor the project
- Docs: Update docs

Version 1.4.0 (08-31-2017)

- Feat: Upgrade Bootstrap to 4.0.0-beta
- Feat: Update NPM packages

Version 1.3.3 (08-24-2017)

- Feat: Update NPM packages
- Feat: Remove "react-tap-event-plugin" dependency
- Chore: Remove yarn.lock, use default package-lock.json instead

Version 1.3.2 (07-11-207)

- Fix(Layout): Fix sidebar width on mobile, thanks @dfrost-sln
- Style: Remove forced yellow input background in Chrome, thanks @ksnenvato
- Feat: Update NPM packages, including upgrade webpack to v3

Version 1.3.1 (06-01-2017)

- Feat: Update NPM packages
- Feat: Add transition to boxed layout
- Feat: Add autoprefixer
- Fix: Change dev port to 3000 since 8000 port is busy on windows, thanks @abdul_10xbanking
- Fix: Fix a typo
- Fix: Fix sidenav toggler color in yellow background
- Chore: Rename “form elements” to “form components”

Version 1.3.0 (05-03-2017)

- Feat: Upgrade material-ui to 0.18.x
- Fix: Remove all .DS_Store system files in production, thanks @mezrin
- Refactor: Add Sass/Scss linter
- Refactor: Clean up package.json, remove unused packages
- Refactor: Change style files identation to 2 spaces as well
- Refactor: Move static files to public/ folder
- Docs: Update docs

Version 1.2.4 (04-27-2017)

- Fix: Fix typos in two files

Version 1.2.3 (04-26-2017)

- Feat: Update NPM packages
- Fix: Fix "PropTypes is deprecated" warning
- Refactor: Change indentation from 4 spaces to 2 spaces 
- Refactor: Refact code and update settings to pass ESLint

Version 1.2.1 (04-10-2017)

- Feat: Update NPM packages to latest version
- Feat: Add collapsedSidebar toggler next to logo
- Chores

Version 1.2.0 (04-02-2017)

- Feat: Add animation
- Feat: Upgrade NPM packages to latest version
- Feat: Add "yarn.lock", so that others can get precisely the same dependencies. (If you don't wanna use Yarn, simply ignore it and keep using NPM), thanks @pwhuh
- Docs: Update the documentation
- Refactor: Change ‘require’ to ‘import’

Version 1.1.0 (03-26-2017)

- Feat: Add Landing page template

Version 1.0.1 (03-22-2017)

- Feat: Add more UI components
- Feat: Update NPM packages to latest version
- Docs: Update the documentation

Version 1.0.0 (03-22-2017)

- Initial release