Shiny Bslib

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha babb6bf12fac · 18 Oct 2026Report an issue or request a re-scan

• Publisherposit-dev GitHub organizationOwner of the repository this skill is read from
• Source folderposit-dev/skills/shiny/shiny-bslibThe exact folder we audited
• LicenceMITAs the repository states it
• Commit pinned for this verdictbabb6bf12facA new audit runs when the source changes
• Repository statusNot archivedLast push 2 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its description: 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…

---
name: shiny-bslib
description: 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.
metadata:
  author: Garrick Aden-Buie (@gadenbuie)
  version: "1.0"
license: MIT
---

# 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:**
```r
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:**
```r
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](references/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](references/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](references/cards.md) for detailed guidance.

### Value Boxes

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

See [value-boxes.md](references/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](references/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
- `resizable = TRUE` by default — users can drag the edge to resize on desktop

See [sidebars.md](references/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](references/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](references/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
- **Toolbars** -- Compact horizontal strips of buttons, selects, and dividers for card headers and footers

See [accordions.md](references/accordions.md), [tooltips-popovers.md](references/tooltips-popovers.md), [toasts.md](references/toasts.md), and [toolbars.md](references/toolbars.md).

### Icons

**Recommended: `bsicons` package** (Bootstrap Icons, designed for bslib):
```r
bsicons::bs_icon("graph-up")
bsicons::bs_icon("people", size = "2em")
```

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

**Alternative: `fontawesome` package:**
```r
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"`
  ```r
  tooltip(
    bs_icon("info-circle", title = "More information"),
    "Tooltip content here"
  )
  ```
- **`fontawesome::fa()`**: Set `a11y = "sem"` and provide `title`
  ```r
  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.

Excerpt, first 6,000 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/posit-dev/skills
git -C skills checkout babb6bf12fac

Works in

1. 2026-10-18
   ✓SAFE B 89 / 100

   first audit · source babb6bf12fac

Questions about Shiny Bslib

• github.com/posit-dev/skills/tree/main/shiny/shiny-bslib — the audited source at commit babb6bf12fac and every finding aboveObserved · 18 Oct 2026

Spotted something wrong? Report a correction · Methodology