UI components

For most of the UI components, you can view them in the online Shiny demo{blk}. Most but not all UI components work in a Rmarkdown document. Here we demostrate how you could use some of them in a Rmarkdown doc. The source code of this document is on Github{blk}.

load package

To start to use spsComps, load it in your Shiny app file or Rmarkdown file

## Loading required package: shiny

So you can see it depends on shiny and spsUtil. When you load it, there is no need to additionally load shiny or spsUtil.


A go top button.


It will not be display inline of the Rmd, just simply call it and maybe change the style as you want. By default, a “go to top” button will be created on the bottom-right corner. Now scroll this page, and you should see it (the rocket button).

texts <- c("p1", "p2", "", "p4", "p5")
hrefs <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
images <- c("https://github.com/lz100/spsComps/blob/master/img/1.jpg?raw=true",
  texts = texts, hrefs = hrefs, images = images,
  enlarge = TRUE,
  enlarge_method = "modal"

You can show a gallery of plots you make in the Rmd and when people click it, it will be enlarged. You can also specify a link for each image.


    "logo", "Logo",
    hex_img = "https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg",
    hex_link = "https://www.google.com",
    footer = "Footer",
    footer_link = "https://www.google.com"

a panel of logos with hexPanel

    "demo1", "" ,
    rep("https://live.staticflickr.com/7875/46106952034_954b8775fa_b.jpg", 2)


Some colorful buttons hrefTab

    title = "Different background and text colors",
    label_texts = c("Go top", "Disabled", "Email me"),
    hrefs = c("#", "", "mailto:xxx@abc.com"),
    bg_colors = c("green", "#eee", "orange"),
    text_colors = c("#caffc1", "black", "blue")

Different background and text colors

A table colorful buttons hrefTable

    title = "Change button color and text color",
    item_titles = c("workflow 1", "No links"),
    item_labels = list(c("tab 1"), c("tab 3", "tab 4")),
    item_hrefs = list(c("https://www.google.com/"), c("", "")),
    item_bg_colors =  list(c("blue"), c("red", "orange")),
    item_text_colors =  list(c("black"), c("yellow", "green")),
    style = "display: table;"
Change button color and text color
workflow 1tab 1
No linkstab 3 tab 4
    title = "Change row name colors and width",
    item_titles = c("Green", "Red", "Orange"),
    item_labels = list(c("tab 1"), c("tab 3", "tab 4"), c("tab 5", "tab 6", "tab 7")),
    item_hrefs = list(
        c("", ""),
        c("https://www.google.com/", "https://www.google.com/", "")
    item_title_colors = c("green", "red", "orange"),
    style = "display: table;"
Change row name colors and width
Greentab 1
Redtab 3 tab 4
Orangetab 5 tab 6 tab 7

The table caption is on top in Shiny but on bottom in Rmd. You may also want to add the style = "display: table;" in Rmd to make the table occupy full length of the document in R markdown.



Add animations to existing components with animateUI

To buttons

tags$button(id = "btn1", "random button")

animateUI("btn1", animation = "ring")

To some text

p(id = "mytext", class = "text-red", "some move text")

some move text

animateUI("mytext", animation = "horizontal", speed = "fast")

On hover, move mouse on the red thumb

  id = "btn2",
  icon(id = "myicon", "thumbs-o-up"),
  style = "color: red; boarder: initial; border-color: transparent;"
animateUI("btn2", animation = "bounce", speed = "fast", hover = TRUE)

Inline animation

You can add animations to inline Rmarkdown text by giving it a HTML tag and id, like following:

some text some text <span id="some-text" style="display: inline-block">some text</span> some text some text

some text some text some text some text some text

animateUI(selector = "some-text", animation = "ring")

Most animations required the target tag to have CSS display “block” or “inline-block”, you can append this by adding style="display: inline-block" to the tag as shown above or check examples below.


Add animations with pipe %>% by animateAppend

icon("home") %>%

tags$p("Append animation", class = "text-primary", style="display: inline-block") %>%

Append animation


Apply multiple animations to the same component

tags$b("Nested animations", class = "text-primary") %>%
  animateAppendNested("ring") %>%
  animateAppendNested("pulse") %>%
Nested animations
tags$b("Nested animations display changed", class = "text-primary") %>%
  animateAppendNested("ring") %>%
  animateAppendNested("pulse", display = "block", style = "width: 30%")
Nested animations display changed


Here is a convenient function that allows you to create font-awesome icons with animations and customize, color, size, etc, an enhanced version of original shiny::icon and can also be used in Rmarkdown.


Default is the same as original icon


Animation and color

animateIcon(name = "home", animation = "horizontal", speed = "slow", color ="red")

Add to a button

tags$button(animateIcon("spinner", "spin", "fast"), "A button")

on hover

animateIcon(name = "wrench", animation = "wrench", hover = TRUE, color ="green")

Change size

animateIcon("home", size = "xs")

animateIcon("home", size = "sm")

animateIcon("home", size = "lg")

animateIcon("home", size = "2x")

animateIcon("home", size = "3x")

animateIcon("home", size = "5x")

animateIcon("home", size = "7x")

animateIcon("home", size = "10x")


Add loaders to indicate busy status. Most cases, loaders are added by a backend server to show the busy processing status and are removed when the process is done. Rmarkdown documents does not have a server, but you can still add some loaders.


Default loaders

There are 12 different default loaders: “circle,” “dual-ring,” “facebook,” “heart,” “ring,” “roller,” “default,” “ellipsis,” “grid,” “hourglass,” “ripple,” “spinner.”

cssLoader(height = "100px")

customize it:

cssLoader(type = "grid", height = "150px", color = "orange")

Add to a button:

  ## `inline = TRUE` is important if you want loader and
  ## text in the same line.
  cssLoader(is_icon = TRUE, inline = TRUE, color = "#3a7bd5"),
  "A button"

Your own loaders

You can choose a gif to be a your loader

cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/spinner.gif?raw=true", height = "100px")
cssLoader(type = "gif", src = "https://github.com/lz100/spsComps/blob/master/examples/demo/www/bean_eater.gif?raw=true", height = "150px")

bsTooltip and bsTip

Add tooltips to the documents with bsTooltip

actionButton("", "Tooltip on the left") %>%
 bsTooltip("Tooltip on the left", "left")
actionButton("", "Tooltip on the top") %>%
 bsTooltip("Tooltip on the top", "top")
actionButton("", "Tooltip on the right") %>%
 bsTooltip("Tooltip on the right", "right")
actionButton("", "Tooltip on the bottom") %>%
 bsTooltip("Tooltip on the bottom", "bottom")

or use the higher leveler convenient function bsTip

actionButton("", "primary") %>%
  bsTip("primary", status = "primary")
actionButton("", "info") %>%
  bsTip("info", status = "info")
actionButton("", "success") %>%
  bsTip("success", status = "success")
actionButton("", "warning") %>%
  bsTip("warning", status = "warning")
actionButton("", "danger") %>%
  bsTip("danger", status = "danger")

Titles with spsTitle

You can use {spsComps} to add colorful titles in Rmarkdown

spsTitle("primary", status = "primary")


spsTitle("info", status = "info")


spsTitle("success", status = "success")


spsTitle("warning", status = "warning")


spsTitle("danger", status = "danger")


Or you own colors

spsTitle("purple", other_color = "purple")


spsTitle("pink", other_color = "pink")


Add horizontal divider lines with spsHr






Other components

Other components are either performed the best in a Shiny app or requires a server. Please see the demo