skills.rest
fangshine01
fangshine01COMMUNITY
Explore all skills by this author →
GitHub

building-streamlit-custom-components-v2

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

Updated Aug 23, 2026
Search Tags:#theming#streamlit#bundling#state-sync#custom-components#ccv2
One-click install
npx skills add https://github.com/fangshine01/AI_agent --skill building-streamlit-custom-components-v2-fangshine01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/fangshine01/AI_agent/tree/main/.github/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/fangshine01/AI_agent --skill building-streamlit-custom-components-v2-fangshine01

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Developers need a flexible way to create bidirectional Streamlit UI components that extend core Streamlit capabilities, enabling inline HTML/CSS/JS or packaged components with state/trigger wiring and theming.

Core Features & Use Cases

  • Inline components (HTML/CSS/JS strings) for quick demos or small UIs.
  • Packaged components with an asset_dir (globbed js/css) for reusable, distributable projects.
  • State and triggers: wire setStateValue and setTriggerValue to support bidirectional interactions and theme with --st-* tokens.
  • Bundling and theming: integrate with Vite / component-template v2 for scalable frontends and Shadow DOM isolation.

Quick Start

Start with an inline CCv2 component (HTML/CSS/JS) for rapid prototyping, then migrate to a packaged component when you need dependencies, tests, or distribution.

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 bidirectional Streamlit custom components with state and triggers?▼

Build bidirectional Streamlit custom components by wiring `setStateValue` and `setTriggerValue` using `st.components.v2.component`, enabling bidirectional interactions between Python and frontend HTML/CSS/JS assets.

What is the difference between inline and packaged Streamlit CCv2 components?▼

Inline CCv2 components use HTML/CSS/JS strings for quick demos, while packaged components bundle an `asset_dir` with globbed JS/CSS for reusable, distributable projects with dependencies and tests.

How do I apply theming to Streamlit custom components using Vite?▼

Apply theming to Streamlit custom components by using `--st-*` CSS tokens within Vite or component-template v2, ensuring per-component isolation via Shadow DOM for scalable frontends.

Can I use component-template v2 to bundle Streamlit UI elements?▼

Yes, you can use the official component-template v2 with Vite to bundle Streamlit UI elements, managing `asset_dir` packaging and enabling per-component isolation for packaged distributions.

When should I migrate an inline Streamlit component to a packaged distribution?▼

Migrate an inline Streamlit component to a packaged distribution when you need external dependencies, tests, or distributable assets, transitioning from rapid prototyping to a reusable project structure.

Does Streamlit CCv2 support Shadow DOM isolation for custom UI elements?▼

Yes, Streamlit CCv2 supports Shadow DOM isolation for custom UI elements, ensuring per-component encapsulation when bundling with Vite or the official component-template v2.

Related Skills

Explore More Software Engineering Skills→
andfaniloandfanilo
629

building-streamlit-custom-components-v2

Build bidirectional Streamlit Custom Components v2 with st.components.v2.component.

Community
Advanced
erickfmmerickfmm

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with the v2 API.

Community
Advanced
NickEsColRNickEsColR

building-streamlit-custom-components-v2

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

Community
Advanced
seanyofthedeadseanyofthedead

building-streamlit-custom-components-v2

Build bidirectional Streamlit Custom Components v2 with Vite bundling.

Community
Advanced