Introducing Component and Layout Galleries for Shiny for Python

Reference documents are great if you know what you’re looking for, but they make it hard to discover new components. For that reason, we’ve created Shiny for Python’s components gallery and layouts gallery.

The goal of these galleries is to provide:

1. An overview of Shiny options for new users, and
2. A cheatsheet-like reference for current users that will accelerate how you build Shiny apps

Shiny Components

The Shiny Components gallery features a list of 33 Shiny Components ready for your apps. Many of them are live examples (buttons, checkboxes, sliders, etc.) to get the feel for how they work. Once you’ve chosen from this list of inputs, outputs, and display components, you’ll arive at a detailed page with:

• A Shinylive preview
• Copy/Paste-able code
• Relevant functions used, their signature, and a link to their reference pages
• Details of how to use the component
• Live example variations (if applicable)

The code highlights reveal the most important lines for creating the component. You can run the example code in Shinylive and edit it—right in the browser, without the need to create or host your own Shiny app. This makes it easy to experiment and see the results!

Here is an example of the Value Box preview and code. Use the tabs to switch between the new Shiny Express syntax and the original Shiny Core syntax.

Express

from shiny.express import ui
from faicons import icon_svg

piggy_bank = icon_svg("piggy-bank")

with ui.layout_columns():
    with ui.value_box(showcase=piggy_bank, theme="bg-gradient-indigo-purple"):
        "KPI Title"
        "$1 Billion Dollars"
        "Up 30% VS PREVIOUS 30 DAYS"

Edit in Shinylive

Core

from shiny import App, ui
from faicons import icon_svg

piggy_bank = icon_svg("piggy-bank")

app_ui = ui.page_fluid(
    ui.layout_columns(
        ui.value_box(
            "KPI Title",
            "$1 Billion Dollars",
            "Up 30% VS PREVIOUS 30 DAYS",
            showcase=piggy_bank,
            theme="bg-gradient-indigo-purple",
        ),
    ),
)

app = App(app_ui, server=None)

Edit in Shinylive

Variations

Some of the more complex components also have a Variations section. Here you will find code templates for commonly used configurations of the component. Like all of the examples in the gallery, these templates can be edited and run right in the browser, thanks to Shinylive. Here is an example of the Value Box Theme and Layout Variation:

Express

import faicons
from shiny.express import ui

with ui.layout_column_wrap():
    with ui.value_box(
        showcase=faicons.icon_svg("piggy-bank"),
        theme="bg-gradient-indigo-purple",  
    ):
        "KPI Title"
        "$1 Billion Dollars"
        "Up 30% VS PREVIOUS 30 DAYS"

    with ui.value_box(
        showcase=faicons.icon_svg("piggy-bank"),
        theme="text-green",  
        showcase_layout="top right",  
    ):
        "KPI Title"
        "$1 Billion Dollars"
        "Up 30% VS PREVIOUS 30 DAYS"

    with ui.value_box(
        showcase=faicons.icon_svg("piggy-bank"),
        theme="purple",  
        showcase_layout="bottom",  
    ):
        "KPI Title"
        "$1 Billion Dollars"
        "Up 30% VS PREVIOUS 30 DAYS"

Edit in Shinylive

Core

import faicons
from shiny import App, ui

app_ui = ui.page_fluid(
    ui.layout_column_wrap(
        ui.value_box(
            "KPI Title",
            "$1 Billion Dollars",
            "Up 30% VS PREVIOUS 30 DAYS",
            showcase=faicons.icon_svg("piggy-bank"),
            theme="bg-gradient-indigo-purple",  
        ),
        ui.value_box(
            "KPI Title",
            "$1 Billion Dollars",
            "Up 30% VS PREVIOUS 30 DAYS",
            showcase=faicons.icon_svg("piggy-bank"),
            theme="text-green",  
            showcase_layout="top right",  
        ),
        ui.value_box(
            "KPI Title",
            "$1 Billion Dollars",
            "Up 30% VS PREVIOUS 30 DAYS",
            showcase=faicons.icon_svg("piggy-bank"),
            theme="purple",  
            showcase_layout="bottom",  
        ),
    )
)
app = App(app_ui, server=None)

Edit in Shinylive

Shiny Layouts

The Shiny Layouts gallery follows the same display pattern as the components gallery to showcase the different ways you can approach your app’s user interface (UI) layout. The main page lists out a variety of layouts (navbars, sidebars, tabs, etc.) to give you a quick overview of different ways to arrange your app. We hope it sparks some inspiration to create a very intuitive experience for your users.

Once you know the overall type of style you like, you get the same set of relevant functions, in-browser preview, example code, and detailed instructions, just like the components gallery.

Express

from shiny.express import ui

ui.page_opts(
    title="App with navbar",  
)

with ui.nav_panel("A"):  
    "Page A content"

with ui.nav_panel("B"):  
    "Page B content"

with ui.nav_panel("C"):  
    "Page C content"

Edit in Shinylive

Core

from shiny import App, ui

app_ui = ui.page_navbar(  
    ui.nav_panel("A", "Page A content"),  
    ui.nav_panel("B", "Page B content"),  
    ui.nav_panel("C", "Page C content"),  
    title="App with navbar",  
    id="page",  
)  


def server(input, output, session):
    pass


app = App(app_ui, server)

Edit in Shinylive

You can see the layout in action directly on the page, or jump into Shinylive to modify the code as needed and see the results without leaving your browser.

Check It Out!

We’ve made these pages for both brand new users and long-time app builders. We hope they are helpful for everyone!

Shiny Components Shiny Layouts