Towards the next generation of Shiny UI

Carson Sievert
Software Engineer, Posit
bit.ly/bslib-dashboard-slides

Towards the next generation of Shiny UI

Carson Sievert Software Engineer, Posit bit.ly/bslib-dashboard-slides

How to make a dashboard with {bslib}

{bslib}: a modern Shiny UI toolkit

  1. Use any version of Bootstrap and easily customize CSS.
  1. Provide modern UI replacements for {shiny} and {shinydashboard}.
    • Currently includes cards, sidebars, value boxes, accordions, page/layout helpers, and more.
    • We plan on integrating this work into the Shiny for Python and Shiny UI editor.

Hello page_*()

Easily upgrade to latest Bootstrap w/ {bslib} drop-in replacements for {shiny}’s fluidPage(), fixedPage(), etc (still on Bootstrap 3).

library(bslib)
library(shiny)

page_fluid(
  h1("Hello Bootstrap 5")
)

Pin version via bs_theme()

page_*() containers currently default to Bootstrap 5 (via theme = bs_theme()). Production apps should consider hard-coding the version.

library(bslib)
library(shiny)

page_fluid(
  theme = bs_theme(version = 5),
  h1("Hello Bootstrap 5")
)

Bootswatch themes

Use bs_theme() to easily use Bootswatch themes…

library(bslib)
library(shiny)

page_fluid(
  theme = bs_theme(
    bootswatch = "quartz"
  ),
  h1("Hello Bootstrap 5")
)

Custom themes

  • Easily choose main colors and fonts (and 100s of other theming variables).
    • Use font_google() to automatically download, cache, and import Google Font files.
library(bslib)
library(shiny)

page_fluid(
  theme = bs_theme(
    bg = "#212121", 
    fg = "white",
    base_font = font_google(
      "Indie Flower"
    )
  ),
  h1("Hello Bootstrap 5")
)

Utility Classes

Bootstrap utility classes are also quite useful for spacing, alignment, and more.

library(bslib)
library(shiny)

page_fluid(
  theme = bs_theme(
    bg = "#212121",
    fg = "white",
    base_font = font_google(
      "Indie Flower"
    )
  ),
  h1(
    class = "text-center", 
    class = "text-primary",
    "Hello Bootstrap 5"
  )
)

Let’s build a dashboard with {bslib}


Danger

Sidebars and accordions are still in development, but if you’re brave, try them out:

remotes::install_github("rstudio/bslib")

In summary, consider {bslib} for your next dashboard

  • Steeper learning curve than {shinydashboard} & {flexdashboard}
    • More theme-able, composable, extensible, and portable.
  • You may miss some {shinydashboard} features
    • As always, we love to hear your feedback, and ideas for improvements!
  • Not everything needs to be dashboard (and/or use Shiny)!
    • We hope these components are generically useful and portable (in R Markdown, static sites, eventually Quarto, etc.)

In summary, consider {bslib} for your next dashboard

Danger

Sidebars and accordions are still in development, but if you’re brave, try them out:

remotes::install_github("rstudio/bslib")

Thanks!