Material UI for shiny Apps and Quarto • muiMaterial

muiMaterial brings Material UI, the popular React components library, to R and Shiny.

Why using it?

Give your dashboards a unique look

Want to go beyond the standardised layout used by most Shiny dashboards?

If Shiny apps look all the same, it is because most use Bootstrap. Replacing it with Material UI will take your dashboards to the next level.

Developed by the company MUI, Material UI is probably the most popular React components library globally. muiMaterial allows access to its vast library of UI tools, so you can create fully customized dashboards and websites in R.

For example, launch a basic dashboard:

# remotes::install_github("lgnbhl/muiMaterial")
muiMaterial::muiMaterialExample("dashboard-simple")

Or have a look at the R replica of the official MUI dashboard template:

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

Building custom components easily

Creating custom UI elements is simple. Here’s an example of a stat card:

Card(
  sx = list(p = 3),
  Typography("Material UI weekly downloads", variant = "h6", gutterBottom = TRUE),
  Typography("5.8M", variant = "h3", fontWeight = "bold")
)

Material UI’s component library makes customization intuitive. Just compose components like building blocks.

With the reactRouter R package, you can build a complex and multi-page websites thanks to client-side routing.

You are not blocked in standardized Shiny layouts, like in Bootstrap’s based R packages such as bslib or bs4Dash.

Rich Ecosystem

Extend functionality with companion R packages:

muiDataGrid (COMING SOON) - Professional data tables with filtering, sorting, and inline editing
muiCharts (COMING SOON) - Beautiful, responsive charts
muiDateTimePickers (COMING SOON) - UI components for selecting dates, times, and ranges
muiTreeView - Interactive tree navigation

Quick start

Installation

#remotes::install_github("lgnbhl/reactRouter") # dev version
install.packages("muiMaterial")

Your first Material UI app

library(shiny)
library(muiMaterial)

ui <- muiMaterialPage(
  CssBaseline(
    Box(
      sx = list(p = 2),
      Typography("Hello Material UI!", variant = "h4")
    )
  )
)

server <- function(input, output, session) {}

shinyApp(ui, server)

Important: Use muiMaterialPage() instead of fluidPage() and wrap your UI in CssBaseline() to ensure proper styling. Material UI uses its own design system and conflicts with Bootstrap.

Shiny Input Wrappers

Material UI components become Shiny inputs with *.shinyInput() wrappers. For example, use Button.shinyInput() instead of Button() to capture user interactions in Shiny.

Explore available Shiny inputs with:

muiMaterial::muiMaterialExample("showcase")

Server side Shiny rendering

When rendering components from the server, use shiny::renderUI() or shiny.react::renderReact() in your server function, and shiny::uiOutput() or shiny.react::reactOutput() in your UI.

Creating tabs

Use TabContext.shinyInput(), TabList.shinyInput(), and TabPanel.shinyInput() instead of the basic Tabs() component (which currently doesn’t work). See full example.

For more advanced use cases, it is preferabe to use client-side routing with reactRouter.

Styling with sx

Customize any component using the sx argument for inline CSS-in-JS styling. It’s more powerful and maintainable than traditional CSS.

Full documentation

All the docs with examples are here.

Contributing

Found a bug or have a feature request? Open an issue at https://github.com/lgnbhl/muiMaterial

More Information

Follow Felix Luginbuhl on LinkedIn for updates.

muiMaterial