Top 5 Shiny UI Add-On Packages | R-bloggers

There are a growing number of Shiny users across the world, and with many users comes an increasing number of open-source “add-on” packages that extend the functionality of Shiny, both in terms of the front end and the back end of an app.

This blog will highlight 5 UI add-on packages that can massively improve your user experience and also just add a bit of flair to your app. Each package will have an associated example app (some more inspired than others) that I’ve created where you can actually see the UI component in action. All code for example apps can be found on our GitHub.

Do you require help building a Shiny app? Would you like someone to take over the maintenance burden? If so, check out our Shiny and Dash services.

If you have graphs or other outputs in your app that are slow to render and re-render, it can be frustrating for the user if it looks like nothing is changing after they’ve changed an input or pressed a button to re-render. Adding a spinner to indicate the plot is re-rendering makes it clear to the user what is going on and can make that waiting time a bit more bearable!

While the {shinycssloaders} package does not speed up your plot rendering (although if you do need help with speeding up a Shiny app, we can help), it does let you very easily add loading spinners to any specific output in your Shiny app.

All you need to do is wrap your Shiny output in the function! You can also modify the spinner with the , , and arguments.

In my example app:

{shinycssloaders} is very useful if you have one or more slow outputs that need to be rendered or re-rendered, but what if just loading up your app at start up is slow? For example, if you’re pulling new data from an API or a database every time you load the app. This is where the {waiter} package comes in handy!

{waiter} allows you to create a loading screen that covers the entire app until some specific bit of code has finished running. You just need to tell it when to show () and when to hide () the waiter loading screen. Note that you’ll need to activate the waiter functionality by including the command in your UI.

In my example app:

If your app needs to generate any kind of text that would then need to be used elsewhere, e.g. a URL or a uniquely identifying string, then a “Copy to clipboard” button can easily be added with the {rclipboard} package. The main function from {rclipboard} is which creates a clickable button that lets you copy whatever is passed to the argument. There are no associated or functions, so you can create your clipboard button and then render it with and display it with . You will also need to activate the copy to clipboard functionality by including the command in your UI.

A basic button could be created like this:

However, when you press this button there is no feedback to the user that anything has actually been copied. This is where the {tippy} package comes in. {tippy} allows you to add tooltips to UI elements in your app that appear at a certain trigger such as hover or click. Tooltips are an effective way to provide help or feedback to the user and improve their experience using the app.

All you need to do is call the function on the input ID of your UI component. If we have a clipboard button with ID as above, we could add a tooltip that says “String copied!” whenever the button is clicked.

In my example app:

{shinyglide} lets you create a carousel-like window that allows the user to move between different screens in a chronological order using “Next” and “Back” buttons. It’s a nice way to add a pop-up to guide your user through some action, either for collecting inputs for your app, or demoing how to use the app, or just as an embedded presentation.

There is a lot of flexibility when using {shinyglide}, but a basic series of screens could be constructed like this:

A nice feature is that you can easily add a condition that needs to be met until the user can move on to the next page, e.g., the user needs to provide some input. This is done with the argument in the function.

In my example app:

Last but not least is {sortable}, which is a package that enables drag-and-drop behaviour in your Shiny apps. This means that the user can perform actions such as rearranging plots in a grid, or include/exclude elements by dragging them in and out of a specific panel.

The basic syntax of {sortable} is:

where is the ID of the div containing the elements you wish to be drag-and-drop-able.

In my example app:

If you want to explore even more packages that extend the Shiny framework, I would highly recommend checking out this curated list of Shiny extension packages:

For updates and revisions to this article, see the original post