{"id":5619,"library":"extra-streamlit-components","title":"Extra Streamlit Components","description":"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.","status":"active","version":"0.1.81","language":"en","source_language":"en","source_url":"https://github.com/Mohamed-512/Extra-Streamlit-Components","tags":["streamlit","components","ui","frontend"],"install":[{"cmd":"pip install extra-streamlit-components","lang":"bash","label":"Install with pip"}],"dependencies":[{"reason":"Core dependency as it's a Streamlit component library.","package":"streamlit"}],"imports":[{"symbol":"stx","correct":"import extra_streamlit_components as stx"},{"symbol":"Router","correct":"stx.Router(...)"},{"symbol":"CookieManager","correct":"stx.CookieManager()"},{"symbol":"TabBarItemData","correct":"stx.TabBarItemData(...)"}],"quickstart":{"code":"import streamlit as st\nimport extra_streamlit_components as stx\n\nst.set_page_config(layout=\"centered\", page_title=\"Extra Streamlit Components Demo\")\nst.title(\"Extra Streamlit Components Demo\")\n\n# Example using TabBar component\nchosen_id = stx.tab_bar(\n    data=[\n        stx.TabBarItemData(id=\"tab1\", title=\"Tab One\", description=\"First tab content\"),\n        stx.TabBarItemData(id=\"tab2\", title=\"Tab Two\", description=\"Second tab content\"),\n        stx.TabBarItemData(id=\"tab3\", title=\"Tab Three\", description=\"Third tab content\"),\n    ],\n    default=\"tab1\",\n    key=\"tab_bar_example\"\n)\n\nif chosen_id == \"tab1\":\n    st.write(\"You are on Tab One!\")\nelif chosen_id == \"tab2\":\n    st.write(\"You are on Tab Two!\")\nelif chosen_id == \"tab3\":\n    st.write(\"You are on Tab Three!\")","lang":"python","description":"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."},"warnings":[{"fix":"Decorate your `init_router` function with `@st.cache_resource(hash_funcs={\"_thread.RLock\": lambda _: None})`.","message":"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.","severity":"gotcha","affected_versions":"All versions"},{"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)","message":"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.","severity":"gotcha","affected_versions":"All versions, especially 0.1.71 and above (due to CSS issues)."},{"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.","message":"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.","severity":"gotcha","affected_versions":"Versions 0.1.71 and above."},{"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.","message":"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.","severity":"gotcha","affected_versions":"All versions."}],"env_vars":null,"last_verified":"2026-04-13T00:00:00.000Z","next_check":"2026-07-12T00:00:00.000Z"}