How to Customize the Layout of your Shiny Apps

Learn how to control the layout of Shiny apps and improve how their look

Felix Analytix

Apr 28, 2024

∙ Paid

Would you like to know how to fully customize the layout of your R shiny web applications in a easy way?

Today you will learn how to:

create a simple R Shiny User Interface (UI) Layout;
how to add a sidebar with inputs;
add multiple rows, columns, tabs and pages in R Shiny;
add a theme and fully customize colors and fonts;
and more…

Watch the video:

Load R packages

Before we begin, make sure you have the required packages installed:

install.packages(c("shiny", "tidyverse", "gt", "bslib"))

Single Page Layout with Sidebar

Let’s start with the most common Shiny layout pattern - a sidebar layout. This creates a clean interface with controls on the left and main content on the right.

library(shiny)
library(tidyverse)
library(gt)

ui <- fluidPage(
  titlePanel("Starwars Dashboard"),
  sidebarLayout(
    sidebarPanel(
      selectInput(
        inputId = "character", 
        label = "Choose a Character:", 
        choices = unique(starwars$name),
        selected = unique(starwars$name)[1],
        multiple = TRUE
      )
    ),
    mainPanel(
      gt::gt_output("characterInfos")
    )
  )
)

server <- function(input, output) {
  output$characterInfos <- gt::render_gt({
    dplyr::starwars %>% 
      filter(name %in% input$character) %>%
      gt() %>%
      opt_interactive()
  })
}

shinyApp(ui = ui, server = server)

This layout demonstrates the fundamental structure of a Shiny application:

sidebarPanel: Contains input controls (in this case, a character selector)
mainPanel: Displays the main content (an interactive table)
Reactive filtering: The table updates automatically based on user selection

The sidebar layout is responsive and automatically adapts to different screen sizes, making it mobile-friendly.

Multi-Row Layouts with Grid System

For more complex interfaces, you’ll need precise control over element positioning. Shiny uses Bootstrap’s 12-column grid system, allowing you to create custom layouts with multiple rows and columns.