Using shadcn-ui components in streamlit
![streamlit-shadcn](https://private-user-images.githubusercontent.com/22167673/285388396-75620347-9e9c-454c-a7ce-381d7464c519.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjUzMzMyNzQsIm5iZiI6MTcyNTMzMjk3NCwicGF0aCI6Ii8yMjE2NzY3My8yODUzODgzOTYtNzU2MjAzNDctOWU5Yy00NTRjLWE3Y2UtMzgxZDc0NjRjNTE5LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA5MDMlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwOTAzVDAzMDkzNFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTg2NzNlYWEyNjA3N2M3ZTkyOTJkYTViNWUzNmJjYjdmY2ZmNGQxOTk0YzQ3YTlhMWYyOWI0NmU0NWYwN2M3YTEmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.nb16p49X8CMapFdHhyqmD61gfUX1yYP2QV_QHzuhfTY)
pip install streamlit-shadcn-ui
example:
import streamlit_shadcn_ui as ui
trigger_btn = ui.button(text="Trigger Button", key="trigger_btn")
ui.alert_dialog(show=trigger_btn, title="Alert Dialog", description="This is an alert dialog", confirm_label="OK", cancel_label="Cancel", key="alert_dialog1")
Check docs and compoenent examples in
- button
- checkbox
- select
- tabs
- card
- avatar
- date_picker
- date_range_picker (date_picker with mode="range")
- table
- input
- slider
- textarea
- switch
- radio_group
- alert_dialog
- hover_card
- badges
- link_button
There is a new component in testing, it will allows you to nest all streamlit-shadcn-ui components together. It will not treat each component as an independent streamlit custom component in iframe, but parse the component structure as data and render them all at once in one iframe.
example (live demo):
with ui.card(key="card1"):
with ui.card(key="card2"):
ui.element("input", key="card2_input")
ui.element("button", key="card2_btn", text="Nest Submmit", variant="outline")
ui.element("button", key="card1_btn", text="Hello World")
There are several scripts in scripts
folder to help you develop this project.
# For local development
./scripts/frontend.sh # frontend dev server
./scripts/dev.sh # streamlit dev server
This repo follows the streamlit custom component structure.
./streamlit_shadcn_ui
is the python package./streamlit_shadcn_ui/components
is the frontend mono repo./streamlit_shadcn_ui/components/packages/frontend
is the custom components collection../streamlit_shadcn_ui/components/packages/streamlit-components-lib
is a patch of streamlit-components-lib for react 18 (For now, only the react/react-dom version is changed).
./streamlit_shadcn_ui/py_components
is the python level API for components.
This repo is under MIT license. See LICENSE for details.
streamlit_shadcn_ui/components/packages/streamlit-components-lib
is under its original Apache-2.0 license. It is a temporal patch for streamlit-components-lib in react 18.