Create trendy interactive apps for 2025: Leverage the latest Shiny app templates

Hello, fellow R enthusiasts! Today we're going to learn how to build cool, trendy Shiny apps. Shiny app Templates make it easy to create a modern, sleek UI. Let's take a look at what design elements are gaining traction as we head into 2025.

Latest design trends for Shiny apps

UX/UI trends for 2025 include the return of analog elements, AI-powered personalization, AR integration, and more. Let's take a look at how these trends can be applied to Shiny apps.

1. ventobox design

shinydashboard package to implement layouts that present information in a clean and organized way.

2. AI-powered personalization

reticulate package to integrate Python's machine learning libraries with Shiny to build personalized dashboards or recommendation systems.

3. interactive 3D objects

plotly or rgl package to create interactive visualizations that allow users to manipulate 3D graphs.

4. Modern Skirmishism

shinyWidgets package to add subtle shadows and textures to UI elements to give them depth.

5. Utilize bslib

Use the bslib package to implement a modern, Bootstrap-based UI

By combining the right mix of these trends and applying them to your Shiny app, you can create a modern, user-friendly app that reflects the latest design sensibilities of 2025. Today, we'll focus on the last of these.

bslib: The heart of a modern UI

The bslib package is an essential tool for developing modern Shiny apps. Based on Bootstrap 5, this package allows you to create sleek UIs without any CSS knowledge.

library(shiny)
library(bslib)

ui <- page_fluid(
  theme = bs_theme(version = 5, bootswatch = "minty"),
  h1("My Trendy Shiny App"),
  card(
    card_header("Welcome!"),
    card_body("This is a modern Shiny app using bslib.")
  )
)

server <- function(input, output) {}

shinyApp(ui, server)

This code uses Bootstrap 5's 'Minty' theme to create an app with a clean, modern design, as shown below.

Responsive layouts and card design

The latest trends emphasize responsive design for different devices. bslib's layout_column_wrap()to implement this.

ui <- page_fluid(
  theme = bs_theme(version = 5, bootswatch = "pulse"),
  layout_column_wrap(
    width = 1/2,
    card(
      card_header("Analytics"),
      card_body("Your analytics content here")
    ),
    card(
      card_header("User Data"),
      card_body("User information display")
    )
  )
)

The result of running the above code is that the design automatically responds to the size of the web screen.

Add interactive elements

Let's add an interactive element to enhance the user experience. plotly makes it easy to create dynamic graphs.

library(shiny)
library(plotly)

ui <- fluidPage(
    titlePanel("Interactive mtcars Scatter Plot"),
    sidebarLayout(
        sidebarPanel(
            helpText("This app shows the relationship between weight (wt) and fuel efficiency (mpg) in the mtcars dataset.")
        ),
        mainPanel(
            plotlyOutput("interactive_plot")
        )
    )
)

server <- function(input, output) {
    output$interactive_plot %
            layout(title = 'mtcars: Weight vs Fuel Efficiency',
                   xaxis = list(title = 'Weight (1000 lbs)'),
                   yaxis = list(title = 'Fuel Efficiency (mpg)'))
    })
}

shinyApp(ui = ui, server = server)

Applying a custom theme

With bslib, you can easily customize the overall look and feel of your app. Here's an example of a more detailed theme using bslib.

library(shiny)
library(bslib)
library(ggplot2)

Define a custom theme for #
my_theme <- bs_theme(
    bg = "#FAFAFA",
    fg = "#333333",
    primary = "#007BFF",
    secondary = "#6C757D",
    base_font = font_google("Roboto"),
    heading_font = font_google("Montserrat"),
    font_scale = 1.1
)

Define the # UI
ui <- page_navbar(
    theme = my_theme,
    title = "Old Faithful Geyser Data",
    nav_panel("Home",
              sidebarLayout(
                  sidebarPanel(
                      title = "Controls",
                      sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30)
                  ),
                  mainPanel(
                      card(
                          card_header("Geyser Eruption Histogram"),
                          plotOutput("geyserPlot"),
                          verbatimTextOutput("debugText")
                      )
                  )
              )
    ),
    nav_panel("About",
              "This app shows a histogram of the Old Faithful geyser eruption data."
    )
)

# server logic
server <- function(input, output, session) {
    output$geyserPlot <- renderPlot({
        req(input$bins) # Check if input is ready
        
        x <- faithful$waiting
        bins <- seq(min(x), max(x), length.out = input$bins + 1)
        
        Output # debugging information
        output$debugText <- renderPrint({
            cat("Bins:", length(bins) - 1, "\n")
            cat("Range:", range(x), "\n")
            cat("Data points:", length(x), "\n")
        })
        
        ggplot(faithful, aes(x = waiting)) +
            geom_histogram(breaks = bins, fill = "skyblue", color = "white") +
            theme_minimal() +
            labs(title = "Old Faithful Geyser Eruptions",
                 x = "Waiting time to next eruption (mins)",
                 y = "Frequency")
    })
}

Run the # app
shinyApp(ui = ui, server = server)

In this Shiny app code:

1. bs_theme() function to customize and define different theme elements, such as background color, text color, primary/secondary color, etc. We also used Google Fonts to set different primary and title fonts.
2. page_navbar() function to organize the main layout of the app. This function makes it easy to create a navigation bar at the top.
3. Inside the navigation bar, click the layout_sidebar() function to define the sidebar layout: we placed a slider control in the sidebar and a card() function to create a card that holds a histogram plot and debug text.
4. In server logic, the renderPlot() function to render a histogram plot, renderPrint() function to output debug information.

Overall, this code demonstrates how to create a Bootstrap 4-style responsive Shiny app using the bslib library. It covers the core elements of Shiny app development, including setting up a custom theme, configuring layouts, and visualizing data.

To wrap up the Shiny app templates post, let's look at the

Shiny app templates make it easy to create beautiful apps that reflect the latest trends, and packages like bslib, plotly, and more can be used in combination to deliver richer UIs and UXs. As we enter 2025, it's a good time to think about blending analog elements with digital innovation.

The world of Shiny is constantly evolving. We hope this guide helps your next Shiny project become more polished and user-friendly!

As a side note, you can implement responsive web with plotly in Python, which is a popular language these days, just like you can in R. Interactive Graphs: Learn to visualize data easily with Python Plotly Check out the post to find out!

# Glossary

• bslibBootstrap: a package that makes it easy to use Bootstrap in R
• Responsive designHow to design a web that automatically responds to different screen sizes
• plotlyR version of a JavaScript library that allows you to create interactive graphs.