Thursday, 1 November, 2018 UTC
Summary
Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of some awesome backers.
Live Demo | Github Project | Components Documentation
Open Source projects and examples built with Material-UI:
- Material Dashboard React
- Material Kit
- Page Layout Examples
- Showcase Live Examples
Installation
Install Material-UI, the world's most popular React UI framework.
Material-UI is available as an npm package.
npm
To install and save in your
package.json dependencies, run:npm install @material-ui/core
Please note that react >= 16.3.0 and react-dom >= 16.3.0 are peer dependencies.
Roboto Font
Material-UI was designed with the Roboto
font in mind. So be sure to follow these instructions.
For instance, via Google Web Fonts:
font in mind. So be sure to follow these instructions.
For instance, via Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
In order to use the font
Here are some instructions
on how to do so.
For instance, via Google Web Fonts:
Icon component you must first add the Material icons font. Here are some instructions
on how to do so.
For instance, via Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
In order to use prebuilt SVG Material icons, such as those found in the component demos
you must first install the @material-ui/icons package:
you must first install the @material-ui/icons package:
npm install @material-ui/icons
You can start using Material-UI with minimal Front-end infrastructure,
which is great for prototyping. We discourage using this approach in production though -
the client has to download the entire library, regardless of which components are actually used,
affecting performance and bandwidth utilisation.
which is great for prototyping. We discourage using this approach in production though -
the client has to download the entire library, regardless of which components are actually used,
affecting performance and bandwidth utilisation.
UMD releases
We are providing two Universal Module Definition (UMD) files:
- one for development: https://unpkg.com/@material-ui/core/umd/material-ui.development.js
- one for production: https://unpkg.com/@material-ui/core/umd/material-ui.production.min.js
You can follow this CDN example to quickly get started.