CodeinWP content is free. When you purchase through referral links on our site, we earn a commission. Learn more

Material Design Templates for Vue, Angular, React (Material UI)

Wouldn’t it be way more convenient for developers to design UIs if they could work with some kind of a standard or common starting point? Well, this is where material design templates come into play!

Taking the “card” concept that came about with Google Now, material design enhances it with grid-based layouts, responsive animations, padding, depth effects and more. In this way, it makes it easier to combine technical advances with good design development.

To make UI building even simpler, a number of frameworks and templates are readily available that incorporate Google’s material design principles. This is exactly what our focus in today’s post is. Here are the best material design templates for Vue, Angular, and React.

Lets get started:

Material design templates for React

1. Material Kit React

  • Free material UI kit
  • 60 handcrafted elements
  • Four customized plugins
  • Three example pages
  • Large scale typography
  • Color variations
  • Builds a modern web presence for your Android application

2. Material Design React Admin

  • 18 color schemes
  • Light and dark themes
  • Responsive and supports high resolution screens
  • Multiple layouts, modular code
  • Lazy loading
  • Admin template and landing page
  • Uses CSS and SaaS for easily changing variables

3. Jumbo React

  • Seven dashboards, 150+ widgets
  • Six navigation styles and six built-in apps
  • Async loading
  • 130+ designed pages
  • Ready to use light, semi-dark and dark shades
  • Fully responsive
  • RTL and multilingual support

4. Portal

  • Six layouts, stylish dashboard
  • Two example apps
  • 15+ Elements pages
  • Uses latest Material UI components
  • Lazy loading and RTL support
  • SASS stylesheets
  • Nine built-in themes

5. Material Dashboard React

  • Built over the popular Material-UI v3.1.0 framework
  • 200 components
  • 28 example pages
  • Ten customized plugins
  • Five color filter choices
  • Option for background image in sidebar
  • Navigation on left sidebar

6. React Admin

  • Super fast, highly customizable UI
  • Full featured datagrid
  • Filter as-you-type
  • WYSIWYG editor
  • Customizable dashboard, menu, layout
  • Connects to multiple backends
  • Supports any form layout

You may also be interested in these articles:

7. Primer

  • Light and dark themes
  • Fully responsive RTL support
  • AoT compilation
  • JSS styling
  • Easy to customize
  • Five built-in apps
  • Five example pages

Material design templates for Vue

8. Vue Material Kit

  • Free
  • 60 handcrafted elements
  • Two customized plugins
  • Three example pages
  • Built over Vue Material and Vuejs
  • Basic elements, navigation, inputs, images, typography

9. Vuely

  • Multiple dashboards
  • Fully responsive
  • 200+ UI elements
  • 78+ custom widgets
  • Multiple theme options
  • Quill editor, WYSIWYG editor
  • 1500+ Font icons, RTL support

10. Vue Material Dashboard

  • 200 components
  • 15 plugins
  • 27 example pages
  • Material Icon fonts
  • Login, Register, Pricing and Lock pages
  • Data tables and calendar
  • Vector map and mini sidebar

11. Vuse

  • Multiple layouts, many example pages
  • Dark and light color themes
  • Fully responsive
  • Built-in apps
  • Configurable template layouts
  • Quick start kit
  • Custom color management

12. Vue Material Admin

  • Nine layouts
  • Includes a chat app
  • Four widgets available
  • Multiple theme options
  • Error and login pages
  • Date and time picker
  • Dark and light sidebar options

13. Vuetify Material Dashboard

  • Modular structure
  • 16 handcrafted components
  • Two customized plugins
  • Seven example pages
  • Material design icons
  • Sidebar filters
  • Color options

14. Vue Material

  • Components and UI elements
  • Support for all the modern web browsers
  • Responsive
  • Dynamic themes
  • Built with Google Material Design
  • Easy to use API
  • Light and dark skins

Material design templates for Angular

15. Fuse

  • Dark and light themes
  • Many built-in apps
  • More than ten page examples
  • Configurable template layouts
  • Custom color management
  • 20+ page layouts
  • AoT compiler support

16. Triangular

  • Five dashboards
  • Six template layouts
  • Tons of page designs
  • Responsive
  • Many example apps
  • PSDs included
  • Multi-language ready

17. Elastic UI

  • Completely modular
  • 300 Material Icons
  • Snack bar notifications
  • Modals available
  • Angular Flex layout
  • Completely customizable widgets
  • Nested routing

18. Gradus

  • Pre-made layots included
  • Responsive with many example pages
  • Lazy loading, nested routing
  • AoT compilation
  • Data tables, charts, dynamic menu
  • Landing page
  • Scrollbar

19. Fury

  • Modular structure
  • 300+ Material Icons
  • Snackbar notifications
  • Nested routing
  • Advanced Google Maps integration
  • Fully customizable widgets
  • Breadcrumbs are auto-generated

20. MaterialPro

  • Light and dark versions
  • Four color schemes
  • Wide range of widgets
  • 25+ Angular components
  • 2000+ Font Icons
  • Fully responsive
  • 250+ Page templates

* This post contains affiliate links, which means that if you click on one of the product links and then purchase the product, we’ll receive a small fee. No worries though, you’ll still pay the standard amount so there’s no cost on your part.

Disqus Comments Loading...

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!