https://github.com/efoken/md3-ui

⚛️ React Native (Web) library implementing Material Design 3
https://github.com/efoken/md3-ui

javascript material material-design react react-native react-native-web reactjs styled-components styled-system typescript ui

Last synced: about 2 months ago
JSON representation

⚛️ React Native (Web) library implementing Material Design 3

• Host: GitHub
• URL: https://github.com/efoken/md3-ui
• Owner: efoken
• License: mit
• Created: 2022-01-24T12:52:46.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-26T01:06:41.000Z (about 2 months ago)
• Last Synced: 2024-10-27T04:52:10.662Z (about 2 months ago)
• Topics: javascript, material, material-design, react, react-native, react-native-web, reactjs, styled-components, styled-system, typescript, ui
• Language: TypeScript
• Homepage: https://eikefoken.com/md3-ui/
• Size: 16.3 MB
• Stars: 7
• Watchers: 3
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
MD3-UI




[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/efoken/md3-ui/blob/HEAD/LICENSE)

[![npm latest package](https://img.shields.io/npm/v/@md3-ui/core/latest.svg)](https://www.npmjs.com/package/@md3-ui/core)

[![bundle size](https://img.shields.io/bundlephobia/minzip/@md3-ui/core.svg)](https://bundlephobia.com/package/@md3-ui/core)



Quickly build beautiful and more accessible [React](https://reactjs.org/) and

[React Native](https://reactnative.dev/) apps based on

[Material Design 3](https://m3.material.io/). Furthermore, MD3-UI is simple and

fully customizable to follow your own design system.

## Supported components

- Buttons

  - Common buttons

  - Icon buttons

- Cards

- Chips

- Navigation bar

- Top app bar

## Installation

MD3-UI is available as an

[npm package](https://www.npmjs.com/package/@md3-ui/core).

```sh

// with yarn

yarn add @md3-ui/core

// with npm

npm i @md3-ui/core

```

## Usage

Here is a simple example to get you started:

```jsx

import { AppRegistry } from "react-native"

import { Md3Provider, FilledButton } from "@md3-ui/core"

function App() {

  return (

    

      Hello World

    

  )

}

AppRegistry.registerComponent("App", () => App)

AppRegistry.runApplication("App", { rootTag: document.querySelector("#app") })

```

## License

This project is licensed under the terms of the [MIT license](/LICENSE).