tui-dialog

Implement modal dialogs and overlays in Bubble Tea v2 applications.

57|Updated Jun 30, 2024

Search Tags:#go #modal #tui #lipgloss #overlay #bubble-tea #input-routing

Ready to run

npx skills add https://github.com/jhillyerd/labcoat --skill tui-dialog-jhillyerd

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: tui-dialog
Source: https://github.com/jhillyerd/labcoat/tree/main/.opencode/skills/tui-dialog
Command: npx skills add https://github.com/jhillyerd/labcoat --skill tui-dialog-jhillyerd

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bubble Tea-based terminal UIs often struggle with consistent modal dialogs and overlay rendering, input routing, and layered interfaces. This skill provides a structured approach to implementing modal dialogs, overlays, and command palettes with predictable patterns for UX and maintainability.

Core Features & Use Cases

Modal patterns (View, Update, Overlay) to compose layered interfaces
Command palettes, confirm dialogs, and input dialogs for common interactions
Correct input routing priority (modal first) and z-index overlay composition
Reusable overlay utilities using lipgloss/compositor for true background visibility

Quick Start

Start by wiring the tui-dialog skill into your Bubble Tea project and begin implementing modal components.

Frequently Asked Questions about tui-dialog

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

FAQPage Schema

How do I implement modal dialogs in a Bubble Tea Go TUI application?▼

Implement Bubble Tea modal dialogs by using structured patterns for View, Update, and Overlay composition to build layered interfaces with predictable input routing and z-index management.

What is the correct input routing order for overlays in Bubble Tea v2?▼

Correct input routing for Bubble Tea v2 overlays prioritizes modal components first, ensuring keystrokes reach the active dialog before the underlying application layer processes them.

How do I render overlays with transparent backgrounds using lipgloss?▼

Render transparent overlays by using reusable utilities built on the lipgloss compositor, which enables true background visibility when stacking modal components in your terminal UI.

Can I build command palettes and confirmation dialogs with Bubble Tea?▼

Build command palettes and confirmation dialogs in Bubble Tea using defined modal types that handle common interaction patterns while maintaining consistent z-index layering across the interface.

Why does my Bubble Tea overlay not receive keyboard input?▼

Bubble Tea overlays fail to receive keyboard input when input routing lacks proper priority ordering, requiring structured modal-first routing patterns to intercept and handle keystrokes correctly.

Does tui-dialog support test patterns for Go TUI modal components?▼

The tui-dialog skill specifies test patterns for Go TUI modal components, enabling reliable validation of overlay composition, input routing, and z-index management across Bubble Tea projects.