streamlit-shadcn-ui

streamlit-shadcn-ui :construction:

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 (date_picker with mode="range")
• 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.

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

Development Guide

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.

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.