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

Material Kit React view Material Kit React on mobile
  • 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

Material Design React Admin view Material Design React Admin on mobile
  • 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

Jumbo React view Jumbo React on mobile
  • 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

Portal view Portal on mobile
  • 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

Material Dashboard React view Material Dashboard React on mobile
  • 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

React Admin view React Admin on mobile
  • 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

Primer view Primer on mobile
  • 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

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

9. Vuely

Vuely view Vuely on mobile
  • 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

Vue Material Dashboard view Vue Material Dashboard on mobile
  • 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

Vuse view Vuse on mobile
  • 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

Vue Material Admin view Vue Material Admin on mobile
  • 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

Vuetify Material Dashboard view Vuetify Material Dashboard on mobile
  • Modular structure
  • 16 handcrafted components
  • Two customized plugins
  • Seven example pages
  • Material design icons
  • Sidebar filters
  • Color options

14. Vue Material

Vue Material view Vue Material on mobile
  • 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

Fuse view Fuse on mobile
  • 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

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

17. Elastic UI

Elastic UI view Elastic UI on mobile
  • Completely modular
  • 300 Material Icons
  • Snack bar notifications
  • Modals available
  • Angular Flex layout
  • Completely customizable widgets
  • Nested routing

18. Gradus

Gradus view Gradus on mobile
  • 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

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

20. MaterialPro

MaterialPro view MaterialPro on mobile
  • 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.

Show Comments

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)!