Streamlit Shadcn UI 1.1.0
Streamlit Shadcn UI 1.1.0 introduces ui.elements, a V2-only composition API
for building a typed nested shadcn React tree from Python. Existing 1.0 APIs
remain available without signature changes.
Highlights
- One
ui.elementsblock produces one Components V2 mount, one Shadow DOM,
and one React root. stack,grid, and typed Card slots provide structural composition.- Content nodes cover headings, text, code, badges, separators, progress,
images, and link buttons. - Stateful nodes cover input, textarea, checkbox, switch, slider,
radio-group, and select values. - Buttons emit transient actions without persisting or replaying stale clicks.
- Explicit keys preserve node identity across insertion, removal, and
reordering. - Changed Python defaults reset only the affected node.
- Value changes and actions are dispatched to typed callbacks in sequence.
Example
import streamlit as st
import streamlit_shadcn_ui as ui
with ui.elements(key="account-settings") as el:
with el.card(key="profile"):
with el.card_header():
el.heading("Profile")
el.text("Manage your account details.", variant="muted")
with el.card_content():
email = el.input(
"Email",
value="ada@example.com",
key="email",
)
with el.card_footer():
save = el.button("Save", key="save", stretch=True)
st.write(email.value, save.clicked)Compatibility and boundaries
- Python 3.10 or newer and Streamlit 1.60 or newer are required.
- Native Streamlit elements and third-party components cannot be inserted as
React descendants of an Elements tree. - Stateful and action nodes require explicit keys. The root key is required.
- Action nodes fail closed inside
st.form; state-only trees retain normal
deferred form submission behavior. - The serialized tree is strictly allowlisted and capped at 1,000 nodes,
depth 32, and a 2 MiB protocol envelope. - Arbitrary JSX, HTML, CSS classes, and custom React components are not part
of the 1.1.0 contract.
Acceptance case
Run the documentation app:
streamlit run Home.py \
--server.address=127.0.0.1 \
--browser.serverAddress=127.0.0.1Then open http://127.0.0.1:8501/Elements or choose
Use Cases > V2 Elements in the sidebar. The existing product homepage
remains the default route.
The acceptance case contains two shadcn homepage cards in one React root and
exercises responsive layout, dynamic keyed children, aggregate values,
ordered callbacks, transient actions, and rerun reconciliation.
Release verification
- 77 Python contract and application tests passed.
- 69 frontend unit tests and the production frontend build passed with the
locked Node 22.20.0 and pnpm 11.18.0 toolchain. - The Elements acceptance suite passed all 9 Chromium, Firefox, and WebKit
scenarios. - Fresh wheel and sdist installs each rendered all 35 V2 component kinds,
including one nested Elements tree, with no iframe or browser diagnostic. - The wheel installed and imported
ui.elementson Python 3.10, 3.11, 3.12,
3.13, and 3.14 with Streamlit 1.61.1. - The fail-closed archive verifier and
twine checkpassed for both artifacts.
Release candidate SHA-256 checksums:
8df084b899cbb433565f9bb4a4b7611e0a8bab4e4fa4786a9520829a7e2884f7 streamlit_shadcn_ui-1.1.0-py3-none-any.whl
dab11e8c36eb238e1977c5a667bf122b0233c6f978db14b873740295eae6d88f streamlit_shadcn_ui-1.1.0.tar.gz
Upgrade
No migration is required for existing 1.0 applications. Import the package
root and opt into the new composition API only where a true nested React tree
is useful:
import streamlit_shadcn_ui as ui