This library provides a set of React components styled with Material Design, leveraging the capabilities of @material/web
and @lit/react
.
To install Material Web React, you can use npm or yarn. Run one of the following commands in your project directory:
npm install react-material-web
or
yarn add react-material-web
Here's a quick example to get you started. After installing, you can import and use Material Components like any other React component.
We default to using the @fontsource/roboto
and material-symbols
in styles, if you want to use them, you can import them in your project:
Add styles to your project:
import 'react-material-web/styles'
Or you can use the components without default styles.
Then, you can use the components like this:
import React from 'react';
import { MdFilledButton } from 'react-material-web';
function Example() {
return (
<div>
<MdFilledButton>Click me</MdFilledButton>
</div>
);
}
For more detailed documentation on each component and its API, please refer to Material Components Web.
You can also check out our Storybook to see all the components in action. To run the Storybook, use the following command:
npm run storybook
or
WARNING ⚠️ This folder contains experimental features that are not recommended for production.
- ✅ Card
- ✅ Segmented button
- ✅ Navigation bar
Our library is built upon the solid foundation of Material Design and modern web technologies, including:
Distributed under the MIT License. See LICENSE
for more information.