Skip to content

drknowhow/shinyModals

BranchesTags

Repository files navigation

shinyModals

A modern, composable modal dialog system for Shiny applications

R-CMD-check CRAN version License

Features • Quick Start • Documentation • Examples

Overview

shinyModals replaces Shiny's default modalDialog() system with a modern, flexible, and extensible modal framework. Perfect for building professional, interactive Shiny applications.

Current Version: 0.4.0
Status: Production Ready

Features

  • Composable Architecture: Build modals from separate header, body, and footer components
  • Preset Themes: 12 beautiful ready-to-use themes (ocean, dark, sunset, forest, neon, glass, etc.)
  • Notification Modals: Pre-built success, error, warning, info, and confirmation notifications with auto-dismiss
  • Flexible Theming: Customize colors, borders, shadows using CSS variables
  • Multiple Animations: Choose from fade, scale, or slide animations
  • Nested Modals: Stack multiple modals with automatic z-index management
  • Position Control: Display modals from center, left, right, top, or bottom
  • Backdrop Effects: Choose from fade (darken), blur, or none
  • Size Presets: xs, s, m, l, xl or custom sizes (px, %, vw)
  • Overflow Control: auto, scroll, hidden, or visible for body content
  • Draggable: Drag modals by header to reposition on screen
  • Custom Buttons: Override notification buttons with custom Shiny action buttons
  • User-Friendly Controls: Close via button, backdrop click (configurable), or ESC key
  • Responsive Design: Works beautifully on desktop and mobile
  • Clean API: Simple show_modal(), hide_modal(), toggle_modal(), and hide_all_modals() functions

Installation

From GitHub (Recommended)

# Install devtools if you haven't already
install.packages("devtools")

# Install shinyModals from GitHub
devtools::install_github("drknowhow/shinyModals")

From Local Source

devtools::install_local("path/to/shinyModals")

Quick Start

library(shiny)
library(shinyModals)

ui <- fluidPage(
  use_shiny_modals(),  # Initialize modals
  
  actionButton("show_modal", "Show Modal"),
  
  shiny_modal(
    id = "my_modal",
    header = modal_header("Hello World", icon = icon("info")),
    body = modal_body(
      p("This is a modern modal with the Ocean theme!")
    ),
    footer = modal_footer(
      actionButton("ok", "OK", class = "btn-primary")
    ),
    theme = modal_theme_preset("ocean"),  # Use a preset theme!
    draggable = TRUE
  )
  )
)

server <- function(input, output, session) {
  observeEvent(input$show_modal, {
    show_modal("my_modal")
  })
  
  observeEvent(input$ok, {
    hide_modal("my_modal")
  })
}

shinyApp(ui, server)

Components

Modal Header

modal_header(
  title = "My Title",
  icon = icon("star"),           # Optional icon
  close_button = TRUE            # Show/hide close button
)

Modal Body

modal_body(
  h4("Content Title"),
  p("Your content goes here..."),
  # Any Shiny UI elements
)

Modal Footer

modal_footer(
  actionButton("confirm", "Confirm", class = "btn-primary"),
  actionButton("cancel", "Cancel", class = "btn-secondary")
)

Custom Theme

modal_theme(
  background = "#ffffff",
  header_background = "#f8f9fa",
  footer_background = "#f8f9fa",
  text_color = "#212529",
  accent_color = "#007bff",
  border_radius = 8,
  shadow = "lg"                  # "sm", "md", or "lg"
)

Complete Example

shiny_modal(
  id = "styled_modal",
  header = modal_header(
    title = "Custom Modal",
    icon = icon("palette")
  ),
  body = modal_body(
    h4("Beautiful Design"),
    p("This modal showcases custom theming and animations.")
  ),
  footer = modal_footer(
    actionButton("save", "Save Changes", class = "btn-success"),
    actionButton("cancel", "Cancel", class = "btn-secondary")
  ),
  theme = modal_theme(
    accent_color = "#28a745",
    border_radius = 12
  ),
  animation = "scale",             # "fade", "scale", or "slide"
  backdrop_close = TRUE,           # Close on backdrop click
  esc_close = TRUE,                # Close on ESC key
  backdrop_effect = "blur",        # "fade", "blur", or "none"
  position = "center",             # "center", "left", "right", "top", "bottom"
  size = "l",                      # "xs", "s", "m", "l", "xl", or custom ("800px", "60%")
  overflow = "auto",               # "auto", "scroll", "hidden", "visible"
  draggable = TRUE                 # Enable dragging by header
)

Position & Backdrop Examples

# Modal from left side with blur effect
shiny_modal(
  id = "side_panel",
  header = modal_header("Settings"),
  body = modal_body(p("Side panel content")),
  position = "left",
  backdrop_effect = "blur"
)

# Modal from right with no backdrop
shiny_modal(
  id = "notification",
  header = modal_header("Alert"),
  body = modal_body(p("Non-blocking notification")),
  position = "right",
  backdrop_effect = "none"
)

# Top banner modal with fade
shiny_modal(
  id = "banner",
  body = modal_body(p("Important announcement")),
  position = "top",
  backdrop_effect = "fade"
)

API Functions

  • show_modal(id) - Display a modal
  • hide_modal(id) - Hide a modal
  • toggle_modal(id) - Toggle modal visibility
  • hide_all_modals() - Close all open modals at once

Nested Modals Example

# Create multiple modals
ui <- fluidPage(
  use_shiny_modals(),
  actionButton("open_first", "Open First Modal"),
  
  shiny_modal(
    id = "modal_1",
    header = modal_header("First Modal"),
    body = modal_body(
      p("This is the first modal."),
      actionButton("open_second", "Open Second Modal")
    )
  ),
  
  shiny_modal(
    id = "modal_2",
    header = modal_header("Second Modal"),
    body = modal_body(
      p("This modal is stacked on top!"),
      actionButton("open_third", "Open Third Modal")
    )
  ),
  
  shiny_modal(
    id = "modal_3",
    header = modal_header("Third Modal"),
    body = modal_body(
      p("You can stack as many as needed!"),
      actionButton("close_all", "Close All", class = "btn-danger")
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$open_first, { show_modal("modal_1") })
  observeEvent(input$open_second, { show_modal("modal_2") })
  observeEvent(input$open_third, { show_modal("modal_3") })
  observeEvent(input$close_all, { hide_all_modals() })
}

Notification Examples

Confirmation Dialog

library(shiny)
library(shinyModals)

ui <- fluidPage(
  use_shiny_modals(),
  actionButton("show_confirm", "Delete Item", class = "btn-danger"),
  
  notification_confirm(
    id = "delete_confirm",
    title = "Delete Item?",
    message = "Are you sure you want to delete this item? This action cannot be undone.",
    confirm_text = "Yes, Delete",
    cancel_text = "Cancel",
    glow = TRUE
  )
)

server <- function(input, output, session) {
  observeEvent(input$show_confirm, {
    show_modal("delete_confirm")
  })
  
  observeEvent(input$delete_confirm_confirm, {
    # Handle deletion
    showNotification("Item deleted!", type = "message")
    hide_modal("delete_confirm")
  })
  
  observeEvent(input$delete_confirm_cancel, {
    hide_modal("delete_confirm")
  })
}

shinyApp(ui, server)

Custom Buttons

notification_success(
  id = "custom_notif",
  title = "Success!",
  message = "Your changes have been saved.",
  buttons = list(
    actionButton("save_more", "Save Another", class = "btn-primary"),
    actionButton("view_result", "View Result", class = "btn-info")
  )
)

# In server:
observeEvent(input$save_more, { show_modal("save_modal") })
observeEvent(input$view_result, { navigate_to_results() })

Demo Application

Run the included demo to see all features:

source(system.file("examples", "demo_app.R", package = "shinyModals"))

Documentation

Examples

Check the examples/ directory for complete working examples:

  • demo_app.R - Full-featured demo showing all capabilities (40+ modals)

Feature Examples

Basic Modal

shiny_modal(
  id = "basic",
  header = modal_header("Title"),
  body = modal_body(p("Content"))
)

Themed Modal

shiny_modal(
  id = "themed",
  header = modal_header("Title"),
  body = modal_body("Content"),
  theme = modal_theme_preset("ocean")
)

Success Notification

notification_success(
  id = "success",
  title = "Success!",
  message = "Operation completed.",
  glow = TRUE
)

Confirmation Dialog

notification_confirm(
  id = "confirm",
  title = "Delete?",
  message = "Are you sure?",
  confirm_text = "Yes, Delete",
  cancel_text = "Cancel"
)

API Overview

Core Functions

use_shiny_modals()          # Initialize modals (required once)
shiny_modal()               # Create custom modal
modal_header()              # Modal header component
modal_body()                # Modal body component
modal_footer()              # Modal footer component

# Modal control
show_modal(id)              # Display modal
hide_modal(id)              # Hide modal
toggle_modal(id)            # Toggle modal visibility
hide_all_modals()           # Hide all open modals

Themes

modal_theme_preset("ocean")           # Use preset theme
modal_theme(header_bg, body_bg, ...)  # Create custom theme

Notifications

notification_success(id, title, message, ...)
notification_error(id, title, message, ...)
notification_warning(id, title, message, ...)
notification_info(id, title, message, ...)
notification_confirm(id, title, message, ...)

Themes

Choose from 12 built-in themes:

  1. default - Clean, minimal
  2. dark - Dark and elegant
  3. ocean - Blue, calm
  4. sunset - Orange/red, warm
  5. forest - Green, natural
  6. minimal - Ultra-clean
  7. neon - Bright, modern
  8. corporate - Professional blue
  9. warm - Amber, inviting
  10. cool - Cyan, fresh
  11. rose - Pink, elegant
  12. glass - Transparent, modern

Usage:

theme = modal_theme_preset("ocean")

Browser Support

  • Chrome/Edge (latest)
  • Firefox (latest)
  • Safari (latest)
  • Mobile browsers (iOS Safari, Chrome Mobile)

Performance

  • Lightweight: ~30 KB minified CSS/JS
  • No dependencies: Only requires Shiny
  • Efficient: Minimal DOM manipulation
  • Smooth animations: CSS3-based

Comparison with Shiny's modalDialog()

Feature shinyModals modalDialog
Themes 12 presets None
Draggable ✓ ✗
Size presets ✓ ✗
Position control ✓ Limited
Backdrop effects ✓ Limited
Notifications 5 types ✗
Custom buttons ✓ Limited
Animations ✓ Basic
Composable ✓ ✓

Contributing

Contributions are welcome! Please:

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

Issues & Bug Reports

Found a bug or have a feature request? Open an issue

Please include:

  • Minimal reproducible example
  • Expected vs actual behavior
  • R and Shiny versions
  • Browser and OS

Development

Building the Package

devtools::load_all()        # Load package in development mode
devtools::document()        # Generate documentation
devtools::check()           # Run checks and tests

File Structure

shinyModals/
├── R/                          # R source files
│   ├── modal.R                # Core modal function
│   ├── notifications.R        # Notification functions
│   ├── theme.R               # Theme functions
│   ├── display.R             # Show/hide functions
│   └── ...
├── inst/www/                  # Static assets
│   ├── shiny-modals.js       # JavaScript
│   ├── shiny-modals.css      # Main CSS
│   ├── shiny-modals-themes.css
│   └── shiny-modals-notifications.css
├── examples/
│   └── demo_app.R            # Demo application
├── GUIDE.md                   # Complete guide
├── GUIDE.html                # HTML guide
├── README.md                  # This file
├── NEWS.md                    # Changelog
└── DESCRIPTION               # Package metadata

License

MIT License - see LICENSE file for details

Changelog

[0.4.0] - December 10, 2025

Added

  • Confirmation notification type with two-button design
  • Custom button support for all notifications
  • New notification_confirm() function
  • Simplified color scheme for confirmation (blue instead of purple)
  • Comprehensive guide in Markdown and HTML formats

Changed

  • Improved notification footer rendering logic
  • Enhanced documentation with real-world examples

[0.3.0] - Previous Release

  • Draggable modals
  • Size presets and custom sizing
  • Overflow control
  • 12 preset themes

See NEWS.md for complete version history.

Citation

If you use shinyModals in your research or projects, please cite:

Contributed to shinyModals package
https://github.com/drknowhow/shinyModals
Version 0.4.0

Acknowledgments

Built with ❤️ for the Shiny community

Questions or feedback? Open an issue or reach out!

Happy modal building! 🚀

About

Modern comprehensive modal windows for R shiny apps

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages