Shiny Layout Systems

Professional UI design patterns and responsive layouts for modern Shiny apps

1 Page Layout Types

# Fluid page (responsive)
ui <- fluidPage(
  titlePanel("My App"),
  # Content adapts to screen size
  fluidRow(
    column(4, "Sidebar"),
    column(8, "Main content")
  )
)

# Fixed page (consistent width)
ui <- fixedPage(
  titlePanel("My App"),
  # Max width ~1170px, centered
  fixedRow(
    column(4, "Sidebar"),
    column(8, "Main content")
  )
)

When to Use

fluidPage: Dashboards, public apps, mobile-friendly
fixedPage: Scientific tools, consistent presentation

2 12-Column Grid System

# Equal columns (3 + 3 + 3 + 3 = 12)
fluidRow(
  column(3, "25% width"),
  column(3, "25% width"),
  column(3, "25% width"),
  column(3, "25% width")
)

# Sidebar layout (4 + 8 = 12)
fluidRow(
  column(4, "Sidebar (33%)"),
  column(8, "Main content (67%)")
)

# Nested columns
fluidRow(
  column(6,
    fluidRow(
      column(6, "Nested left"),
      column(6, "Nested right")
    )
  ),
  column(6, "Right side")
)

Grid Math: Column numbers should add up to 12 per row for optimal layout

3 Sidebar Layout

# Professional sidebar layout
ui <- fluidPage(
  titlePanel("Dashboard"),
  
  sidebarLayout(
    # Sidebar for controls
    sidebarPanel(
      width = 3,  # Custom width (1-12)
      
      h4("Controls"),
      selectInput("var", "Variable:", 
                  choices = names(mtcars)),
      sliderInput("n", "Observations:",
                  min = 10, max = 1000, value = 100),
      
      hr(),  # Horizontal line
      actionButton("run", "Run Analysis",
                   class = "btn-primary")
    ),
    
    # Main panel for outputs
    mainPanel(
      width = 9,  # Remaining space
      
      tabsetPanel(
        tabPanel("Plot", plotOutput("plot")),
        tabPanel("Table", tableOutput("table"))
      )
    )
  )
)

Perfect For

Data analysis apps • Control panels • Interactive dashboards

4 Tabbed Layouts

# Basic tabs
tabsetPanel(
  tabPanel("Data", 
           h3("Data Input"),
           fileInput("file", "Upload:")),
  
  tabPanel("Analysis",
           h3("Statistical Analysis"),
           plotOutput("analysis_plot")),
  
  tabPanel("Results",
           h3("Results & Export"),
           downloadButton("download", "Download"))
)

# Navbar page (multi-page app)
ui <- navbarPage(
  title = "My Application",
  
  tabPanel("Home", "Welcome content"),
  tabPanel("Analysis", "Analysis interface"),
  tabPanel("About", "About information")
)

Organization: Use tabs to group related functionality and reduce interface clutter

5 Responsive Design

# Responsive breakpoints (Bootstrap)
# xs: < 768px (phones)
# sm: ≥ 768px (tablets)
# md: ≥ 992px (desktops)
# lg: ≥ 1200px (large screens)

# Mobile-friendly layout
fluidRow(
  # Stacks vertically on mobile
  column(4, 
         wellPanel(
           h4("Controls"),
           selectInput("var", "Variable:", 
                       choices = c("A", "B"))
         )),
  
  column(8,
         # Auto-adjusting plot
         plotOutput("plot", height = "auto"))
)

# Mobile-optimized buttons
actionButton("action", "Action",
             class = "btn-primary btn-lg btn-block")

Mobile Tips

Use btn-block for full-width buttons • wellPanel for grouped controls

6 Advanced Patterns

# Dashboard with value boxes
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Dashboard"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      valueBoxOutput("value1"),
      valueBoxOutput("value2"),
      valueBoxOutput("value3")
    )
  )
)

# Custom styled sections
div(class = "well",
    h4("Section Title"),
    p("Content with nice styling")
)

# Conditional panels
conditionalPanel(
  condition = "input.show_advanced == true",
  wellPanel(
    h4("Advanced Options"),
    # Advanced controls here
  )
)

Pro Tips: Use wellPanel() to group controls, hr() for visual separation

Want More Cheatsheets Like This?

Join our newsletter and get exclusive cheatsheets, tutorials, and tips delivered straight to your inbox. Plus, be the first to know about new interactive tools and advanced tutorials!

Exclusive cheatsheets & tutorials • Join 10,000+ data scientists • Unsubscribe anytime

Ready to Design Professional Shiny Layouts?

Master layout systems and create beautiful, responsive interfaces with our comprehensive guides

Complete Layout Systems Guide Master Input Controls App Structure Cheatsheet

Responsive design patterns • Professional UI templates • Mobile-friendly layouts

Shiny App Structure Cheatsheet: Essential Quick Reference

Master the fundamentals with visual examples and ready-to-use code snippets

Shiny R Beginner Cheatsheet