7 Design

Objectives

In this chapter I will design the user interface with {bslib}. I will provide data only if it necessary to show the functionality of the UI design.

I am condensing the most important section for my project of the {bslib} Dashboard article.

7.0.1 Plainest Design

There only three layout elements available in the standard layout:

the title,
the sidebar for the controls and
the main content area.

R Code 7.1 : UI elements of the most simple dashboard

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 350
#| components: [editor, viewer]

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Title for the dashboard",
  sidebar = "Sidebar for the contols (input)",
  "Main content area"
)

shinyApp(ui, function(input, output) {})

Hint 7.1: How to interact with the shinylive-r output?

In the above first example there is only a minimal interaction possible. Clicking on the right top arrow in the sidebar (<) will close the sidebar and therefore enlarge the main content area. But in this {shinylive} mode you can also change the code and rerun the program by clicking on the top right filled arrow (▶). Try it out to change one of the text strings.

7.0.2 Minimum content

Both the sidebar and main content areas can hold any arbitrary collection of UI elements, but it’s good practice to keep inputs in the sidebar and outputs in the main content area. Also, consider wrapping outputs in a card() and sidebar contents in a sidebar() object to add a title and/or customize styling, positioning, etc.

R Code 7.2 : UI elements of the most simple dashboard

#| '!! shinylive warning !!': |
#|   shinylive does not work in self-contained HTML documents.
#|   Please set `embed-resources: false` in your metadata.
#| standalone: true
#| viewerHeight: 500
#| components: [editor, viewer]

library(shiny)
library(bslib)

ui <- page_sidebar(
  title = "Title for the whole dashboard",
  sidebar = sidebar(
    title = "Controls / Input"
  ),
  card(
    card_header("Title for the current card"),
    textOutput("txt")
  )
)

server <-  function(input, output) {
  output$txt <- renderText({
    "This is the main area (of the card)"
  })
}

shinyApp(ui, server)

Even with the minimum card content we needed about 15 code lines. This is just a simple template. All parts can be arbitrary complex - title() could be for example a complex expression - sidebar() can hold many input controls and directives for the layout (e.g., several cards in a specific arrangement), - card() can hold complex results and server() is the most tricky part, because it needs reactivity (reactive() functions) to work together with the input controls.

Hint 7.2: Minimum content as template

I have developed a template as an RStudio snippet with the minimum content example. I am using it to start new Shiny apps or a shinylive-r code chunks.

I will stop here with the minimum content example. It works as a template for new apps resp. shinylive-r code chunks. But there are still to cover many other {bslib} design features and functions. Whenever the need arises I will either come back here to this section or write my notes in the appropriate project section.

Glossary Entries

term	definition
Snippet	An RStudio snippet is a text macro or code template used to quickly insert commonly used pieces of code, automating the process of typing repetitive or boilerplate code. See: https://rstudio.github.io/rstudio-extensions/rstudio_snippets.html

Session Info

Code

xfun::session_info()

#> R version 4.5.1 (2025-06-13)
#> Platform: aarch64-apple-darwin20
#> Running under: macOS Sequoia 15.6.1
#> 
#> Locale: en_US.UTF-8 / en_US.UTF-8 / en_US.UTF-8 / C / en_US.UTF-8 / en_US.UTF-8
#> 
#> Package version:
#>   askpass_1.2.1      base64enc_0.1.3    bslib_0.9.0        cachem_1.1.0      
#>   cli_3.6.5          commonmark_2.0.0   compiler_4.5.1     cpp11_0.5.2       
#>   curl_7.0.0         digest_0.6.37      dplyr_1.1.4        evaluate_1.0.5    
#>   farver_2.1.2       fastmap_1.2.0      fontawesome_0.5.3  fs_1.6.6          
#>   generics_0.1.4     ggplot2_3.5.2      glossary_1.0.0     glue_1.8.0        
#>   graphics_4.5.1     grDevices_4.5.1    grid_4.5.1         gtable_0.3.6      
#>   highr_0.11         htmltools_0.5.8.1  htmlwidgets_1.6.4  httr_1.4.7        
#>   isoband_0.2.7      jquerylib_0.1.4    jsonlite_2.0.0     kableExtra_1.4.0  
#>   knitr_1.50         labeling_0.4.3     lattice_0.22.7     lifecycle_1.0.4   
#>   litedown_0.7       magrittr_2.0.3     markdown_2.0       MASS_7.3.65       
#>   Matrix_1.7.4       memoise_2.0.1      methods_4.5.1      mgcv_1.9.3        
#>   mime_0.13          nlme_3.1.168       openssl_2.3.3      pillar_1.11.0     
#>   pkgconfig_2.0.3    R6_2.6.1           rappdirs_0.3.3     RColorBrewer_1.1-3
#>   renv_1.1.5         rlang_1.1.6        rmarkdown_2.29     rstudioapi_0.17.1 
#>   rversions_2.1.2    rvest_1.0.5        sass_0.4.10        scales_1.4.0      
#>   selectr_0.4.2      splines_4.5.1      stats_4.5.1        stringi_1.8.7     
#>   stringr_1.5.1      svglite_2.2.1      sys_3.4.3          systemfonts_1.2.3 
#>   textshaping_1.0.1  tibble_3.3.0       tidyselect_1.2.1   tinytex_0.57      
#>   tools_4.5.1        utf8_1.2.6         utils_4.5.1        vctrs_0.6.5       
#>   viridisLite_0.4.2  withr_3.0.2        xfun_0.53          xml2_1.4.0        
#>   yaml_2.3.10