skills.rest
NickEsColR
NickEsColRCOMMUNITY
Explore all skills by this author →
GitHub

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with inline HTML/JS/CSS or packaged assets.

Updated Feb 26, 2026
Search Tags:#frontend#vite#streamlit#custom-components#ccv2#packaged-component
One-click install
npx skills add https://github.com/NickEsColR/gemini-rag-demo --skill building-streamlit-custom-components-v2-nickescolr
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/NickEsColR/gemini-rag-demo/tree/main/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/NickEsColR/gemini-rag-demo --skill building-streamlit-custom-components-v2-nickescolr

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Builds reusable, bidirectional UI components for Streamlit using CCv2, enabling developers to extend Streamlit with custom HTML/JS/CSS or packaged assets and to share interactive widgets across apps.

Core Features & Use Cases

  • Inline CCv2 components for quick prototyping and simple UI elements.
  • Packaged CCv2 components with an asset_dir for production-ready distribution, tests, and reuse across projects.
  • State and trigger patterns (data hydration and event callbacks), monolithic or modular frontend integration, and theming via Streamlit CSS variables.
  • Use cases include building complex dashboards, custom inputs, and interactive visualizations that need tight Python↔frontend coupling.

Quick Start

Create a CCv2 component with st.components.v2.component by supplying inline HTML/JS/CSS and then mount it in a Streamlit app.

Frequently Asked Questions about building-streamlit-custom-components-v2

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build custom Streamlit components with bidirectional communication?▼

Build custom Streamlit components with bidirectional communication using the CCv2 workflow via `st.components.v2.component`. This enables tight Python↔frontend coupling for state hydration and event callbacks within your interactive widgets.

What is a packaged Streamlit CCv2 component and when do I need one?▼

A packaged Streamlit CCv2 component bundles frontend assets using an `asset_dir` for production-ready distribution. You need one when building reusable, production-grade widgets with tests that are shared across multiple Streamlit projects.

Can I use inline HTML, JS, and CSS to prototype Streamlit custom components?▼

You can use inline HTML, JS, and CSS to prototype Streamlit custom components through the CCv2 workflow. This allows quick creation of simple UI elements without requiring a full packaged asset directory.

How does theming work for Streamlit custom components?▼

Theming for Streamlit custom components works by utilizing Streamlit CSS variables. This ensures your custom UI elements visually integrate with the host application's theme while maintaining isolation within a shadow DOM.

Does Streamlit CCv2 isolate custom components in a shadow DOM?▼

Streamlit CCv2 isolates custom components within a shadow DOM. This prevents CSS and JavaScript conflicts between your custom frontend code and the main Streamlit application environment.

Related Skills

Explore More Software Engineering Skills→
lfg357lfg357

hybrid-python-web

Coordinate Python backend with HTML/JS frontend for full-stack web applications.

Community
Advanced
rahul-s-bhattrahul-s-bhatt

building-streamlit-custom-components-v2

Build interactive Streamlit custom components with bidirectional UI communication and reusable architectures.

Community
Advanced
cathayriskcathayrisk

using-streamlit-session-state

Persist session values across Streamlit script reruns using key-based widget binding.

Community
Intermediate
legoutlegout
3

displaying-streamlit-data

Visualize datasets and metrics in Streamlit with native charts, Altair, and interactive tables.

Community
Intermediate