Extra Streamlit Components

0.1.81 · active · verified Mon Apr 13

Extra Streamlit Components is a Python library that provides a collection of complex or natively unavailable components to enhance Streamlit applications. It aims to offer advanced UI elements such as a Router for multi-page apps, a Cookie Manager for browser interaction, and a TabBar. The library is currently at version 0.1.81 and receives updates periodically.

Warnings

gotcha The `Router` component should always be initialized using `@st.cache_resource` to prevent re-initialization issues during app reruns, which can lead to unexpected routing behavior.
Fix: Decorate your `init_router` function with `@st.cache_resource(hash_funcs={"_thread.RLock": lambda _: None})`.
gotcha The `CookieManager` component may experience issues when deployed on platforms like Streamlit Community Cloud or Cloud Run, often related to asynchronous behavior or component loading timeouts. This can result in cookies not being set or retrieved correctly.
Fix: Check for updated versions of `extra-streamlit-components` and Streamlit. Some users have reported manual deployment (not via CI/CD) or specific Streamlit versions (e.g., 1.32.0 improved custom component handling) mitigating issues. Debugging browser console logs may provide further insight. (See GitHub Issues #6, #67, Streamlit forum discussions)
gotcha The internal `_remove_extra_spacing()` method, often used by components like `CookieManager`, can apply aggressive CSS that hides or interferes with other Streamlit components on the page. This is due to broad CSS selectors.
Fix: If encountering this, consider pinning to a version prior to 0.1.71 if feasible for your project, or explore custom CSS overrides in your Streamlit app to counteract the conflicting styles.
gotcha The `CookieManager` operates on browser cookies. In shared domains like `share.streamlit.io`, other web developers may have access to cookies you set. This is a browser security model consideration, not a bug in the component, but developers must be aware of it for sensitive data.
Fix: Avoid storing sensitive user data directly in browser cookies when deploying on shared domains. Use server-side sessions or more secure authentication mechanisms for critical information.

Install

pip install extra-streamlit-components Install with pip

Imports

stx

import extra_streamlit_components as stx

Router
```
stx.Router(...)
```
CookieManager
```
stx.CookieManager()
```
TabBarItemData
```
stx.TabBarItemData(...)
```

Quickstart

This quickstart demonstrates the usage of the `TabBar` component to create a multi-tab interface in a Streamlit application. It defines three tabs and displays content based on the user's selection.

import streamlit as st
import extra_streamlit_components as stx

st.set_page_config(layout="centered", page_title="Extra Streamlit Components Demo")
st.title("Extra Streamlit Components Demo")

# Example using TabBar component
chosen_id = stx.tab_bar(
    data=[
        stx.TabBarItemData(id="tab1", title="Tab One", description="First tab content"),
        stx.TabBarItemData(id="tab2", title="Tab Two", description="Second tab content"),
        stx.TabBarItemData(id="tab3", title="Tab Three", description="Third tab content"),
    ],
    default="tab1",
    key="tab_bar_example"
)

if chosen_id == "tab1":
    st.write("You are on Tab One!")
elif chosen_id == "tab2":
    st.write("You are on Tab Two!")
elif chosen_id == "tab3":
    st.write("You are on Tab Three!")

view raw JSON →