Build modern Shiny dashboards and applications using bslib (Bootstrap 5). Use when creating new Shiny apps, modernizing legacy apps (fluidPage, fluidRow/column, tabsetPanel, wellPanel, shinythemes), or working with bslib page layouts, grid systems, cards, value boxes, navigation, sidebars, filling layouts, theming, accordions, tooltips, popovers, toasts, or bslib inputs. Assumes familiarity with basic Shiny.
library(shiny)
library(bslib)
ui <- page_sidebar(
title = "My Dashboard",
theme = bs_theme(version = 5), # "shiny" preset by default
sidebar = sidebar(
selectInput("variable", "Variable", choices = names(mtcars))
),
layout_column_wrap(
width = 1/3,
fill = FALSE,
value_box(title = "Users", value = "1,234", theme = "primary"),
value_box(title = "Revenue", value = "\$56K", theme = "success"),
value_box(title = "Growth", value = "+18%", theme = "info")
),
card(
full_screen = TRUE,
card_header("Plot"),
plotOutput("plot")
)
)
server <- function(input, output, session) {
output$plot <- renderPlot({
hist(mtcars[[input$variable]], main = input$variable)
})
}
shinyApp(ui, server)
ui <- page_navbar(
title = "Analytics Platform",
theme = bs_theme(version = 5),
nav_panel("Overview", overview_ui),
nav_panel("Analysis", analysis_ui),
nav_panel("Reports", reports_ui)
)
page_sidebar() -- Single-page dashboard with sidebar (most common)page_navbar() -- Multi-page app with top navigation barpage_fillable() -- Viewport-filling layout for custom arrangementspage_fluid() -- Scrolling layout for long-form contentlayout_column_wrap() -- Uniform grid with auto-wrapping (recommended for most cases)layout_columns() -- 12-column Bootstrap grid with precise controlpage_navbar() for multi-page appsnavset_card_underline(), navset_tab(), navset_pill() for tabbed contentpage_sidebar() or page_navbar(sidebar = ...)layout_sidebar() within cardsresizable = TRUE by default — users can drag the edge to resize on desktopbs_theme() with Bootswatch themes for quick stylingbg, fg, primary affect hundreds of CSS rulesfont_google() for typographyinput_dark_mode() + session$setCurrentTheme()bsicons package (Bootstrap Icons, designed for bslib):bsicons::bs_icon("graph-up")
bsicons::bs_icon("people", size = "2em")
fontawesome package:fontawesome::fa("envelope")
aria-hidden="true"), which hides them from assistive technology.bsicons::bs_icon(): Provide title — this automatically sets a11y = "sem"
tooltip(
bs_icon("info-circle", title = "More information"),
"Tooltip content here"
)
fontawesome::fa(): Set a11y = "sem" and provide title
tooltip(
fa("circle-info", a11y = "sem", title = "More information"),
"Tooltip content here"
)
title should describe the purpose of the trigger (e.g., "More information", "Settings"), not the icon itself (e.g., not "info circle icon").input_switch() -- Toggle switch (modern checkbox alternative)input_dark_mode() -- Dark mode toggleinput_task_button() -- Button for long-running operationsinput_code_editor() -- Code editor with syntax highlightinginput_submit_textarea() -- Textarea with explicit submissionpage_sidebar() (single-page) or page_navbar() (multi-page)bs_theme() (consider Bootswatch for quick start)fill = FALSE on container)layout_column_wrap() or layout_columns()full_screen = TRUE on all visualization cardsthematic::thematic_shiny() for plot themingfluidPage() with page_sidebar() or page_navbar()fluidRow()/column() with layout_columns()card(full_screen = TRUE)theme = bs_theme(version = 5)value_box() componentstabsetPanel() with navset_card_underline()page_sidebar(), page_navbar(), page_fillable(), page_fluid()) over legacy equivalents (fluidPage(), navbarPage())layout_column_wrap() or layout_columns() for grid layouts instead of fluidRow()/column(), which don't support filling layoutscard(full_screen = TRUE) when building dashboards -- full-screen expansion is a high-value featurefill = FALSE on layout_column_wrap() containers holding value boxes (they shouldn't stretch to fill height)theme = bs_theme(version = 5) or a preset themethematic::thematic_shiny() in the server so base R and ggplot2 plots match the app themewidth = "250px" in layout_column_wrap() for auto-adjusting columnsaccordion() when sidebars have many controlscard() containers. navset_card_*() functions are already cards; nav_panel() content goes directly inside them without wrapping in card()layout_columns() and layout_column_wrap() for laying out multiple elements. Single children should be passed directly to their container functions.page_*() functions. Only use one top-level page function per app.