Loading ...

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

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

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 Vue, Angular, React (Material UI)Material Design Templates for Vue, Angular, React (Material UI)

Material #design #templates for @vuejs, @angular, @reactjs 🎨 Click To Tweet

Material design templates for React

1. Material Kit React

Material Kit ReactMaterial Kit React
Get It Here Demo
Material Kit React viewMaterial Kit React view Material Kit React on mobileMaterial 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 AdminMaterial Design React Admin
Get It Here Demo
Material Design React Admin viewMaterial Design React Admin view Material Design React Admin on mobileMaterial 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 ReactJumbo React
Get It Here Demo
Jumbo React viewJumbo React view Jumbo React on mobileJumbo 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

PortalPortal
Get It Here Demo
Portal viewPortal view Portal on mobilePortal 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 ReactMaterial Dashboard React
Get It Here Demo
Material Dashboard React viewMaterial Dashboard React view Material Dashboard React on mobileMaterial 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 AdminReact Admin
Get It Here Demo
React Admin viewReact Admin view React Admin on mobileReact 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

PrimerPrimer
Get It Here Demo
Primer viewPrimer view Primer on mobilePrimer 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 KitVue Material Kit
Get It Here Demo
Vue Material Kit viewVue Material Kit view Vue Material Kit on mobileVue 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

VuelyVuely
Get It Here Demo
Vuely viewVuely view Vuely on mobileVuely 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 DashboardVue Material Dashboard
Get It Here Demo
Vue Material Dashboard viewVue Material Dashboard view Vue Material Dashboard on mobileVue 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

VuseVuse
Get It Here Demo
Vuse viewVuse view Vuse on mobileVuse 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 AdminVue Material Admin
Get It Here Demo
Vue Material Admin viewVue Material Admin view Vue Material Admin on mobileVue 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 DashboardVuetify Material Dashboard
Get It Here Demo
Vuetify Material Dashboard viewVuetify Material Dashboard view Vuetify Material Dashboard on mobileVuetify 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 MaterialVue Material
Get It Here Demo
Vue Material viewVue Material view Vue Material on mobileVue 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
Go to top

Material design templates for Angular

15. Fuse

FuseFuse
Get It Here Demo
Fuse viewFuse view Fuse on mobileFuse 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

TriangularTriangular
Get It Here Demo
Triangular viewTriangular view Triangular on mobileTriangular on mobile
  • Five dashboards
  • Six template layouts
  • Tons of page designs
  • Responsive
  • Many example apps
  • PSDs included
  • Multi-language ready

17. Elastic UI

Elastic UIElastic UI
Get It Here Demo
Elastic UI viewElastic UI view Elastic UI on mobileElastic UI on mobile
  • Completely modular
  • 300 Material Icons
  • Snack bar notifications
  • Modals available
  • Angular Flex layout
  • Completely customizable widgets
  • Nested routing

18. Gradus

GradusGradus
Get It Here Demo
Gradus viewGradus view Gradus on mobileGradus 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

FuryFury
Get It Here Demo
Fury viewFury view Fury on mobileFury on mobile
  • Modular structure
  • 300+ Material Icons
  • Snackbar notifications
  • Nested routing
  • Advanced Google Maps integration
  • Fully customizable widgets
  • Breadcrumbs are auto-generated

20. MaterialPro

MaterialProMaterialPro
Get It Here Demo
MaterialPro viewMaterialPro view MaterialPro on mobileMaterialPro 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.

Was this topic helpful?0% of users found this helpful
  • Tags:
  • Categories:
Advertiment
arrow