Composants personnalisés Streamlit

Étendez Streamlit avec des composants personnalisés tiers provenant de la communauté.

Qu'est-ce que les composants personnalisés ?

Les composants personnalisés sont des bibliothèques Python autonomes qui ajoutent des fonctionnalités non présentes dans l'API principale de Streamlit. Ils sont développés par la communauté et peuvent être installés comme n'importe quel package Python.

Installation

Installez en utilisant le nom du package PyPI (pas le nom du repo—ils peuvent différer) :

uv add <pypi-package-name>

Ensuite, importez selon la documentation du composant. Le nom d'import diffère souvent du nom du package aussi.

À utiliser avec prudence

Les composants ne sont pas maintenus par Streamlit. Avant de les adopter :

Vérifiez la maintenance - Est-il activement maintenu ? Y a-t-il des commits récents ?
Vérifiez la compatibilité - Fonctionne-t-il avec votre version de Streamlit ?
Vérifiez la popularité - Étoiles GitHub, téléchargements, utilisation communautaire
Envisagez des alternatives - Pouvez-vous le faire avec Streamlit core ?

Les composants personnalisés peuvent se briser lors des mises à jour de Streamlit, préférez donc les fonctionnalités core quand c'est possible.

Composants personnalisés populaires

streamlit-keyup

Entrée de texte qui se déclenche à chaque frappe au lieu d'attendre la touche entrée/perte de focus. Utile pour la recherche en direct.

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

Remplacement officiel pour st.bokeh_chart (supprimé de l'API Streamlit). Maintenu par 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

Dataframes interactifs avec tri, filtrage, édition de cellules, regroupement et pivot. À utiliser quand vous avez besoin de personnalisation au-delà de ce que st.dataframe et st.data_editor offrent.

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)

Quand utiliser aggrid au lieu de st.dataframe :

Regroupement et pivot interactifs de lignes
Interface de filtrage et tri avancée
Flux de travail d'édition de cellules complexes
Rendus de cellules personnalisés

streamlit-folium

Cartes interactives alimentées par 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

Exploration de données de type Tableau avec glisser-déposer.

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

Une collection d'utilitaires communautaires. Choisissez ce dont vous avez besoin.

Repo : https://github.com/arnaudmiribel/streamlit-extras
Docs : https://extras.streamlit.app/

uv add streamlit-extras

from streamlit_extras.image_selector import image_selector

# Laissez les utilisateurs cliquer sur les régions d'une image
selection = image_selector(image, selections=["Region A", "Region B"])

from streamlit_extras.vertical_slider import vertical_slider

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

Découvrez d'autres composants

Parcourez la galerie de composants personnalisés : https://streamlit.io/components

Filtrez par catégorie, popularité et récence pour trouver les composants personnalisés adaptés à votre cas d'usage.

using-streamlit-custom-components