Home

Introduce

@sandlada/material-design-css is a CSS library for Material Design. Each style is obtained and written from Material Design 3. Developers can easily use Material Design design tokens such as on-primary, surface-container, title-medium, shape-large, etc. through this style library.

CSS styles include:

Color
Motion
Shape
Typography

Installation

npm i @sandlada/material-design-css

Import

If you are using a development environment such as Vite, you can import the css style file through import in the JS/TS file:

// TypeScript / JavaScript

import "@sandlada/material-design-css/color.css"
import "@sandlada/material-design-css/motion.css"
import "@sandlada/material-design-css/shape.css"
import "@sandlada/material-design-css/typography.css"

If you prefer to use CSS files to import css style files:

/* CSS */

@import "@sandlada/material-design-css/color.css";
@import "@sandlada/material-design-css/motion.css";
@import "@sandlada/material-design-css/shape.css";
@import "@sandlada/material-design-css/typography.css";

You may also consider using relative positioning to import the styles:

/* CSS */

@import "../../node_modules/@sandlada/material-design-css/color.css";
@import "../../node_modules/@sandlada/material-design-css/motion.css";
@import "../../node_modules/@sandlada/material-design-css/shape.css";
@import "../../node_modules/@sandlada/material-design-css/typography.css";

Usage

Now that you have completed the installation and import, go to the following page for more usage tutorials: