Installation

CDN

Styles

<!-- Material Style CSS -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.0.0/dist/css/materialstyle.min.css" 
      integrity="sha384-Lnu1KIAOFhyJWM4oUSzwxyStv1OD4B2ZiTZts6q+0kEuYbz7owWW1K4zyMFI8Kb5" 
      crossorigin="anonymous">

Scripts

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" 
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" 
        crossorigin="anonymous"></script>
        
<!-- MDC Ripple JS (Only for Ripple effects) -->
<script src="https://cdn.jsdelivr.net/npm/@material/ripple@14.0.0/dist/mdc.ripple.min.js"
        integrity="sha384-9QANVmWxL3S8VRs8x1Q+bF1Zzogpy7P/Qw1+y5qHLdC1ig0EuoHg9VbB1SXyecdZ"
        crossorigin="anonymous"></script>

<!-- Material Style JS -->
<script src="https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.0.0/dist/js/materialstyle.min.js" 
        integrity="sha384-Q5hpQ5oxjAOFZ4FCVYZ679rhwdssrUFlQuc38BExagMP+344TVLBb/3zKGhMBSES" 
        crossorigin="anonymous"></script>

Styles

<!-- Material Style CSS -->
<link rel="stylesheet"
      href="https://unpkg.com/@materialstyle/materialstyle@3.0.0/dist/css/materialstyle.min.css" 
      integrity="sha384-Lnu1KIAOFhyJWM4oUSzwxyStv1OD4B2ZiTZts6q+0kEuYbz7owWW1K4zyMFI8Kb5" 
      crossorigin="anonymous">

Scripts

<!-- Popper JS -->
<script src="https://unpkg.com/@popperjs/core@2.10.2/dist/umd/popper.min.js" 
        integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" 
        crossorigin="anonymous"></script>
        
<!-- MDC Ripple JS (Only for Ripple effects) -->
<script src="https://unpkg.com/@material/ripple@14.0.0/dist/mdc.ripple.min.js"
        integrity="sha384-9QANVmWxL3S8VRs8x1Q+bF1Zzogpy7P/Qw1+y5qHLdC1ig0EuoHg9VbB1SXyecdZ"
        crossorigin="anonymous"></script>

<!-- Material Style JS -->
<script src="https://unpkg.com/@materialstyle/materialstyle@3.0.0/dist/js/materialstyle.min.js" 
        integrity="sha384-Q5hpQ5oxjAOFZ4FCVYZ679rhwdssrUFlQuc38BExagMP+344TVLBb/3zKGhMBSES" 
        crossorigin="anonymous"></script>

npm

Head over to our Material Style Examples repository for examples on Webpack, Parcel & Vite.

Install

npm i @materialstyle/materialstyle

Our Select Fields, Dropdowns, Popovers, and Tooltips depend on Popper, install it using:

npm i @popperjs/core

For ripple effects, install @material/ripple:

npm i @material/ripple@14.0.0

Import Material Style

import * as materialstyle from '@materialstyle/materialstyle'
import { MDCRipple } from '@material/ripple';

Alternatively, you may import plugins individually as needed

import { Util, Dropdown, Offcanvas, Popover } from '@materialstyle/materialstyle';
import { MDCRipple } from '@material/ripple';

Import Material Style SCSS in your SCSS file

@import "~@materialstyle/materialstyle/scss/materialstyle";

Download

Download v3.0.0

Next steps

For the next steps, check our Starter Templates to start laying out your site’s content and components.

CONTENTS