いい感じのStreamlitのコンポーネント集

はじめに

※随時追加・更新します。

Streamlitは独自のコンポーネント(UIのパーツ)を作ることができます。

GitHub等で公開されているコンポーネントのうち、サクッとpipでインストールして使えそうなものをまとめました。

2024.06追記
標準で対応されたものについて追記、新しいものを追加。(その2も統合)

ネストレイアウト

2024.06追記
標準のコンポーネントで対応済み。st.columnsで2重までのネストができます。
https://docs.streamlit.io/develop/api-reference/layout/st.columns

bash

pip install streamlit-nested-layout

テーブル

• フィルタの自動生成

pandasのDataFrameを読み込んでサイドバーに各列の実際の値をベースとしたフィルタを自動で生成してくれます。

bash

pip install streamlit-pandas

• シンプルかつ多機能なテーブル

bash

pip install streamlit-awesome-table

画像をボタンにする

※デモ

bash

pip install streamlit-image-select

ドラッグアンドドロップできるリスト

bash

pip install streamlit-sortables

タイムライン

bash

pip install streamlit-timeline

ホバーで開くサイドバー

bash

pip install streamlit-on-Hover-tabs

ダイアログ

2024.06追記
標準のコンポーネントで対応済み。(現時点では実験的とのこと)
st.experimental_dialog
https://docs.streamlit.io/develop/api-reference/execution-flow/st.dialog

bash

pip install st-mui-dialog

画像比較(image-comparison)

バーを動かして２枚の画像を比較できるアレ

bash

pip install streamlit-image-comparison

ナビゲーションバー(App Bar)

bash

pip install -U hydralit

bash

pip install streamlit-option-menu

2024.06追加
最近はこちらも人気

bash

pip install streamlit-navigation-bar

カード

bash

pip install streamlit-card 

いいねボタン

bash

pip install streamlit-text-rating

カプセル型のセレクター

※デモ

bash

pip install streamlit-pills

トグルスイッチ

2024.06追記
標準のコンポーネントで対応済み。st.toggle。
https://docs.streamlit.io/develop/api-reference/widgets/st.toggle

bash

pip install streamlit-toggle-switch

レーティング

bash

pip install st-star-rating

ツリーセレクター

bash

pip install st-ant-tree

チャット

2024.06追記
標準のコンポーネントで対応済み。st.chat_inputとst.chat_message
https://docs.streamlit.io/develop/api-reference/chat

bash

pip install streamlit-chat

フロー作成

bash

pip install barfi

2024.06追加　ReactFrowをStreamlitで使えるようにしたもの

bash

pip install streamlit-react-flow

地図

bash

pip install streamlit-folium

縦のスライダー

bash

pip install streamlit-vertical-slider

2024.06追加

カルーセル

bash

pip install streamlit-carousel

アバターアイコン

bash

pip install streamlit-avatar

※以下の記事で作成したものです。

おわりに

Streamlit自体、Reactを利用して作られておりコンポーネントもReactベースで作れるようなので、近いうち何かしら作ってみようと思い