Installation

We offer three convenient options to integrate Material Style into your project. Choose the one that aligns with your preferences, and let Material Style enhance the visual appeal of your project with its Material Design goodness.

CDN

Use Material Style instantly by including its CSS and JavaScript files directly from a Content Delivery Network (CDN). This option allows you to link to the files hosted on a remote server, ensuring quick and easy integration into your project. You can choose from popular CDN providers like jsDelivr or unpkg to access Material Style’s resources seamlessly. This method is convenient and ideal for those who want a straightforward integration process.

Styles

<!-- Material Style CSS -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@materialstyle/materialstyle@3.1.1/dist/css/materialstyle.min.css" 
      integrity="sha384-TveZ4SBMG9Zwu44Pq5aK2bgL+4CaFRTtx6pSSsxmQKWhIRKoONDSRW+k+NA9A0Gk" 
      crossorigin="anonymous">

Scripts

<!-- Popper JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
        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.1.1/dist/js/materialstyle.min.js" 
        integrity="sha384-rqhP61M9WSmzd7+ssgyoWP2I+R68vVHx7o+UmmIs6/Nxe8Lt1DoF6+0CKptZIXC0" 
        crossorigin="anonymous"></script>

Styles

<!-- Material Style CSS -->
<link rel="stylesheet"
      href="https://unpkg.com/@materialstyle/materialstyle@3.1.1/dist/css/materialstyle.min.css" 
      integrity="sha384-TveZ4SBMG9Zwu44Pq5aK2bgL+4CaFRTtx6pSSsxmQKWhIRKoONDSRW+k+NA9A0Gk" 
      crossorigin="anonymous">

Scripts

<!-- Popper JS -->
<script src="https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.min.js" 
        integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" 
        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.1.1/dist/js/materialstyle.min.js" 
        integrity="sha384-rqhP61M9WSmzd7+ssgyoWP2I+R68vVHx7o+UmmIs6/Nxe8Lt1DoF6+0CKptZIXC0" 
        crossorigin="anonymous"></script>

npm

Integrate Material Style into your project using the Node Package Manager (NPM). This method involves installing Material Style as a package within your project’s ecosystem, providing more control and flexibility over its usage and updates.

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 the pre-compiled CSS and JavaScript files of Material Style directly to your system. This option is suitable for developers who prefer to have local copies of the required files and manually link them in their project’s code.

Download v3.1.1

Next steps

Check our Starter Templates to start laying out your site’s content and components.

Theme Builder

Personalize Material Style to reflect your product's brand identity.

CONTENTS