dialog

Build accessible dialog components with configurable headers, content, and actions.

2|Updated Mar 28, 2026

Search Tags:#frontend #react #modal #ui-components #radix-ui #dialog #accessible

Ready to run

npx skills add https://github.com/SayadBot/keyvoid --skill dialog-sayadbot

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dialog
Source: https://github.com/SayadBot/keyvoid/tree/main/.agents/skills/dialog
Command: npx skills add https://github.com/SayadBot/keyvoid --skill dialog-sayadbot

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Build accessible, responsive dialog components with scrollable content, headers, and action footers. Use this skill when creating modals, forms, confirmations, or any dialog-based UI patterns.

Core Features & Use Cases

Built-in header, content area, and footer with configurable title, description, and actions.
Accessible and responsive across mobile and desktop, with automatic scrolling and close controls.
Use Case: Provide consistent modal experiences for confirmations, forms, and stepwise dialogs.

Quick Start

Create a BetterDialog with a BetterDialogContent to render a modal with a header, content area, and footer actions.

Frequently Asked Questions about dialog

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

FAQPage Schema

How do I build an accessible React modal with focus management?▼

You can build an accessible React modal with focus management using this skill to generate dialog components with structured props for headers, content regions, and configurable submit or cancel actions.

Can I create a confirmation dialog with a scrollable content area in React?▼

Yes, you can create a confirmation dialog with a scrollable content area in React using this skill, which provides a structured content region with automatic scrolling alongside configurable header titles and footer actions.

Does this dialog component support responsive layouts for mobile and desktop?▼

Yes, this dialog component supports responsive layouts for mobile and desktop. It is designed to be accessible across different screen sizes, adapting content overlays with built-in close controls and automatic scrolling behavior.

What is the best way to structure a stepwise form overlay in a React UI?▼

The best way to structure a stepwise form overlay in a React UI is using a dialog component with separate header, content, and footer regions. This skill provides a structured prop surface to configure titles, descriptions, and action buttons for stepwise flows.

How do I configure submit and cancel actions in a frontend dialog component?▼

You configure submit and cancel actions in a frontend dialog component by using the structured action footer props provided by this skill. It allows you to define configurable submit and cancel controls directly within the modal footer.