# Using Streamlit Custom Components

Using third-party Streamlit custom components.

- Repository: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop (521 stars)
- Category: Engineering
- License: Apache-2.0
- Last updated: 2026-06-03
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -g -a claude-code -y`
Codex: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -g -a codex -y`
Cursor: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -g -a cursor -y`
Gemini CLI: `npx skills add iusztinpaul/designing-real-world-ai-agents-workshop --skill using-streamlit-custom-components -g -a gemini-cli -y`

## Description

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

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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.

- **Repo:** https://github.com/blackary/streamlit-keyup
- **Docs:** https://pypi.org/project/streamlit-keyup/

```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.

- **Repo:** https://github.com/streamlit/streamlit-bokeh
- **Docs:** https://pypi.org/project/streamlit-bokeh/

```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)
```

The rest: https://github.com/iusztinpaul/designing-real-world-ai-agents-workshop/blob/HEAD/.agents/skills/developing-with-streamlit/skills/using-streamlit-custom-components/SKILL.md