building-streamlit-custom-components-v2

Build bidirectional Streamlit custom components using st.components.v2.component to wire state and triggers across frontend and Python. This skill guides inline HTML/CSS/JS strategies and packaged component workflows for robust stateful interactions.

Inline Streamlit CCv2 components use HTML/CSS/JS strings for rapid iteration on small components, while packaged components use the official template with asset_dir and globs for production readiness and distribution.

Apply theming to custom components in Streamlit by utilizing --st-* CSS tokens within your Vite-based workflow. This skill provides guidance on wiring these theme tokens across frontend and Python for consistent UI styling.

You need the official component-template v2 to package a Streamlit custom component for production distribution. It supports Vite bundling, asset_dir manifests, and frontend/backend wiring, though inline components work for rapid iteration without it.

Streamlit custom component frontend triggers fail to update backend state when bidirectional wiring is incomplete. This skill addresses wiring state and triggers correctly using st.components.v2.component to ensure robust frontend-backend synchronization.

You can bundle Streamlit packaged custom components with Vite using the component-template v2. This workflow supports asset_dir manifests, globs, and best practices for frontend/backend wiring to achieve production readiness.