Modern Shiny Apps with bslib

Build professional Shiny dashboards using bslib's Bootstrap 5 components and layouts. This skill focuses on modern UI/UX patterns that replace legacy Shiny approaches.

Quick Start

Single-page dashboard:

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)

Multi-page dashboard:

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) )

Core Concepts

Page Layouts

• page_sidebar() -- Single-page dashboard with sidebar (most common)

• page_navbar() -- Multi-page app with top navigation bar

• page_fillable() -- Viewport-filling layout for custom arrangements

• page_fluid() -- Scrolling layout for long-form content

See page-layouts.md for detailed guidance.

Grid Systems

• layout_column_wrap() -- Uniform grid with auto-wrapping (recommended for most cases)

• layout_columns() -- 12-column Bootstrap grid with precise control

See grid-layouts.md for detailed guidance.

Cards

Primary container for dashboard content. Support headers, footers, multiple body sections, and full-screen expansion.

See cards.md for detailed guidance.

Value Boxes

Display key metrics and KPIs with optional icons, sparklines, and built-in theming.

See value-boxes.md for detailed guidance.

Navigation

• Page-level: page_navbar() for multi-page apps

• Component-level: navset_card_underline() , navset_tab() , navset_pill() for tabbed content

See navigation.md for detailed guidance.

Sidebars

• Page-level: page_sidebar() or page_navbar(sidebar = ...)

• Component-level: layout_sidebar() within cards

• Supports conditional content, dynamic open/close, accordions

See sidebars.md for detailed guidance.

Filling Layouts

The fill system controls how components resize to fill available space. Key concepts: fillable containers, fill items, fill carriers. Fill activates when containers have defined heights.

See filling.md for detailed guidance.

Theming

• bs_theme() with Bootswatch themes for quick styling

• Custom colors: bg , fg , primary affect hundreds of CSS rules

• Fonts: font_google() for typography

• Dynamic theming: input_dark_mode()

• session$setCurrentTheme()

See theming.md for detailed guidance.

UI Components

• Accordions -- Collapsible sections, especially useful in sidebars

• Tooltips -- Hover-triggered help text

• Popovers -- Click-triggered containers for secondary UI/inputs

• Toasts -- Temporary notification messages

See accordions.md, tooltips-popovers.md, and toasts.md.

Icons

Recommended: bsicons package (Bootstrap Icons, designed for bslib):

bsicons::bs_icon("graph-up") bsicons::bs_icon("people", size = "2em")

Browse icons: https://icons.getbootstrap.com/

Alternative: fontawesome package:

fontawesome::fa("envelope")

Accessibility for icon-only triggers: When an icon is used as the sole trigger for a tooltip, popover, or similar interactive element (no accompanying text), it must be accessible to screen readers. By default, icon packages mark icons as decorative (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" )

The title should describe the purpose of the trigger (e.g., "More information", "Settings"), not the icon itself (e.g., not "info circle icon").

Special Inputs

• input_switch() -- Toggle switch (modern checkbox alternative)

• input_dark_mode() -- Dark mode toggle

• input_task_button() -- Button for long-running operations

• input_code_editor() -- Code editor with syntax highlighting

• input_submit_textarea() -- Textarea with explicit submission

See inputs.md for detailed guidance.

Common Workflows

Building a Dashboard

• Choose page layout: page_sidebar() (single-page) or page_navbar() (multi-page)

• Add theme with bs_theme() (consider Bootswatch for quick start)

• Create sidebar with inputs for filtering/controls

• Add value boxes at top for key metrics (set fill = FALSE on container)

• Arrange cards with layout_column_wrap() or layout_columns()

• Enable full_screen = TRUE on all visualization cards

• Add thematic::thematic_shiny() for plot theming

Modernizing an Existing App

See migration.md for a complete mapping of legacy patterns to modern equivalents. Key steps:

• Replace fluidPage() with page_sidebar() or page_navbar()

• Replace fluidRow() /column() with layout_columns()

• Wrap outputs in card(full_screen = TRUE)

• Add theme = bs_theme(version = 5)

• Convert key metrics to value_box() components

• Replace tabsetPanel() with navset_card_underline()

Guidelines

• Prefer bslib page functions (page_sidebar() , page_navbar() , page_fillable() , page_fluid() ) over legacy equivalents (fluidPage() , navbarPage() )

• Use layout_column_wrap() or layout_columns() for grid layouts instead of fluidRow() /column() , which don't support filling layouts

• Wrap outputs in card(full_screen = TRUE) when building dashboards -- full-screen expansion is a high-value feature

• Set fill = FALSE on layout_column_wrap() containers holding value boxes (they shouldn't stretch to fill height)

• Pin Bootstrap version: include theme = bs_theme(version = 5) or a preset theme

• Use thematic::thematic_shiny() in the server so base R and ggplot2 plots match the app theme

• Use responsive widths like width = "250px" in layout_column_wrap() for auto-adjusting columns

• Group sidebar inputs with accordion() when sidebars have many controls

• See migration.md for mapping legacy Shiny patterns to modern bslib equivalents

Avoid Common Errors

• Avoid directly nesting card() containers. navset_card_*() functions are already cards; nav_panel() content goes directly inside them without wrapping in card()

• Only use layout_columns() and layout_column_wrap() for laying out multiple elements. Single children should be passed directly to their container functions.

• Never nest page_*() functions. Only use one top-level page function per app.

Reference Files

• migration.md -- Legacy Shiny to modern bslib migration guide

• page-layouts.md -- Page-level layout functions and patterns

• grid-layouts.md -- Multi-column grid systems

• cards.md -- Card components and features

• value-boxes.md -- Value boxes for metrics and KPIs

• navigation.md -- Navigation containers and patterns

• sidebars.md -- Sidebar layouts and organization

• filling.md -- Fillable containers and fill items

• theming.md -- Basic theming (colors, fonts, Bootswatch). See shiny-bslib-theming skill for advanced theming

• accordions.md -- Collapsible sections and sidebar organization

• tooltips-popovers.md -- Hover tooltips and click-triggered popovers

• toasts.md -- Temporary notification messages

• inputs.md -- Special bslib input widgets

• best-practices.md -- bslib-specific patterns and common gotchas