Using shadcn-ui components in streamlit

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.

• streamlit-shadcn-ui examples and docs repo
• Streamlit
• shadcn-ui

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.