3 releases

0.0.3-dev Sep 26, 2023
0.0.2-dev Sep 25, 2023
0.0.1-dev Sep 13, 2023

#115 in WebAssembly

32 downloads per month


6.5K SLoC

Rust 4.5K SLoC // 0.0% comments JavaScript 2K SLoC // 0.1% comments TypeScript 232 SLoC // 0.3% comments

Material Dioxus

Material Dioxus is a components library wrapper around Google's Material Web Components for the Dioxus framework. Only the dioxus-web renderer is supported.


use material_dioxus::MatButton;
use dioxus::prelude::*;

rsx! {
    MatButton {
        label: "Click me!",

Getting started



cargo add material-dioxus --features full

Material icons and a Material font must be imported for full functionality.

style = [
    # ...

Feature flags

There is one cargo feature for each component:

  • button
  • circular-progress
  • checkbox
  • circular-progress-four-color
  • icon-button
  • fab
  • formfield
  • icon
  • radio
  • switch
  • dialog
  • list
  • textfield
  • textarea

The all-components feature enables all components.

Additionally, there are two features related to theming.

  • theming &emdash; Provides a MatTheme component for setting a color theme.
  • palette &emdash; Provides constants for the material color palette (automatically enabled by theming).

The full feature enables all features.


These components respect the theming applied to Material Web Components using stylesheets. Learn about how to theme Material Web Components.

For convenience, the theming feature provides a MatTheme component, which takes a few colors and sets all required CSS variables. Just include that in the root of your application once.

Event handling

Due to lifetime limitations of the normal Dioxus event handlers, material-dioxus cannot make use of them. The exposed events instead use a custom callback type. For simple buttons that are never disabled you can also just wrap them in a span and use a normal event handler on that. For example

use dioxus::prelude::*;
use material_dioxus::MatButton;

fn Counter(cx: Scope) -> Element {
    let mut counter = use_state(cx, || 0);

    render! {
        // option 1: wrap the component in a span and use normal event handling
        span {
            onclick: move |_| counter += 1,
            MatButton { label: "click me: {counter}" }
        // option 2: use the event handlers exposed by the component to respect
        // thinks like a button being disabled.
        // The closure must be 'static so we make use of `to_owned!`.
        MatButton {
            label: "click me: {counter}",
            _onclick: {
                move |_| counter += 1


Full API documentation can be found here. Demos of components can be found here.


~202K SLoC