using-streamlit-custom-components
Using third-party Streamlit custom components. Use when extending Streamlit with community packages. Covers installation, popular custom components,…
它会碰到什么
这一栏是扫描器报的事实,不是结论。命中多不等于有毒(安全工具、规则库、示例脚本本来就会包含危险写法),命中少也不等于干净。它和你手上的凭据、文件、网络有什么关系,需要你自己看。
技能内容
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):
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.
- Repo: https://github.com/blackary/streamlit-keyup
- Docs: https://pypi.org/project/streamlit-keyup/
uv add streamlit-keyup
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.
- Repo: https://github.com/streamlit/streamlit-bokeh
- Docs: https://pypi.org/project/streamlit-bokeh/
uv add streamlit-bokeh
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.
- Repo: https://github.com/PablocFonseca/streamlit-aggrid
- Docs: https://pypi.org/project/streamlit-aggrid/
uv add streamlit-aggrid
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.
- Repo: https://github.com/randyzwitch/streamlit-folium
- Docs: https://folium.streamlit.app/
uv add streamlit-folium
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.
- Repo: https://github.com/Kanaries/pygwalker
- Docs: https://docs.kanaries.net/pygwalker
uv add pygwalker
import pygwalker as pyg
pyg.walk(df, env="Streamlit")
streamlit-extras
A collection of community utilities. Cherry-pick what you need.
- Repo: https://github.com/arnaudmiribel/streamlit-extras
- Docs: https://extras.streamlit.app/
uv add streamlit-extras
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"])
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
想直接用这个技能?
本站把开放许可(MIT / Apache 等)的技能按仓库打包整理到网盘,点一下转存到你自己的网盘,不用一个个从 GitHub 拉。许可未声明的技能只给原始仓库链接,不打包。
它属于哪个仓库
.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components/SKILL.md同一个仓库里的其他技能
- developing-with-streamlit
- building-streamlit-chat-ui
- building-streamlit-custom-components-v2
- building-streamlit-dashboards
- building-streamlit-multipage-apps
- choosing-streamlit-selection-widgets
- connecting-streamlit-to-snowflake
- creating-streamlit-themes
- displaying-streamlit-data
- improving-streamlit-design
- optimizing-streamlit-performance
- organizing-streamlit-code