Element Plus Components for Shiny • shiny.element

Use Element Plus, the Vue 3 component library, in Shiny — inputs, tables, trees, dialogs, menus, every component it documents — each reporting through input$<id> and updatable from the server, like any other Shiny input.

Element Plus 2.14.7, its icons and Vue 3.5 ship inside the package, so apps work without a network connection.

Lifecycle

shiny.element is experimental: until 1.0.0 an argument or a function may change when a better design turns up, and every such change is listed under “Breaking changes” in NEWS. From the first CRAN release on, nothing is removed without first being deprecated, with a warning, for at least one minor release. Element Plus is followed as upstream changes: what it deprecates is deprecated here too, and what it removes goes with the next upgrade.

Installation

remotes::install_github("kaipingyang/shiny.element")

Quick start

library(shiny)
library(shiny.element)

ui <- el_page(
  el_input("name", label = "Name", placeholder = "Your name"),
  el_rate("score", value = 3),
  el_button("save", "Save", type = "primary"),
  el_alert("hint", title = "Nothing saved yet", type = "info")
)

server <- function(input, output, session) {
  observeEvent(input$save, {
    update_el_alert(session, "hint",
      title = paste0("Saved ", input$name, " (", input$score, "/5)"),
      type = "success"
    )
  })
}

shinyApp(ui, server)

el_page() sets up the Vue root and loads the dependencies. Inside an existing layout — a fluidPage(), or bslib’s page_sidebar() — call use_element() once at the top instead:

ui <- bslib::page_sidebar(
  theme = el_theme(),
  use_element(),
  sidebar = bslib::sidebar(el_select("metric", choices = c("Mean", "Median"))),
  el_table(data = head(iris), id = "summary")
)

el_theme() is the page’s look: a bslib theme carrying Element Plus’s own colours, font and sizes, so Shiny’s actionButton() or textInput() sit beside Element Plus components without clashing. It is el_page()’s default. el_theme(primary = "#7c3aed") changes the brand colour – on Element Plus’s components as well as Bootstrap’s – and el_theme(element =) any of its CSS variables; any bslib::bs_theme() replaces it, and theme = NULL leaves Shiny’s plain Bootstrap.

Components

The components follow Element Plus’s own documentation, group by group:

Basic	`el_button()` `el_button_group()` `el_container()` `el_icon()` `el_row()` `el_col()` `el_link()` `el_text()` `el_scrollbar()` `el_space()` `el_splitter()`
Configuration	`el_config_provider()`
Form	`el_autocomplete()` `el_cascader()` `el_checkbox()` `el_checkbox_group()` `el_color_picker()` `el_color_picker_panel()` `el_date_picker()` `el_date_picker_panel()` `el_form()` `el_input()` `el_input_number()` `el_input_tag()` `el_input_otp()` `el_mention()` `el_radio_group()` `el_rate()` `el_select()` `el_select_v2()` `el_slider()` `el_switch()` `el_time_picker()` `el_time_select()` `el_transfer()` `el_tree_select()` `el_upload()`
Data	`el_avatar()` `el_badge()` `el_calendar()` `el_card()` `el_carousel()` `el_collapse()` `el_descriptions()` `el_empty()` `el_image()` `el_infinite_scroll()` `el_pagination()` `el_progress()` `el_result()` `el_skeleton()` `el_table()` `el_table_v2()` `el_tag()` `el_timeline()` `el_tour()` `el_tree()` `el_tree_v2()` `el_statistic()` `el_segmented()`
Navigation	`el_affix()` `el_anchor()` `el_backtop()` `el_breadcrumb()` `el_dropdown()` `el_menu()` `el_page_header()` `el_steps()` `el_tabs()`
Feedback	`el_alert()` `el_dialog()` `el_drawer()` `el_loading()` `el_message()` `el_message_box()` `el_notification()` `el_popconfirm()` `el_popover()` `el_tooltip()`
Others	`el_divider()` `el_watermark()`

Each has a page, as on element-plus.org: its demos in R and its API tables beside the R names.

Form Table Tree

el_page(dev = TRUE) loads Vue’s development build, which reports template errors in the browser console instead of failing silently. The package’s own test suite runs in this mode and asserts that the console stays clean.

Learn more

Installation & Quick Start
Components – one page per Element Plus component
Element Plus’s guides from R: i18n, Theming, Dark Mode, Custom Defaults, Built-in Transitions, Migration from Element UI
Forms and validation, Shiny integration
Dashboards – whole apps: an admin layout, a sales overview, an orders admin page
Function reference

Licence

MIT. The bundled Element Plus, its icons and Vue are MIT-licensed by their authors; see LICENSE.note.