streamlit-shadcn-ui 0.1.12

Using shadcn components in Streamlit

streamlit-shadcn-ui :construction:

streamlit-shadcn-ui is in early development, the updates is shipped frequently. A relative stable will be launched after 11/27 2023. Follow the developer on twitter for updates:

Using shadcn-ui components in streamlit

Installation

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")

Components

Check docs and compoenent examples in

• button
• checkbox
• select
• tabs
• card
• avatar
• date_picker
• date_range_picker
• table
• input
• slider
• textarea
• switch
• radio_group
• alert_dialog
• hover_card
• badges
• link_button

One more thing

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.

POC:

with ui.element("card", key="base_ele") as card:
    with ui.element("card", key="base_ele2") as card2:
        card2.add_child(ui.element("input", key="nst2_input"))
        card2.add_child(ui.element("button", key="nst2_btn", text="Nest Submmit", variant="outline"))
    card.add_child(card2)
    card.add_child(ui.element("button", key="nst_btn", text="Hello World"))

Reference

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

License

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.