Box in a tab of a R shiny application does not work properly

Question

I have a shiny application in which I have tabs.
In these tabs I want to put some boxes like this : https://rstudio.github.io/shinydashboard/structure.html#valuebox
The display seems to be buggy and doesn't show the box outlines or even the colours at all

ui <- fluidPage(mainPanel(tabsetPanel(
  id = 'tabset',
  tabPanel(title = "First tab",
           fluidRow(
             box(
               title = "First box",
               width = 6,
               solidHeader = TRUE,
               status = "primary",
               valueBoxOutput("progressBox1")
             ),
             box(
               title = "Second box",
               width = 6,
               solidHeader = TRUE,
               status = "primary",
               valueBoxOutput("progressBox2")
             )
           )),
  tabPanel(title = "Second tab",
           fluidRow(
             box(
               title = "Third box",
               width = 6,
               solidHeader = TRUE,
               status = "primary",
               valueBoxOutput("progressBox3")
             )
           )),
)))
)

server <- function(input, output, session) {
  output$progressBox1 <- renderValueBox({
    valueBox(
      "80%", "Approval", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow"
    )
  })
  
  output$progressBox2 <- renderValueBox({
    valueBox(
      "12%", "Approval", icon = icon("thumbs-up", lib = "glyphicon"),
      color = "purple"
    )
  })
  
  output$progressBox3 <- renderValueBox({
    valueBox(
      "80%", "Approval", icon = icon("list"),
      color = "yellow"
    )
  })
}

if (interactive()) {
  shinyApp(ui, server)
}

The boxes are displayed correctly in a shinydashboard application.
Is there a way to display boxes when you have tabs in a shiny app (not shinydashboard) ?

Answer 1

Founded, just add : useShinydashboard() from shinyWidgets lib in the UI part

library(shinydashboard)
library(shinyWidgets)


ui <- fluidPage(mainPanel(
  tabsetPanel(
    id = 'tabset',
    useShinydashboard(),
    tabPanel(title = "First tab",
             fluidRow(
               box(
                 title = "First box",
                 width = 6,
                 solidHeader = TRUE,
                 status = "primary",
                 valueBoxOutput("progressBox1")
               ),
               box(
                 title = "Second box",
                 width = 6,
                 solidHeader = TRUE,
                 status = "primary",
                 valueBoxOutput("progressBox2")
               )
             )),
    tabPanel(title = "Second tab",
             fluidRow(
               box(
                 title = "Third box",
                 width = 6,
                 solidHeader = TRUE,
                 status = "primary",
                 valueBoxOutput("progressBox3")
               )
             )),
  )
))


server <- function(input, output, session) {
  output$progressBox1 <- renderValueBox({
    valueBox(
      "80%",
      "Approval",
      icon = icon("thumbs-up", lib = "glyphicon"),
      color = "yellow"
    )
  })
  
  output$progressBox2 <- renderValueBox({
    valueBox(
      "12%",
      "Approval",
      icon = icon("thumbs-up", lib = "glyphicon"),
      color = "purple"
    )
  })
  
  output$progressBox3 <- renderValueBox({
    valueBox("80%",
             "Approval",
             icon = icon("list"),
             color = "yellow")
  })
}

if (interactive()) {
  shinyApp(ui, server)
}