building-streamlit-custom-components-v2
Building Streamlit custom components v2
Use Streamlit Custom Components v2 (CCv2) when core Streamlit doesn't have the UI you need and you want to ship a reusable, interactive element (from "tiny inline HTML" to "full bundled frontend app").
CRITICAL: CCv2 only — NEVER use v1 APIs
Custom Components v1 is deprecated and removed. Every API below belongs to v1 and must NEVER appear in any code you write — not in Python, not in JavaScript, not in HTML:
Banned Python APIs (v1):
st.components.v1— the entire v1 modulecomponents.declare_component()— v1 registrationcomponents.html()— v1 raw HTML embed
Banned JavaScript patterns (v1):
Streamlit.setComponentValue(...)— v1 global; usesetStateValue()/setTriggerValue()insteadStreamlit.setFrameHeight(...)— v1 global; CCv2 handles sizing automaticallyStreamlit.setComponentReady()— v1 global; CCv2 has no ready signalwindow.Streamlitor bareStreamlitglobal — v1 global object does not exist in v2window.parent.postMessage(...)— v1 iframe communication; CCv2 does not use iframes
More from streamlit/agent-skills
developing-with-streamlit
**[REQUIRED]** Use for ALL Streamlit tasks: creating, editing, debugging, beautifying, styling, theming, optimizing, or deploying Streamlit applications. Also required for building custom components (inline or packaged), using st.components.v2, or any HTML/JS/CSS component work. Triggers: streamlit, st., dashboard, app.py, beautify, style, CSS, color, background, theme, button, widget styling, custom component, st.components, packaged component, pyproject.toml, asset_dir, CCv2, HTML/JS component.
1.2Ktemplate-skill
Replace with description of the skill and when to use it.
107building-streamlit-chat-ui
Building chat interfaces in Streamlit. Use when creating conversational UIs, chatbots, or AI assistants. Covers st.chat_message, st.chat_input, message history, and streaming responses.
5using-streamlit-session-state
Using st.session_state to manage state across Streamlit reruns. Use when persisting data, handling widget state, implementing callbacks, or debugging state issues. Covers initialization patterns, widget-state association, and common gotchas.
3creating-streamlit-themes
Creating and customizing Streamlit themes. Use when changing app colors, fonts, or appearance, or aligning apps to brand guidelines. Covers config.toml configuration, design principles, and CSS avoidance.
3organizing-streamlit-code
Organizing Streamlit code for maintainability. Use when structuring apps with separate modules and utilities. Covers separation of concerns, keeping UI code clean, and import patterns.
3