Style and customize your Streamlit in Snowflake apps

Add custom CSS and HTML to your apps with Custom UI support

A Streamlit in Snowflake app with custom styles applied. View the app source code.

Custom UI for Streamlit in Snowflake is currently in Public Preview. Learn more in the Streamlit in Snowflake documentation.

You can now add your own styling and UI customization to your Streamlit in Snowflake apps with the recently enabled support for components.html() and st.markdown(unsafe_allow_html=True).

With these features, developers have greatly expanded flexibility to control the look and feel of apps on Snowflake, with the simplified app lifecycle and ease of getting started provided by Streamlit.

• Unlock the ability to apply your organization’s brand consistency to apps
• Take advantage of more Python libraries that generate raw HTML

Let’s walk through a few examples to see what’s possible!

More examples of what’s possible now in Streamlit in Snowflake with Custom UI.

Use Case #1: Add styling and branding to your apps

You can add your own styles via CSS and in-line HTML elements with st.markdown("...", unsafe_allow_html=True).

# Adjust the sidebar background color and top padding
st.markdown(
    """
    <style>
        [data-testid=stSidebar] {
            background-color: #e4f6ff;
        }
        [data-testid=stSidebarUserContent] {
            padding-top: 3.5rem;
        }
    </style>
    """,
    unsafe_allow_html=True,
)

Use Case #2: Use a stylable_container() to isolate changes

The styleable container in streamlit-extras is a very useful utility to apply styling changes to only one section of your app. You can copy the source code from streamlit-extras into your app.

# Add a footer container
with stylable_container(
    key="footer_container",
    css_styles="""
    {
        padding-top: 100px;
        box-sizing: border-box;

        .element-container {
            height: 70px;
            display: flex;
            color: #ffffff;
            text-align: center;
            align-items: center;
            background-color: #0054a3;

            a {
                color: #ffffff;
            }
        }
    }
        """,
):
    st.write("For more information, visit www.snowflake.com")

# Create styled cards with a shadow

card_style = """
    {
        border: 1px groove #52546a;
        border-radius: 10px;
        padding-left: 25px;
        padding-top: 10px;
        padding-bottom: 10px;
        box-shadow: -6px 8px 20px 1px #00000052;
    }
"""

col1, _, col2 = st.columns([3, 1, 1.6])
with col1:
    with stylable_container("Card1", css_styles=card_style):
        "**Card 1**"
        "This is an example of basic card text."

with col2:
    with stylable_container("Card2", css_styles=card_style):
        st.metric("New York", "19.8M", "367K", help="Population growth")

Styled “cards” in Streamlit in Snowflake with stylable_container()

Use Case #3: Grid layout and annotated text with streamlit-extras

streamlit-extras is a popular package that extends the native capabilities of Streamlit with many helpful utilities and elements. While not all of them work in Streamlit in Snowflake, many now do. streamlit-extras is already included in the Snowflake Anaconda channel and can be installed directly from the Streamlit in Snowflake editor in Snowsight up to version 0.2.7.

Two useful extras are a grid layout, and support for annotated text. There are also many others you can try!

Note: grid() shipped in streamlit-extras 0.3.0, but the source code can be easily copied from the streamlit-extras package into your app.

import pandas as pd
import numpy as np

random_df = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])

my_grid = grid(2, [2, 4, 1], 1, 4, vertical_align="bottom")

# Row 1:
my_grid.dataframe(random_df, use_container_width=True)
my_grid.line_chart(random_df, use_container_width=True)
# Row 2:
my_grid.selectbox("Select Country", ["Germany", "Italy", "Japan", "USA"])
my_grid.text_input("Your name")
my_grid.button("Send", use_container_width=True)
# Row 3:
my_grid.text_area("Your message", height=40)
# Row 4:
my_grid.button("Example 1", use_container_width=True)
my_grid.button("Example 2", use_container_width=True)
my_grid.button("Example 3", use_container_width=True)
my_grid.button("Example 4", use_container_width=True)

A simple grid layout example in Streamlit in Snowflake

from streamlit_extras.annotated_text import annotated_text

annotated_text(
    "This ",
    ("is", "verb", "#8ef"),
    " some ",
    ("annotated", "adj", "#faa"),
    ("text", "noun", "#afa"),
    " for those of ",
    ("you", "pronoun", "#fea"),
    " who ",
    ("like", "verb", "#8ef"),
    " this sort of ",
    ("thing", "noun", "#afa"),
)

Annotated text in Streamlit in Snowflake

Use Case #4: Python libraries that generate HTML

Finally, there are existing general Python libraries that generate HTML documents, which can now be integrated and used in Streamlit in Snowflake.

My favorite example is ydata-profiling, which provides instant interactive statistics and Exploratory Data Analysis (EDA) for any dataframe. ydata-profiling is included in the Snowflake Anaconda channel.

import streamlit.components.v1 as components
from sklearn.datasets import load_iris
from ydata_profiling import ProfileReport

@st.cache_data
def generate_report():
    # Load the Iris sample dataset from scikit-learn
    df = load_iris(as_frame=True).data
    # Generate an HTML profile report
    return ProfileReport(df).to_html()

html = generate_report()

# Render the report in Streamlit in Snowflake
components.html(html, height=650, scrolling=True)

Output of the above code, running in Streamlit in Snowflake

Just scratching the surface

This post highlights just a few examples and some helpful utilities to get you started, but the possibilities for customization are nearly endless!

You can quickly get started with running the example app in your own account. For more inspiration, take a look at all the recent Streamlit in Snowflake app examples.

Thank you, and happy coding! :)