KPI dashboard
A Shiny dashboard with KPI value boxes, sidebar filters, a chart and a top-5 table, built with bslib on R’s airquality data. Free app.R to copy, edit and run.
Multi-page R Shiny app template with page_navbar
A Shiny app with several pages in a navigation bar: an overview with value boxes and an accordion, an interactive plotly chart and a DT data table.
About this template
When one page gets crowded, give the app a navigation bar. This template uses bslib’s page_navbar() with three pages: an overview, an explorer with an interactive chart and a data page.
It also shows a few newer bslib components: an accordion for background information and a tooltip that explains a setting when you hover over it. The data is R’s built-in iris dataset.
What's inside
- Pages with
page_navbar()andnav_panel() - An
accordion()with collapsible sections - An interactive chart with
plotly::plotlyOutput()andrenderPlotly() - A
tooltip()on a checkbox - A 3 + 9 column layout with
layout_columns(col_widths = c(3, 9))
The complete app.R
Download# Generated by DropToApp
library(shiny)
library(bslib)
ui <- page_navbar(
title = "Iris explorer",
nav_panel(
"Overview",
layout_columns(
value_box(title = "Flowers measured", value = "150", theme = "primary"),
value_box(title = "Species", value = "3", theme = "info"),
value_box(
title = "Measurements per flower",
value = "4",
theme = "secondary"
)
),
accordion(
accordion_panel(
"About the data",
p(
"Edgar Anderson measured the sepals and petals of 50 flowers from each of three iris species: setosa, versicolor and virginica."
)
),
accordion_panel(
"How to use this app",
p(
"Open Explore to compare two measurements in an interactive chart, or Data to search and sort all 150 flowers."
)
)
)
),
nav_panel(
"Explore",
layout_columns(
col_widths = c(3, 9),
card(
selectInput(
"x",
"X axis",
choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"),
selected = "Sepal.Length"
),
selectInput(
"y",
"Y axis",
choices = c("Sepal.Length", "Sepal.Width", "Petal.Length", "Petal.Width"),
selected = "Petal.Length"
),
tooltip(
checkboxInput("by_species", "Colour by species", value = TRUE),
"Give each species its own colour in the chart"
)
),
card(
full_screen = TRUE,
card_header("Interactive chart"),
plotly::plotlyOutput("chart")
)
)
),
nav_panel("Data", DT::DTOutput("table"))
)
server <- function(input, output, session) {
# Inputs: input$x, input$y, input$by_species
output$chart <- plotly::renderPlotly({
x <- iris[[input$x]]
y <- iris[[input$y]]
p <- if (input$by_species) {
plotly::plot_ly(x = x, y = y, color = iris$Species, type = "scatter", mode = "markers")
} else {
plotly::plot_ly(x = x, y = y, type = "scatter", mode = "markers")
}
plotly::layout(p, xaxis = list(title = input$x), yaxis = list(title = input$y))
})
output$table <- DT::renderDT({
iris
})
}
shinyApp(ui, server)
How to run it
- In your browser: run it with shinylive. R runs on your computer with webR; the first start downloads R and the packages, which can take a minute.
- In R or RStudio: save the code as
app.R, install the packages once withinstall.packages(c("shiny", "bslib", "DT", "plotly")), then runshiny::runApp()in the folder with the file. - In DropToApp: open the template in the editor to change the layout by drag and drop or edit the code, and export your own
app.R.
More Shiny templates
Data explorer
Pick a dataset and two columns to get a scatter plot, a searchable DT table and a summary, with axis choices that update per dataset. Free R Shiny template.
Feedback form
A feedback form in R Shiny: text, choice and rating inputs, a conditional field, validation, a live table of responses and a CSV download. Free app.R.
CSV upload and explorer
Upload a CSV file, choose the separator, and see its rows, columns, a searchable table and a summary. Download the data again as CSV. Free Shiny app template.
Histogram explorer
The classic first Shiny app, rebuilt with bslib: a slider and a variable picker drive a histogram of the Old Faithful geyser data. Free app.R to copy and run.