A faster way to build and share data apps
Functions for organizing app layout including columns, containers, sidebars, tabs, and expandable sections. These components provide the structural foundation for organizing content and creating sophisticated user interfaces.
Core layout functions for organizing content in columns, rows, and structured arrangements.
def columns(spec, *, gap="small"):
"""
Create column layout for horizontal content arrangement.
Args:
spec (int or list): Number of columns or list of column widths
gap (str): Gap size between columns ("small", "medium", "large")
Returns:
list[DeltaGenerator]: List of column containers
"""
def tabs(tab_list):
"""
Create tab container with multiple named tabs.
Args:
tab_list (list): List of tab names/labels
Returns:
list[DeltaGenerator]: List of tab containers
"""Example usage:
# Create equal-width columns
col1, col2, col3 = st.columns(3)
with col1:
st.write("Column 1")
with col2:
st.write("Column 2")
# Create tabs
tab1, tab2 = st.tabs(["Data", "Chart"])
with tab1:
st.dataframe(data)
with tab2:
st.line_chart(data)Generic container functions for grouping content with optional styling and behavior.
def container(*, height=None, border=None):
"""
Create generic container for grouping content with optional styling.
Args:
height (int, optional): Container height in pixels
border (bool, optional): Whether to show container border
Returns:
DeltaGenerator: Container context manager
"""
def empty():
"""
Create placeholder container that can be filled later.
Returns:
DeltaGenerator: Empty placeholder container
"""Example usage:
# Create bordered container
with st.container(border=True):
st.write("Content inside bordered container")
# Create placeholder for later use
placeholder = st.empty()
# Later fill the placeholder
placeholder.write("Dynamic content")Collapsible containers for organizing content that can be shown or hidden.
def expander(label, *, expanded=False, icon=None):
"""
Create expandable/collapsible container with toggle functionality.
Args:
label (str): Expander header text
expanded (bool): Whether to start in expanded state
icon (str, optional): Icon name or emoji for header
Returns:
DeltaGenerator: Expandable container context manager
"""
def popover(label, *, help=None, disabled=False, use_container_width=False, icon=None):
"""
Create popover container that opens on button click.
Args:
label (str): Popover button text
help (str, optional): Tooltip text for button
disabled (bool): Whether popover button is disabled
use_container_width (bool): Whether button uses full container width
icon (str, optional): Icon name or emoji for button
Returns:
DeltaGenerator: Popover container context manager
"""Example usage:
# Create expander
with st.expander("Show details", expanded=False):
st.write("Detailed information here")
# Create popover
with st.popover("Options"):
st.write("Popover content")
option = st.selectbox("Choose:", ["A", "B", "C"])Dedicated sidebar container for navigation and secondary content.
sidebar: DeltaGeneratorThe sidebar object provides access to the sidebar container where you can place widgets and content that appears in a collapsible side panel.
Example usage:
# Add content to sidebar
st.sidebar.title("Navigation")
st.sidebar.selectbox("Choose page:", ["Home", "About", "Contact"])
# Sidebar can contain any widget or display element
with st.sidebar:
st.write("Sidebar content")
user_input = st.text_input("Enter value:")Containers and widgets for showing status, progress, and temporary states.
def status(label, *, expanded=False, state="running"):
"""
Create status container that shows operation progress with state indicator.
Args:
label (str): Status label/description
expanded (bool): Whether to show details by default
state (str): Status state ("running", "complete", "error")
Returns:
DeltaGenerator: Status container context manager
"""
def progress(value, *, text=None, help=None):
"""
Display progress bar with optional text label.
Args:
value (float): Progress value between 0.0 and 1.0
text (str, optional): Text label for progress bar
help (str, optional): Tooltip text
Returns:
DeltaGenerator: Progress bar element that can be updated
"""
def spinner(text=""):
"""
Display loading spinner with optional text during long operations.
Args:
text (str): Loading message text
Returns:
ContextManager: Spinner context manager for use with 'with' statement
"""Example usage:
# Status container
with st.status("Processing data...", expanded=True):
st.write("Loading dataset")
# ... processing code ...
st.write("Analysis complete")
# Progress bar
progress_bar = st.progress(0, text="Starting...")
for i in range(100):
progress_bar.progress(i + 1, text=f"Processing {i+1}/100")
# Spinner for long operations
with st.spinner("Loading..."):
time.sleep(5) # Long operation
st.success("Done!")Containers for displaying status messages, alerts, and notifications.
def success(body, *, icon=None, help=None):
"""
Display success message with green styling.
Args:
body (str): Success message text
icon (str, optional): Custom icon (default checkmark)
help (str, optional): Tooltip text
"""
def info(body, *, icon=None, help=None):
"""
Display informational message with blue styling.
Args:
body (str): Info message text
icon (str, optional): Custom icon (default info icon)
help (str, optional): Tooltip text
"""
def warning(body, *, icon=None, help=None):
"""
Display warning message with yellow styling.
Args:
body (str): Warning message text
icon (str, optional): Custom icon (default warning icon)
help (str, optional): Tooltip text
"""
def error(body, *, icon=None, help=None):
"""
Display error message with red styling.
Args:
body (str): Error message text
icon (str, optional): Custom icon (default error icon)
help (str, optional): Tooltip text
"""
def exception(exception, *, help=None):
"""
Display formatted exception with traceback information.
Args:
exception (Exception): Exception object to display
help (str, optional): Tooltip text
"""
def toast(body, *, icon=None, duration="short"):
"""
Display temporary toast notification that auto-dismisses.
Args:
body (str): Toast message text
icon (str, optional): Icon name or emoji
duration (str or int, optional): How long to show toast ("short", "long", "infinite", or seconds)
"""Example usage:
# Message containers
st.success("Operation completed successfully!")
st.info("This is informational content")
st.warning("Please review your input")
st.error("An error occurred")
# Exception display
try:
risky_operation()
except Exception as e:
st.exception(e)
# Toast notification
st.toast("File saved!", icon="✅")Functions for adding visual flair and celebratory effects.
def balloons():
"""Display floating balloons animation for celebration."""
def snow():
"""Display falling snow animation for celebration."""Example usage:
# Celebratory animations
if user_completed_task:
st.balloons() # Show balloons
if holiday_theme:
st.snow() # Show snow effectCommon layout patterns and best practices:
# Equal columns
col1, col2, col3 = st.columns(3)
# Custom column widths
col1, col2 = st.columns([3, 1]) # 3:1 ratio
# With gap control
col1, col2 = st.columns(2, gap="large")# Container within container
with st.container(border=True):
col1, col2 = st.columns(2)
with col1:
with st.expander("Details"):
st.write("Nested content")# Sidebar with main content
with st.sidebar:
page = st.selectbox("Navigate:", ["Home", "Data", "Settings"])
# Main content area
if page == "Home":
st.title("Welcome")
elif page == "Data":
st.dataframe(data)# Form with organized layout
with st.form("user_form"):
col1, col2 = st.columns(2)
with col1:
name = st.text_input("Name")
email = st.text_input("Email")
with col2:
age = st.number_input("Age", min_value=0)
country = st.selectbox("Country", countries)
submitted = st.form_submit_button("Submit")# Tabbed interface
tab1, tab2, tab3 = st.tabs(["Overview", "Details", "Settings"])
with tab1:
st.metric("Users", 1234)
st.line_chart(overview_data)
with tab2:
st.dataframe(detailed_data)
with tab3:
settings = st.form("settings_form")Install with Tessl CLI
npx tessl i tessl/pypi-streamlit