react-materialize
Material design components for react, powered by materializecss.
Install
npm install materialize-css@next
npm install react-materializeUse
HTML Setup (from materializecss)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="path/to/materialize.css">
</head>
<body>
<script src="path/to/your/bundle.js"></script>
</body>
</html>Javascript
`` js
import 'materialize-css';
import { Button, Card, Row, Col } from 'react-materialize';
##### Note
materialize-css exposes css via style field in package.json, if you have another tool for CSS that
identifies this field you can remove the import from index.html.
Docs && Examples
See documentation for live examples. Try out the boilerplate.
How does it compare to X.Y.Z?
The main goal of this project is to provide react component for
materializecss, at the current stage, I am
trying to implement all possible widgets that are supported by materializecss.
Please create an issue on github if you find you desired component is not
available.
There are other material design components for react.js, e.g. material-ui,
which is more mature and popular than this one.
The main advantage of this project over e.g. material-ui is that it provides a
grid system similar to react-bootstrap. Another advantage over material-ui is that react-materialize does not
include css in the js - which can be cumbersome to some project's architecture.
Contributions
> Yes, please!
We have a
help-wanted label in the issues page for convenience
Development
Requires Node 22+ (
nvm use picks up .nvmrc).
sh
npm ci
npm run storybook # docs and examples at http://localhost:9001
npm test # Vitest + Testing Library (npm run test:watch to watch)
npm run lint # Biome lint + format check (npm run format to fix)
npm run typecheck # type definitions in types/
npm run build # library build into lib/ (ESM + CommonJS)
`
Releasing
CI runs lint, typecheck, tests and build on Node 22, 24 and 26 for every pull request.
Versions and the changelog are managed with Changesets:
- In a PR that changes the published package, run
npm run changeset, pick the bump (patch/minor/major) and describe the change for users. Commit the generated .changeset/*.md file with the PR. Docs, tests and tooling-only PRs don't need one.
When changesets land on master, a Version Packages PR is opened (or updated) with the version bump and CHANGELOG.md` entries.
Support
This library is only a react wrapper around the awesome materializecss, if you or your company uses this library please support them, all this work requires time :) ✌️