Agent skill

building-streamlit-dashboards

Building dashboards in Streamlit. Use when creating KPI displays, metric cards, or data-heavy layouts. Covers borders, cards, responsive layouts, and dashboard composition.

View SKILL.md on GitHub Repository
Stars 145
Forks 10

Install this agent skill to your Project

npx add-skill https://github.com/streamlit/agent-skills/tree/main/developing-with-streamlit/skills/building-streamlit-dashboards

SKILL.md

Streamlit dashboards

Compose metrics, charts, and data into clean dashboard layouts.

Cards with borders

Use border=True to create visual cards. Supported on st.container, st.metric, st.columns, and st.form:

python
# Container card
with st.container(border=True):
    st.subheader("Sales Overview")
    st.line_chart(sales_data)

# Metric card
st.metric("Revenue", "$1.2M", "+12%", border=True)

# Column cards
for col in st.columns(3, border=True):
    with col:
        st.metric("Users", "1.2k")

Card labels

Add context to cards with headers or bold text:

python
# With subheader
with st.container(border=True):
    st.subheader("Monthly Trends")
    st.line_chart(data)

# With bold label
with st.container(border=True):
    st.markdown("**Top Products**")
    st.dataframe(top_products)

KPI rows

Use horizontal containers for responsive metric rows:

python
with st.container(horizontal=True):
    st.metric("Revenue", "$1.2M", "-7%", border=True)
    st.metric("Users", "762k", "+12%", border=True)
    st.metric("Orders", "1.4k", "+5%", border=True)

Horizontal containers wrap on smaller screens. Prefer them over st.columns for metric rows.

Metrics with sparklines

Add trend context with chart_data:

python
weekly_values = [700, 720, 715, 740, 762, 755, 780]

st.metric(
    "Active Users",
    "780k",
    "+3.2%",
    border=True,
    chart_data=weekly_values,
    chart_type="line",  # or "bar"
)

Sparklines show y-values only—use for evenly-spaced data like daily/weekly snapshots.

Dashboard layout

Combine cards into a dashboard:

python
# KPI row
with st.container(horizontal=True):
    st.metric("Revenue", "$1.2M", "-7%", border=True, chart_data=rev_trend, chart_type="line")
    st.metric("Users", "762k", "+12%", border=True, chart_data=user_trend, chart_type="line")
    st.metric("Orders", "1.4k", "+5%", border=True, chart_data=order_trend, chart_type="bar")

# Charts row
col1, col2 = st.columns(2)
with col1:
    with st.container(border=True):
        st.subheader("Revenue by Region")
        st.bar_chart(region_data, x="region", y="revenue")

with col2:
    with st.container(border=True):
        st.subheader("Monthly Trend")
        st.line_chart(monthly_data, x="month", y="value")

# Data table
with st.container(border=True):
    st.subheader("Recent Orders")
    st.dataframe(orders_df, hide_index=True)

Sidebar filters

Put filters in the sidebar to maximize dashboard space:

python
with st.sidebar:
    date_range = st.date_input("Date range", value=(start, end))
    region = st.multiselect("Region", regions, default=regions)
    
# Main area is all dashboard content

Dashboard templates

Ready-to-use dashboard templates are available in templates/apps/:

Template Features
dashboard-metrics Metric cards with sparklines, date filtering, focus mode
dashboard-metrics-snowflake Same as above, with Snowflake connection
dashboard-companies Company comparison, filterable data tables
dashboard-compute @st.fragment for independent updates, popover filters
dashboard-compute-snowflake Same as above, with Snowflake connection
dashboard-feature-usage Feature adoption tracking, trend analysis
dashboard-seattle-weather Weather data visualization
dashboard-stock-peers Stock peer comparison
dashboard-stock-peers-snowflake Same as above, with Snowflake connection

Each template uses synthetic data that can be replaced with real queries. See templates/apps/README.md for setup instructions.

Related skills

  • using-streamlit-layouts: Columns, containers, tabs, dialogs
  • displaying-streamlit-data: Charts, dataframes, column configuration
  • optimizing-streamlit-performance: Caching and fragments for heavy dashboards

References

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

streamlit/agent-skills

template-skill

Replace with description of the skill and when to use it.

145 10
Explore
streamlit/agent-skills

developing-with-streamlit

**[REQUIRED]** Use for ALL Streamlit tasks: creating, editing, debugging, beautifying, styling, theming, optimizing, or deploying Streamlit applications. Also required for building custom components (inline or packaged), using st.components.v2, or any HTML/JS/CSS component work. Triggers: streamlit, st., dashboard, app.py, beautify, style, CSS, color, background, theme, button, widget styling, custom component, st.components, packaged component, pyproject.toml, asset_dir, CCv2, HTML/JS component.

145 10
Explore
streamlit/agent-skills

organizing-streamlit-code

Organizing Streamlit code for maintainability. Use when structuring apps with separate modules and utilities. Covers separation of concerns, keeping UI code clean, and import patterns.

145 10
Explore
streamlit/agent-skills

building-streamlit-chat-ui

Building chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chat_message, st.chat_input, message history, and streaming responses.

145 10
Explore
streamlit/agent-skills

building-streamlit-multipage-apps

Building multi-page Streamlit apps. Use when creating apps with multiple pages, setting up navigation, or managing state across pages.

145 10
Explore
streamlit/agent-skills

displaying-streamlit-data

Displaying charts, dataframes, and metrics in Streamlit. Use when visualizing data, configuring dataframe columns, or adding sparklines to metrics. Covers native charts, Altair, and column configuration.

145 10
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results