skills.rest
DDTully
DDTullyCOMMUNITY
Explore all skills by this author →
GitHub

building-streamlit-custom-components-v2

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

Updated Aug 29, 2025
Search Tags:#theming#frontend#streamlit#inline#custom-components#ccv2#packaged
One-click install
npx skills add https://github.com/DDTully/dotfiles --skill building-streamlit-custom-components-v2-ddtully
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: building-streamlit-custom-components-v2
Source: https://github.com/DDTully/dotfiles/tree/main/skills/.agent_skills/developing-with-streamlit/skills/building-streamlit-custom-components-v2
Command: npx skills add https://github.com/DDTully/dotfiles --skill building-streamlit-custom-components-v2-ddtully

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlit users often need interactive, reusable UI elements beyond the built-in widgets, which CCv2 enables by embedding inline HTML/CSS/JS or packaged frontend assets.

Core Features & Use Cases

  • Inline CCv2 components using HTML/CSS/JS to create custom UI.
  • Packaged components with asset_dir, globs, and optional bundling (Vite) for distribution.
  • Theming with Streamlit's --st CSS variables for theme compatibility, and state/trigger synchronization between Python and frontend.

Quick Start

Create a simple inline CCv2 component and wire a basic state/trigger loop to see the interaction in Streamlit.

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 data flow?▼

You build custom Streamlit components using CCv2 to embed inline HTML/CSS/JS or packaged assets, wiring state and trigger callbacks to enable bidirectional data flow between Python and the frontend.

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

Inline CCv2 components use direct HTML/CSS/JS for simple UI extensions, whereas packaged components utilize an asset directory, support file globs, and optionally bundle with Vite for distribution.

How do I apply theming to Streamlit custom components?▼

You apply theming to custom components by utilizing Streamlit's --st CSS variables, ensuring your UI maintains theme compatibility and visually aligns with the broader Streamlit application.

Does Streamlit CCv2 work with Vite and component-template v2 for bundling?▼

Yes, CCv2 supports packaged components by bundling frontend assets with Vite or component-template v2, enabling robust distribution and build workflows for complex UI elements.

Why are my Streamlit custom components not isolating styles correctly?▼

Custom component styles may not isolate correctly without enforcing v2 API usage and proper packaging workflows; CCv2 provides specific guidance on isolation and theming to prevent style bleeding.

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
seanyofthedeadseanyofthedead

using-streamlit-custom-components

Integrate community-built custom components into Streamlit applications.

Community
Intermediate
NickEsColRNickEsColR

building-streamlit-custom-components-v2

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

Community
Advanced