design-shiny-ui

Design Shiny UI

Design responsive, accessible Shiny application interfaces using bslib theming, modern layout primitives, and custom CSS.

When to Use

• Building a new Shiny app UI from scratch
• Modernizing an existing Shiny app from fluidPage to bslib
• Applying brand theming (colors, fonts) to a Shiny app
• Making a Shiny app responsive across screen sizes
• Improving accessibility of a Shiny application

Inputs

• Required: Application purpose and target audience
• Required: Layout type (sidebar, navbar, fillable, dashboard)
• Optional: Brand colors and fonts
• Optional: Whether to use custom CSS/SCSS (default: bslib only)
• Optional: Accessibility requirements (WCAG level)

Procedure

Step 1: Choose the Page Layout

bslib provides several page constructors:

# Sidebar layout — most common for data apps
ui <- page_sidebar(
  title = "My App",
  sidebar = sidebar("Controls here"),
  "Main content here"
)

# Navbar layout — for multi-page apps
ui <- page_navbar(
  title = "My App",
  nav_panel("Tab 1", "Content 1"),
  nav_panel("Tab 2", "Content 2"),
  nav_spacer(),
  nav_item(actionButton("help", "Help"))
)

# Fillable layout — content fills available space
ui <- page_fillable(
  card(
    full_screen = TRUE,
    plotOutput("plot")
  )
)

# Dashboard layout — grid of value boxes and cards
ui <- page_sidebar(
  title = "Dashboard",
  sidebar = sidebar(open = "closed", "Filters"),
  layout_columns(
    fill = FALSE,
    value_box("Revenue", "$1.2M", theme = "primary"),
    value_box("Users", "4,521", theme = "success"),
    value_box("Uptime", "99.9%", theme = "info")
  ),
  layout_columns(
    card(plotOutput("chart1")),
    card(plotOutput("chart2"))
  )
)

Got: Page layout matches the application's navigation and content needs.

If fail: If the layout doesn't look right, check that you're using page_sidebar() / page_navbar() (bslib) not fluidPage() / navbarPage() (base shiny). The bslib versions have better defaults and theming support.