skills.rest
mberetvas
mberetvasCOMMUNITY
Explore all skills by this author →
GitHub

building-streamlit-custom-components-v2

Create bidirectional Streamlit components using CCv2 with Python and frontend UI.

Updated Apr 4, 2026
Search Tags:#theming#frontend#streamlit#state-sync#custom-components#ccv2#packaged-components
One-click install
npx skills add https://github.com/mberetvas/blauw_zwart_pipeline --skill building-streamlit-custom-components-v2-mberetvas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/mberetvas/blauw_zwart_pipeline/tree/main/.agents/skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/mberetvas/blauw_zwart_pipeline --skill building-streamlit-custom-components-v2-mberetvas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

CCv2 enables building reusable, interactive UI components that bridge Python logic with frontend code in Streamlit, addressing UI limitations.

Core Features & Use Cases

  • Inline CCv2 components for quick prototyping of small UI widgets.
  • Packaged CCv2 components for reusable, distributable frontend modules with asset_dir and templated scaffolding.
  • State syncing and theming via the CCv2 contract (data, state, and trigger payloads) and Streamlit CSS variables to match themes.

Quick Start

Write a minimal inline CCv2 component and render it inside 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 bidirectional Streamlit custom components?▼

Build bidirectional Streamlit custom components using CCv2 to bridge Python logic with frontend UI. This approach enforces CCv2 v2 patterns, utilizing data, state, and trigger payloads to synchronize communication between your Python backend and frontend code.

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

Inline Streamlit components allow quick prototyping of small UI widgets, while packaged components create reusable, distributable frontend modules. Packaged CCv2 components require an asset directory for assets and use templated scaffolding for distribution.

Does Streamlit CCv2 support state synchronization and theming?▼

Yes, Streamlit CCv2 supports state synchronization and theming. It manages state syncing through the CCv2 contract using data, state, and trigger payloads, and handles theming by utilizing Streamlit CSS variables to match active themes.

Can I use React or vanilla TypeScript for Streamlit custom components?▼

You can use optional frontend frameworks like React or vanilla TypeScript for Streamlit custom components. CCv2 connects your Python logic with these frontend frameworks, allowing flexible UI development while enforcing v2 patterns.

Are CCv2 v1 APIs still supported for building Streamlit components?▼

CCv2 v1 APIs are forbidden when building Streamlit components with this approach. You must enforce CCv2 v2 patterns exclusively, ensuring your inline and packaged components rely entirely on the updated v2 contract.

Related Skills

Explore More Software Engineering Skills→
Nuwanda04Nuwanda04

senior-frontend

Scaffold React and Next.js projects with TypeScript and Tailwind CSS.

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
michaelschechtmichaelschecht
1

building-streamlit-custom-components-v2

Create Streamlit Custom Components v2 with HTML/CSS/JS and bidirectional data flow.

Community
Advanced
KaranKathur06KaranKathur06

streamlit

Build interactive data dashboards and machine-learning demos from Python code.

Community
Basic