muiMaterial brings Material UI, the world’s most popular React UI
framework, to R and Shiny. It is designed to be used with AI coding
assistants like Claude Code.
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 (live here):
# remotes::install_github("lgnbhl/muiMaterial")
muiMaterial::muiMaterialExample("dashboard-simple")Or have a look at the R replica of the official MUI dashboard template (live here):
muiMaterial::muiMaterialExample("mui-template-dashboard")Material UI (MUI) is the world’s most popular React UI framework. This
means AI tools like Claude, ChatGPT, or GitHub Copilot have been trained
on enormous amounts of MUI code, which make they are so good using it.
All you have to do is to ask them to adapt MUI React code into R code
using muiMaterial.
Components mirror R functions. Each MUI component maps directly to
an R function with the same name and arguments. React’s
<Button variant="contained" /> becomes Button(variant = "contained")
in R. No React knowledge is needed as the syntax will feel immediately
familiar.
Styling is just an R list. The sx argument accepts a named list of
CSS properties. Describe what you want to an AI assistant, and it will
write the sx list for you:
# Prompt an LLM: "a Card with blue background, white text, padding and rounded corners"
Card(
sx = list(
bgcolor = "blue",
color = "white",
borderRadius = 3,
p = 3
),
Typography("Hello!", variant = "h5")
)You do not need to know React or CSS. Just describe what you want and let an AI assistant generate the code.
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:
- 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
#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 app live here:
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.