
muiMaterial brings Material UI, the popular React components library,
to R and Shiny.
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")
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.
Extend functionality with companion R packages:
#remotes::install_github("lgnbhl/reactRouter") # dev version
install.packages("muiMaterial")
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.
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")
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.
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.
Customize any component using the sx argument for inline CSS-in-JS
styling. It’s more powerful and maintainable than traditional CSS.
All the docs with examples are here.
Found a bug or have a feature request? Open an issue at https://github.com/lgnbhl/muiMaterial
Follow Felix Luginbuhl on LinkedIn for updates.
Any scripts or data that you put into this service are public.
Add the following code to your website.
For more information on customizing the embed code, read Embedding Snippets.