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


# はじめに
※随時追加・更新します。

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

https://docs.streamlit.io/library/components/create



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

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


## ネストレイアウト

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

https://github.com/joy13975/streamlit-nested-layout

![demo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/40281735-9570-5227-1e0a-48957d12a828.png)

``` bash:bash
pip install streamlit-nested-layout
```

## テーブル

- フィルタの自動生成

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

https://github.com/wjbmattingly/streamlit-pandas


``` bash:bash
pip install streamlit-pandas
```

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

https://github.com/caiodearaujo/streamlit-awesome-table

![awesome-table-with-image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/cd431216-93f7-c368-b2d9-41fd8e5a0e2c.png)

```bash:bash
pip install streamlit-awesome-table
```

## 画像をボタンにする

https://github.com/jrieke/streamlit-image-select

※デモ

https://image-select.streamlit.app/

```bash:bash
pip install streamlit-image-select
```

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

https://github.com/ohtaman/streamlit-sortables

```bash:bash
pip install streamlit-sortables
```

## タイムライン

https://github.com/innerdoc/streamlit-timeline

```bash:bash
pip install streamlit-timeline
```

## ホバーで開くサイドバー

https://github.com/Socvest/streamlit-on-Hover-tabs

![demonstration-on-hover.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/5a029374-7cfe-96db-5693-f1f4dda3878c.gif)

```bash:bash
pip install streamlit-on-Hover-tabs
```

## ダイアログ

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

https://pypi.org/project/st-mui-dialog/

```bash:bash
pip install st-mui-dialog
```

## 画像比較(image-comparison)
バーを動かして２枚の画像を比較できるアレ

https://github.com/fcakyon/streamlit-image-comparison

![143328163-2976a3b6-91d0-47c5-b872-c92dd6ea404e.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/1f3945f2-0166-eb33-72c0-c0a385c5bc28.gif)

```bash:bash
pip install streamlit-image-comparison
```

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

https://github.com/TangleSpace/hydralit

```bash:bash
pip install -U hydralit
```

https://github.com/victoryhb/streamlit-option-menu


```bash:bash
pip install streamlit-option-menu
```


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

https://github.com/gabrieltempass/streamlit-navigation-bar

```bash:bash
pip install streamlit-navigation-bar
```

![IMG_0317.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/0b63a443-2947-80e5-6fbf-263e0b868e3e.gif)

## カード

https://github.com/gamcoh/st-card

```bash:bash
pip install streamlit-card 
```

## いいねボタン

https://github.com/TVS-Motor-Company/streamlit-text-rating

```bash:bash
pip install streamlit-text-rating
```

## カプセル型のセレクター

https://github.com/jrieke/streamlit-pills

![demo (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/6217dbe4-fdd8-e903-edeb-b7395463900f.png)


※デモ

https://pills-component.streamlit.app/

```bash:bash
pip install streamlit-pills
```

## トグルスイッチ

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

https://github.com/sqlinsights/streamlit-toggle-switch

![sample.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/ab3e165c-ee83-4aeb-3f31-edc880fb8ca0.gif)

```bash:bash
pip install streamlit-toggle-switch
```

## レーティング

https://github.com/flucas96/streamlit_star_rating

```bash:bash
pip install st-star-rating
```

![6B2F5F17-A060-4EB2-9763-5D9188B8E818.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/cd22b242-d080-18c9-fd31-1725ac1451e1.jpeg)


## ツリーセレクター


https://github.com/flucas96/st_ant_tree


```bash:bash
pip install st-ant-tree
```

![8C7BBF37-6F9D-4264-B88D-03CAE7E9B123.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/bfa0e9e1-03b6-ac11-c68c-03663d58ad77.jpeg)


## チャット

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

https://github.com/AI-Yash/st-chat


```bash:bash
pip install streamlit-chat
```

![FFDE8878-D6AE-4DB3-A111-A1A6421978F9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/79e7f3a3-7061-d43b-a12b-ed7a2d21de7f.png)

## フロー作成

https://github.com/krish-adi/barfi


```bash:bash
pip install barfi
```
![9670AAE7-A31E-426A-9C5C-1FB88B74D63A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/bc70e290-8c16-e596-3014-d9f073bc060f.jpeg)


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

https://github.com/rajagurunath/streamlit-react-flow

```bash:bash
pip install streamlit-react-flow
```

## 地図


https://github.com/randyzwitch/streamlit-folium


```bash:bash
pip install streamlit-folium
```
![83E17532-079B-417D-A90C-E6819BA8BC1A.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/0ca8385c-e129-9f3e-68cc-e2c8f4f31bb1.jpeg)


## 縦のスライダー

https://github.com/sqlinsights/streamlit-vertical-slider


```bash:bash
pip install streamlit-vertical-slider
```

![E1250108-3E4D-46BC-89C5-005A73B43E42.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/8ae954fd-96da-fbc6-c122-a3aa5879e712.jpeg)


> 2024.06追加

## カルーセル

https://github.com/thomasbs17/streamlit-contributions/tree/master/bootstrap_carousel

```bash:bash
pip install streamlit-carousel
```


## アバターアイコン

https://github.com/ppspps824/streamlit_avatar

```bash:bash
pip install streamlit-avatar
```

![IMG_0318.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/649608/ec0e7f4b-245e-8d29-f934-0e939e9fbbbd.png)

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

https://qiita.com/papasim824/items/ea4cb1b49ba4d71b0aca

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