自訂元件
多數專案用內建 Widget 與社群元件就夠。若你需要官方沒有的 UI（特殊滑桿、地圖控制、自己的 React 元件），Streamlit 提供 Components API：前端用 JavaScript／TypeScript 畫，Python 端用 declare_component 接回來。
下面兩集是官方工程師 Tim Conkling 錄的，目前仍是最接近原廠的逐步教學。需要一些 Python 與一點前端概念，不必先成為前端專家。
Part 1：環境與架構
頻道：Streamlit（官方） 講師：Tim Conkling
這支影片在講什麼
第一集幾乎不做新 UI，而是把「元件怎麼跟 Streamlit 說話」講清楚：
- 從官方 component template 複製專案。
- 建立虛擬環境，分別跑 Python 端與前端開發伺服器。
components.declare_component：開發時指向 localhost 的前端、正式環境指向 build 出來的靜態檔。- 前端呼叫
Streamlit.setComponentValue之後，Python 函式才有回傳值；還沒呼叫時要用default=。 key參數：兩個元件若參數完全相同，Streamlit 無法分辨實體，會出現 duplicate widget id。這跟一般 Widget 的 key 是同一套規則。- 用除錯器一步步看：
st.title送指令到前端 → declare 還不會畫出東西 → 真正 instantiate 元件才出現。這也順便複習「腳本由上往下、互動後整段重跑」的模型。
看完你會知道元件不是魔法，而是一次次前後端訊息。文件對照：Create a Component。
Part 2：做一個離散滑桿
頻道：Streamlit（官方）
這支影片在講什麼
第二集用 Material UI 做一個「離散滑桿」：傳入一串字，使用者用滑桿選其中一個，類似 st.radio / st.selectbox 但互動方式不同。
實務上會碰到：
- 把 template 的
my_component改成有意義的套件名稱 - 前端樣式與第三方 UI 函式庫怎麼接
- 把元件打包，之後用 pip 安裝進其他專案
若你只想使用別人做好的元件，不必看這兩集，到 streamlit.io/components 找現成套件即可。只有要自己做 UI 時，再跟著 Tim 做一遍。