Getting Started

library(muiMaterial)
library(shiny)

Getting Started

Installation

install.packages("muiMaterial")

Or install the development version:

remotes::install_github("lgnbhl/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 can conflict with Bootstrap (see the CSS conflicts with Bootstrap section below).

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. Update them from the server with the matching update*.shinyInput() function. See Shiny inputs and server updates for the value of each input, the reserved props, and the triggerEvent()/setInput() helpers.

Explore available Shiny inputs with the showcase app (live here):

muiMaterial::muiMaterialExample("showcase")

Server-side 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() to create tabs with server-side reactivity, or TabContext.static(), TabList.static(), and TabPanel() for purely client-side tab switching. Read the vignette or see a minimal code example.

For more advanced navigation, use client-side routing with reactRouter.

Styling with sx

Customize any component using the sx argument for inline CSS-in-JS styling:

Box(
  sx = list(
    bgcolor = "primary.main",
    color = "white",
    p = 3,
    borderRadius = 2
  ),
  Typography("Styled with sx", variant = "h5")
)

It is more powerful and maintainable than traditional CSS. See The sx prop in R for how to write sx values in R, and the MUI sx documentation for all available properties. To change the colors, fonts and default styles of all components at once, use a theme: see Theming.

Naming conventions

Function names in muiMaterial mirror the original MUI component names as closely as possible (e.g. Button(), Typography(), Drawer()). Suffixes are used to distinguish variants that add R/Shiny-specific behavior:

• .shinyInput — Wraps a component as a Shiny input, so its value is available server-side via input$inputId. Use these when you need to read or react to user interactions in R. This convention is borrowed from the shiny.fluent package. Examples: Button.shinyInput(), Slider.shinyInput(), Autocomplete.shinyInput().

• .triggerId — Wraps a component that binds to an external DOM element by its HTML id. The referenced element acts as a trigger (e.g. a button click opens a drawer or menu), with open/close state managed entirely on the client side. Examples: Drawer.triggerId(), Menu.triggerId().

• .static — Wraps a component whose state is managed entirely on the client side (in React), with no round-trip to the Shiny server. Useful when server-side reactivity is not needed, for example tab switching that only shows/hides content. Examples: TabContext.static() and TabList.static().

Both .triggerId and .static variants keep state in the browser and never communicate with the Shiny server. The difference is that .triggerId components require a reference to an external trigger element, while .static components are self-contained. See Overlays with .triggerId.

Where to go next

• The component pages (menus Inputs to Utils) are adaptations of the MUI documentation, with live demos and the original React code.
• Quarto and R Markdown explains what works in documents without a Shiny server.
• Custom components shows how to build your own components and Shiny inputs.
• Examples gallery lists the complete apps bundled with the package.

CSS conflicts with Bootstrap

muiMaterialPage() suppresses Bootstrap by default, giving MUI components a clean CSS environment. If you need to mix MUI with Bootstrap-dependent packages (e.g. shiny, bslib, DT, plotly), see the CSS conflicts with Bootstrap vignette for details and workarounds.