Custom components v2
Components v2 represents a reimagining of how custom components work in Streamlit. It's designed to unlock new capabilities and dramatically simplify the development experience. To view the command reference, see the API Reference.
Getting started
Quickstart examples
Get started quickly with practical examples showing interactive buttons, data exchange, and complete component implementations.
Component registration
Define your component's structure with HTML, CSS, and JavaScript.
Component mounting
Create instances of your component in your app and handle their output.
Bidirectional communication
Exchange data between your component and Python.
State vs triggers
Understand the two communication mechanisms for building interactive components.
Theming and styling
Make your components look great with Streamlit's theme integration and CSS custom properties.
Package-based components
Build distributable components with TypeScript, external dependencies, and the official component template.
Migration from v1 to v2
If you have existing v1 components, check out these migration examples:
What's next?
Ready to build your first v2 component? Start with the Quickstart examples to see practical implementations, then learn about Component registration and Component mounting to understand the fundamentals.
Still have questions?
Our forums are full of helpful information and Streamlit experts.
