Skip to contents

muiMaterial

The muiMaterial R package gives access to the popular Material UI React components for Shiny and Quarto. It helps you:

  • Develop fully customizable Shiny dashboards.
    • The underlying UI components (e.g., cards, buttons, navbars, etc) can be used in any Shiny app.
  • Create static dashboards using the reactRouter R package.
  • Access advanced React components from other MUI React libraries.
    • muiCharts provides access to MUI interactive charts.
    • muiTreeView gives access to customizable MUI TreeView.

Install

Install the muiMaterial package as follows:

remotes::install_github("lgnbhl/muiMaterial")

Example

The quickest way to see what muiMaterial can do is to run muiMaterialExample("mui-template-dashboard"). This launches a demo app containing both muiMaterial and reactRouter as well as the MUI R package companions muiCharts and muiTreeView.

This demo is a replica of the official template created by MUI, the company behind Material UI.

muiMaterial::muiMaterialExample("mui-template-dashboard")

You can also have a look at the available Shiny inputs by running the “showcase” Shiny app:

# all examples available: muiMaterialExample()
muiMaterial::muiMaterialExample("showcase")

Shiny inputs wrappers

To use Material UI components as Shiny inputs, the package provides *.shinyInput wrappers functions (for more info read this article from the shiny.react documentation).

For example, to use the Button component with Shiny, you should use Button.shinyInput() instead.

Bootstrap conflict

muiMaterial can enter in conflict with the Bootstrap CSS framework, used by default in Shiny functions such as shiny::fluidPage() and friends.

To normalize the CSS page and be sure the components render correctly, please wrap them in the function CssBaseline().

Given Material UI high customization, you can easily fix styling issues using the CSS proprieties using the sx argument.

To create a Shiny app without Bootstrap, you can use muiMaterial::muiMaterialPage().

The Bootstrap conflict could potentially be solved by using Shadow DOM.

Contribute

If you have any issue, question or want to contribute with a pull request, don’t hesitate to write me on https://github.com/lgnbhl/muiMaterial.

For updates follow Felix Luginbuhl on LinkedIn.