skills.rest
Shamrock2245
Shamrock2245COMMUNITY
Explore all skills by this author →
WebsiteGitHub

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with inline or packaged assets.

1|1|Updated Mar 20, 2026
Search Tags:#theming#frontend#component#streamlit#ccv2#packaged
One-click install
npx skills add https://github.com/Shamrock2245/shamrock-trading-bot --skill building-streamlit-custom-components-v2-shamrock2245
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/Shamrock2245/shamrock-trading-bot/tree/main/.agent/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/Shamrock2245/shamrock-trading-bot --skill building-streamlit-custom-components-v2-shamrock2245

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlit CCv2 components enable rich, interactive UI within Streamlit apps by bridging Python and frontend code.

Core Features & Use Cases

  • Inline components: HTML/CSS/JS embedded inside Python
  • Packaged components: asset_dir, js/css globs, and manifest wiring
  • State and triggers: bidirectional communication between Python and frontend
  • Theming and bundling: support for Streamlit CSS variables (--st-*) and modern bundlers like Vite or component-template v2

Quick Start

Create a minimal inline CCv2 component using st.components.v2.component and validate Python–JS data and state hydration with a simple example.

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 CCv2 components with Python and frontend code?▼

Build bidirectional Streamlit CCv2 components by wiring frontend HTML/CSS/JS or packaged assets to a Python wrapper that manages state, triggers callbacks, and data hydration.

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

Inline CCv2 components embed HTML, CSS, and JS directly in Python, while packaged components use asset directories and js/css globs with manifest wiring for isolation and bundling.

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

Apply theming to custom Streamlit components by utilizing built-in Streamlit CSS variables (--st-*) within your frontend code, ensuring visual consistency across the application.

Can I use Vite to bundle Streamlit CCv2 packaged components?▼

Yes, you can bundle Streamlit CCv2 packaged components using modern bundlers like Vite or the official component-template v2 to manage assets and Javascript execution.

Why are my Streamlit custom component state triggers not working?▼

State triggers fail when the Python wrapper lacks correct bidirectional wiring for callbacks or guardrails for asset packaging are missing, breaking frontend-python communication.

Do I need a Python wrapper for CCv2-compliant frontend code?▼

Yes, a Python wrapper is required to wire data, state, and triggers, ensuring guardrails for correct asset packaging and isolation for your CCv2-compliant frontend code.

Related Skills

Explore More Software Engineering Skills→
NickEsColRNickEsColR

building-streamlit-custom-components-v2

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

Community
Advanced
erickfmmerickfmm

building-streamlit-custom-components-v2

Build bidirectional Streamlit CCv2 components with the v2 API.

Community
Advanced
DDTullyDDTully

building-streamlit-custom-components-v2

Develops and deploys Streamlit CCv2 components with inline or packaged frontends.

Community
Advanced
seanyofthedeadseanyofthedead

building-streamlit-custom-components-v2

Build bidirectional Streamlit Custom Components v2 with Vite bundling.

Community
Advanced