Add Value and Info Box in Shiny and Rmarkdown

This post explains how you can add value and info boxes in shiny and Rmarkdown. Value and Info Boxes are very popular to display insights in colorful boxes, they are available in shinydashboard package but not in shiny and Rmarkdown. There are many times when you don't want to use shinydashboard template but want to include value and info boxes to make your shiny app visually appealing. I am glad to release R package named summaryBox for this. You can install it from github. It is not available in CRAN yet.

remotes::install_github("deepanshu88/summaryBox")

This is a basic example for demonstration purpose. This package is based on Bootstrap 4 so it's important you enable Bootstrap 4 in shiny using bslib library as shiny by default uses Bootstrap 3. Latest version of Shiny (1.6) started supporting Bootstrap 4 so it does not work with prior versions of shiny (< 1.6.0). Bootstrap 4 is the future in upcoming versions of shiny. Bootstrap 3 is very old and was launched in the year of 2013. Bootstrap 4 is also 3.5 years old but has a lot of pros over Bootstrap 3. Bootstrap 4 supports SASS for styling, it also uses rem instead of px which can scale elements up and down without getting stuck with a fixed size.

library(shiny)
library(summaryBox)

# Bootstrap 4
theme <- bslib::bs_theme(version = 4)

# UI
ui <- fluidPage(

  theme = theme,

  br(),

  fluidRow(

    summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")

  ),

  fluidRow(

    summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info", border = "bottom"),
    summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success", border = "bottom"),
    summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger", border = "bottom"),
    summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary", border = "bottom")

  ),


  fluidRow(
    summaryBox2("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox2("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox2("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox2("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
  ),

  br(),

  # Info Box
  fluidRow(
    summaryBox3("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
    summaryBox3("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
    summaryBox3("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
    summaryBox3("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
  )

)

# Server
server <- function(input, output, session) {


}

# Run App
shinyApp(ui = ui, server = server)

In this package, there are 3 functions for value and info boxes.

• summaryBox( )
• summaryBox2( )
• summaryBox3( )

summaryBox3( )Syntax of summaryBox( ) along with its variable definition is as follows.

summaryBox(
  title,
  value,
  width = 4,
  icon = "fas fa-chart-bar",
  style = "info",
  border = "left"
)

Arguments
title    Text to be shown in the box
value   Value to be shown in the box
width   Width of Box. width = 4 means 3 boxes can be fitted (12 / 4)
icon     Font Awesome 5 icons. E.g. "fas fa-chart-bar"
style    Either "primary", "secondary", "info", "success", "danger", "warning"
border  Either "left", "bottom"

summaryBox2( ) function also supports "light" and "dark" styles in addition to these styles "primary", "secondary", "info", "success", "danger", "warning"

You can use renderUI( ) for communicating it with reactives which makes it dynamic. See the example below.

library(shiny)
library(summaryBox)

# Bootstrap 4
theme <- bslib::bs_theme(version = 4)

# UI
ui <- fluidPage(

  theme = theme,
  br(),
  uiOutput("summarybox")

)

# Server
server <- function(input, output, session) {

  output$summarybox <- renderUI({

    fluidRow(
      summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info"),
      summaryBox("Earnings (Annual)", "9332", width = 3, icon = "fas fa-dollar-sign", style = "success"),
      summaryBox("Tasks", "346", width = 3, icon = "fas fa-clipboard-list", style = "danger"),
      summaryBox("Pending Requests", "346", width = 3, icon = "fas fa-comments", style = "primary")
    )

  })

}

# Run App
shinyApp(ui = ui, server = server)

As stated before it works with Bootstrap 4 only so you need to specify it in Rmarkdown. This option is available only in version 2.7 or higher.

---
title: "Summary Box"
output:
  html_document:
    theme:
      version: 4
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = TRUE)
library(summaryBox)
```

```{r box}
summaryBox("Earnings (Monthly)", "$40,000", width = 3, icon = "fas fa-calendar", style = "info")
```