Components

The hardware and bandwidth for this mirror is donated by dogado GmbH, the Webhosting and Full Service-Cloud Provider. Check out our Wordpress Tutorial.
If you wish to report a bug, or if you are interested in having us mirror your free-software or open-source project, please feel free to contact us at mirror[@]dogado.de.

Components

A guided tour of the UI components in bslibdash. New here? Start with vignette("getting-started") for an end-to-end app; for restyling see vignette("theming").

Cards

box() is the primary card. boxLayout() arranges several cards in a responsive grid, and updateBox() controls a card from the server.

boxLayout(
  box("First card",  title = "Status",  status = "primary"),
  box("Second card", title = "Details", status = "info",
      collapsible = TRUE),
  type = "deck"
)

# server side
updateBox("status", action = "toggle")          # collapse/expand
updateBox("status", action = "update",
          options = list(title = "Updated", status = "success"))

Valid status/background values are the eight Bootstrap status names (primary, secondary, success, info, warning, danger, light, dark).

Value & info boxes

fluidRow(
  valueBox("128", "Open tickets", icon = icon("inbox"),    color = "primary"),
  valueBox("42%", "CPU",          icon = icon("cpu"),      color = "warning"),
  infoBox(title = "Status",       value = "Healthy",       color = "success")
)

Both accept Bootstrap status names (primary, success, …) and the legacy shinydashboard palette (aqua, green, red, …), which is mapped automatically.

Tab box

tabBox(
  id = "summary", title = "Q4",
  tabPanel("Overview", p("Overview content")),
  tabPanel("Details",  p("Detail content"))
)

Sidebar navigation

dashboardSidebar(
  sidebarUserPanel("Jane Doe", subtitle = "Administrator"),
  sidebarSearchForm("q", "go", label = "Search records..."),
  sidebarMenu(
    id = "sidebarMenu",
    sidebarHeader("Main"),
    menuItem("Overview", tabName = "overview", icon = icon("house")),
    menuItem("Reports",  icon = icon("bar-chart"),
      menuSubItem("Daily",   tabName = "reports_daily"),
      menuSubItem("Monthly", tabName = "reports_monthly")
    )
  )
)

Navigate from the server with updateTabItems():

observeEvent(input$go_reports, {
  updateTabItems(session, inputId = "sidebarMenu", selected = "reports")
})

Header dropdown menus

dashboardHeader(
  title = "Operations",
  rightUi = dropdownMenu(
    type = "notifications", badgeStatus = "warning",
    notificationItem("Backup completed",  status = "success"),
    notificationItem("New deployment",    status = "info"),
    messageItem(from = "Ops bot", message = "Pipeline finished",
                color = "success"),
    taskItem(text = "Data refresh", value = 75, color = "info")
  )
)

Use dropdownMenuOutput() + renderDropdownMenu() to drive the panel reactively. See the next section for the full set of output/render pairs.

Reactive outputs and renderers

Most dynamic bslibdash components follow the familiar Shiny *Output() + render*() pattern. Place the *Output() in the UI where the component should appear, then build it from the server with the matching render*():

UI side	Server side	Re-renders
`valueBoxOutput()`	`renderValueBox()`	A single `valueBox()`
`infoBoxOutput()`	`renderInfoBox()`	A single `infoBox()`
`dropdownMenuOutput()`	`renderDropdownMenu()`	A header `dropdownMenu()`
`sidebarMenuOutput()`	`renderMenu()`	A `sidebarMenu()`

Accordion, badges, buttons, icons

accordion(
  id = "filters",
  accordionItem(title = "Date range", p("Last 30 days")),
  accordionItem(title = "Region",     p("All regions"), status = "info")
)

badge("NEW", color = "success", position = "right", rounded = TRUE)

actionButton("refresh", "Refresh", icon = "arrow-clockwise",
             status = "primary")

icon("user")                       # Bootstrap Icons via {bsicons}
icon("bar-chart", size = "1.25rem", class = "text-primary")

Toasts

toast() is a thin wrapper over shiny::showNotification() that uses a bslib::card() as the notification body:

observeEvent(input$save, {
  toast(
    title    = "Saved",
    body     = "Settings were updated.",
    options  = list(type = "message", delay = 3000),
    session  = session
  )
})

These binaries (installable software) and packages are in development.
They may not be fully stable and should be used with caution. We make no claims about them.
Health stats visible at Monitor.