# @materializecss/materialize

> The responsive front-end library based on Material Design from Google.

Latest version **2.3.3** (published 2026-04-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @materializecss/materialize
pnpm add @materializecss/materialize
yarn add @materializecss/materialize
bun add @materializecss/materialize
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.3.3 |
| Published | 2026-04-12 |
| First published | 2020-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 993 |
| Author | The Materialize Team |
| Maintainers | wuda-io, smankusors, nekonenene |

## Links

- npm: https://www.npmjs.com/package/@materializecss/materialize
- Repository: https://github.com/materializecss/materialize
- Homepage: https://materializeweb.com
- Issues: https://github.com/materializecss/materialize/issues
- Funding: https://github.com/sponsors/materializecss
- npm.io page: https://npm.io/package/@materializecss/materialize

## Dependencies (1)

- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1

## Recent versions

- 2.3.3 (latest) — 2026-04-12
- 2.3.2 — 2026-02-01
- 2.3.1 — 2026-01-07
- 2.3.0 — 2026-01-07
- 2.2.2 — 2025-04-06
- 2.2.1 — 2024-12-24
- 2.2.0 — 2024-12-23
- 2.1.1 — 2024-08-30
- 2.1.0 — 2024-06-13
- 2.0.4 — 2024-04-04
- 2.0.3 — 2023-12-19
- 2.0.3-beta — 2023-10-31
- 2.0.3-alpha — 2023-09-14
- 2.0.2-alpha — 2023-07-15
- 2.0.1-alpha — 2023-05-21
- … 7 more at https://npm.io/package/@materializecss/materialize/versions

## README

<p align="center">
  <a href="https://materializeweb.com" target="_blank">
    <img src="https://materializeweb.com/images/materialize.svg" width="200"/>
  </a>
</p>

<h3 align="center">Materialize</h3>

<p align="center">
  Materialize, a CSS Framework based on Material Design.
  <br>
  <a target="_blank" href="https://materializeweb.com"><strong>[ Browse the docs ]</strong></a>
  <br>
  <br>
  <a href="https://github.com/materializecss/materialize/actions/">
    <img src="https://github.com/materializecss/materialize/actions/workflows/nightly.yml/badge.svg" alt="GitHub Actions badge"/>
  </a>
  <a href="https://www.npmjs.com/package/@materializecss/materialize">
    <img src="https://badge.fury.io/js/%40materializecss%2Fmaterialize.svg" alt="npm version badge"/>
  </a>
  <a href="https://www.jsdelivr.com/package/npm/@materializecss/materialize">
    <img src="https://data.jsdelivr.com/v1/package/npm/@materializecss/materialize/badge" alt="jsDelivr version badge"/>
  </a>
  <a href="https://gitter.im/materializecss/materialize">
    <img src="https://badges.gitter.im/Join%20Chat.svg" alt="Gitter badge"/>
  </a>
  <a href="https://opencollective.com/materialize">
    <img alt="Open Collective backers and sponsors" src="https://img.shields.io/opencollective/all/materialize"/>
  </a>
</p>

## Getting started
Read the [getting started guide](https://materializeweb.com/getting-started.html) for more information on how to use materialize.

- [Download the latest release](https://github.com/materializecss/materialize/releases/latest) of materialize directly from GitHub. ([Beta](https://github.com/materializecss/materialize/releases/))
- Clone the repo: `git clone https://github.com/materializecss/materialize.git`
- Include the files via [jsDelivr](https://www.jsdelivr.com/package/npm/@materializecss/materialize).
- Install with [npm](https://www.npmjs.com): `npm install @materializecss/materialize` (Beta: `npm install @materializecss/materialize@next`)

## Testing
To run tests locally you first have to build the files and then run the tests. This can be done with the command `npm test`;
To get more info and debug information you can do the following:
run `npx jasmine-browser-runner` then go to the url via browser `http://localhost:8888`. The tests will then run and show detailed feedback.

## Development
The documentation can be found at <https://materializeweb.com>. To run the documentation locally on your machine, you need [Node.js](https://nodejs.org) installed on your computer.
This is the core project with all the components. To see how they are used we recommend using an example project or go to the documentation.

### Running documentation locally
See [Materialize Docs Repo](https://github.com/materializecss/materialize-docs) to see Materialize in Action.

### Releases
Previous releases are available [here](https://github.com/materializecss/materialize/releases). You can also find the changelog under each release.

## Supported Browsers:
Materialize is compatible with:

- Chrome 35+
- Firefox 31+
- Safari 9+
- Opera
- Edge

## Testing
We use Jasmine as our testing framework and we're trying to write a robust test suite for our components. If you want to help, [here's a starting guide on how to write tests in Jasmine](docs/CONTRIBUTING.md#jasmine-testing-guide).

## Quick Testing and Development
For quick testing install live-server node package globally and run `npm run demo`

## Contributing
Check out the [CONTRIBUTING document](docs/CONTRIBUTING.md) in the root of the repository to learn how you can contribute. You can also browse the [help-wanted](https://github.com/materializecss/materialize/labels/help-wanted) tag in our issue tracker to find things to do.

## Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/materialize#sponsor)]

[![OC sponsor 0](https://opencollective.com/materialize/sponsor/0/avatar.svg)](https://opencollective.com/materialize/sponsor/0/website)
[![OC sponsor 1](https://opencollective.com/materialize/sponsor/1/avatar.svg)](https://opencollective.com/materialize/sponsor/1/website)
[![OC sponsor 2](https://opencollective.com/materialize/sponsor/2/avatar.svg)](https://opencollective.com/materialize/sponsor/2/website)
[![OC sponsor 3](https://opencollective.com/materialize/sponsor/3/avatar.svg)](https://opencollective.com/materialize/sponsor/3/website)
[![OC sponsor 4](https://opencollective.com/materialize/sponsor/4/avatar.svg)](https://opencollective.com/materialize/sponsor/4/website)
[![OC sponsor 5](https://opencollective.com/materialize/sponsor/5/avatar.svg)](https://opencollective.com/materialize/sponsor/5/website)
[![OC sponsor 6](https://opencollective.com/materialize/sponsor/6/avatar.svg)](https://opencollective.com/materialize/sponsor/6/website)
[![OC sponsor 7](https://opencollective.com/materialize/sponsor/7/avatar.svg)](https://opencollective.com/materialize/sponsor/7/website)
[![OC sponsor 8](https://opencollective.com/materialize/sponsor/8/avatar.svg)](https://opencollective.com/materialize/sponsor/8/website)
[![OC sponsor 9](https://opencollective.com/materialize/sponsor/9/avatar.svg)](https://opencollective.com/materialize/sponsor/9/website)


## Backers
Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/materialize#backer)]

[![Backers](https://opencollective.com/materialize/backers.svg?width=890)](https://opencollective.com/materialize#backers)

## Copyright and license
Code Copyright 2026 Materialize. Code released under the MIT license.

---
_Source: https://npm.io/package/@materializecss/materialize · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
