To integrate mdui with React, start by following the steps on the installation page.


When using mdui in a React environment, there are certain aspects to be aware of. These considerations stem from the general constraints of Web Components and are not specific to mdui.

Event Binding

React does not natively support custom events. Therefore, to utilize events provided by mdui components, it's necessary to obtain a reference to the component using the ref attribute. This reference can then be used to add event listeners.

Here's an example of handling mdui component events in React:

class Home extends Component {
  constructor(props) {
    this.switchRef = React.createRef();

  componentDidMount() {
    this.switchRef.current.addEventListener('change', event => {
      console.log('switch is toggled');

  render() {
      <mdui-switch ref={this.switchRef}></mdui-switch>

TypeScript Type Declarations for JSX

If you're using mdui in TypeScript files (.tsx), it's important to include TypeScript type declarations. You can do this by importing mdui's type declaration files into your project's .d.ts file:

/// <reference types="mdui/jsx.en.d.ts" />
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Dark Theme Dynamic Theme Typography Design Tokens
React Vue Angular
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint