Agent skill

using-streamlit-custom-components

Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components, and when to use them.

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/using-streamlit-custom-components

SKILL.md

Streamlit custom components

Extend Streamlit with third-party custom components from the community.

What are custom components?

Custom components are standalone Python libraries that add features not in Streamlit's core API. They're built by the community and can be installed like any Python package.

Installation

Install using the PyPI package name (not the repo name—they can differ):

bash
uv add <pypi-package-name>

Then import according to the component's documentation. The import name often differs from the package name too.

Use with caution

Components are not maintained by Streamlit. Before adopting:

  • Check maintenance - Is it actively maintained? Recent commits?
  • Check compatibility - Does it work with your Streamlit version?
  • Check popularity - GitHub stars, downloads, community usage
  • Consider alternatives - Can you achieve this with core Streamlit?

Custom components can break when Streamlit updates, so prefer core features when possible.

Popular custom components

streamlit-keyup

Text input that fires on every keystroke instead of waiting for enter/blur. Useful for live search.

bash
uv add streamlit-keyup
python
from st_keyup import st_keyup

query = st_keyup("Search", debounce=300)  # 300ms debounce
filtered = df[df["name"].str.contains(query, case=False)]
st.dataframe(filtered)

streamlit-bokeh

Official replacement for st.bokeh_chart (removed from Streamlit API). Maintained by Streamlit.

bash
uv add streamlit-bokeh
python
from bokeh.plotting import figure
from streamlit_bokeh import streamlit_bokeh

p = figure(title="Simple Line", x_axis_label="x", y_axis_label="y")
p.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=2)
streamlit_bokeh(p)

streamlit-aggrid

Interactive dataframes with sorting, filtering, cell editing, grouping, and pivoting. Use when you need customization beyond what st.dataframe and st.data_editor offer.

bash
uv add streamlit-aggrid
python
from st_aggrid import AgGrid

AgGrid(df, editable=True, filter=True)

When to use aggrid over st.dataframe:

  • Interactive row grouping and pivoting
  • Advanced filtering and sorting UI
  • Complex cell editing workflows
  • Custom cell renderers

streamlit-folium

Interactive maps powered by Folium.

bash
uv add streamlit-folium
python
import folium
from streamlit_folium import st_folium

m = folium.Map(location=[37.7749, -122.4194], zoom_start=12)
st_folium(m, width=700)

pygwalker

Tableau-like drag-and-drop data exploration.

bash
uv add pygwalker
python
import pygwalker as pyg

pyg.walk(df, env="Streamlit")

streamlit-extras

A collection of community utilities. Cherry-pick what you need.

bash
uv add streamlit-extras
python
from streamlit_extras.image_selector import image_selector

# Let users click on regions of an image
selection = image_selector(image, selections=["Region A", "Region B"])
python
from streamlit_extras.vertical_slider import vertical_slider

# A vertical slider widget
value = vertical_slider("Volume", min_value=0, max_value=100, default_value=50)

Discover more

Browse the custom component gallery: https://streamlit.io/components

Filter by category, popularity, and recency to find custom components for your use case.

References

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