Styling Your App

November 13, 2024

Looks Matter! 🎨

Quickly Leveling Up Your UI

  • There are many ways to make your app look instantly better
  • One of them is using bslib which is a package that provides a modern UI toolkit for Shiny and R Markdown based on Bootstrap
  • The cool thing: you can get around Shiny’s default usage of Bootstrap version 3!

Working with {bslib}

library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(version = 5),
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numericInput(inputId = "number",
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = "button",
                 label = "Click me"),
    textOutput(outputId = "text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)

Working with {bslib}

Use the bootswatch argument to change the theme (other bootswatch themes:

library(shiny)
library(bslib)

ui <- page_navbar(
  theme = bs_theme(version = 5, bootswatch = "minty"),
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numericInput(inputId = "number",
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = "button",
                 label = "Click me"),
    textOutput(outputId = "text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)

Working with {bslib}

You can also customize the theme:

library(shiny)
library(bslib)

custom_theme <- bs_theme(
  version = 5,
  bg = "#F9F9F9",
  fg = "#003f5c",
  primary = "#bc5090",
  secondary = "#58508d",
  warning = "#ffa600",
  danger = "#ff6361",
  info = "#0091d5",
  base_font = font_google("PT Sans")
)

ui <- page_navbar(
  theme = custom_theme,
  title = "Modular App Blueprint",
  nav_panel(
    title = "Numbers",
    numericInput(inputId = "number",
                 label = "Enter a number",
                 value = 0),
    actionButton(inputId = "button",
                 label = "Click me",
                 width = "100px"),
    textOutput(outputId = "text")
  )
)

server <- function(input, output, session) {
  output$text <- renderText({
    input$number^2
  }) |> bindEvent(input$button)
}

shinyApp(ui, server)

Your Turn!

  • Take the toy app from this section or another one you have made
  • Add some styling to it using bslib
10:00

Shiny Dashboards

What is a Dashboard?

  • A dashboard combines multiple visualizations into a single page
  • It provides a high-level overview of the data
  • Here is an example of a dashboard I made using the shinydashboard package

Acknowledgements