# Modal Dialog

> A broadcast master-control confirm dialog — a dark CRT program monitor that powers on from a squashed scan line, with a mono OSD status row, a blinking REC tally, an SMPTE color-bar strip, and hardware HOLD / TAKE keys in signal cyan.

- Category: Dialog
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: modal, overlay
- Page: https://builder.atheros.ai/components/modal
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_modal/preview-b57246d6da3b.webp

## Features

- CRT power-on entrance — the dialog springs from a squashed horizontal scan line to full picture with a slight vertical overshoot, and collapses back to the line on close
- The tube screen stays dark in both themes; only the steel control-room ground around it changes
- OSD status row in squared uppercase type: channel, live Preview mode, and a blinking REC tally dot
- SMPTE color-bar strip drawn from seven dedicated design tokens
- Hardware-style HOLD and TAKE keys — sharp 4px rectangles that compress under the press
- Token-drawn scanline texture on the tube, no images and no glow
- Focus trapping with Tab / Shift+Tab wrap, Escape close, and focus restore to the trigger
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Dialog semantics** — `role="dialog"` with `aria-modal="true"`, `aria-labelledby`, and `aria-describedby`
- **Trigger affordance** — `aria-haspopup="dialog"` and a descriptive `aria-label` on the trigger
- **Focus trap** — Tab and Shift+Tab wrap within the dialog while open
- **Focus restore** — Focus returns to the previously focused element on close
- **Escape to close** — Document-level keydown handler while open
- **Overlay dismiss** — Clicking the scrim outside the tube closes the dialog
- **Page heading** — Visually hidden `h1` labels the demo stage
- **Decorative art** — The SMPTE bar strip and REC dot are `aria-hidden`
- **Focus indicators** — `:focus-visible` outlines — primary ring on the page, bar-cyan ring on the tube
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations and transitions

## Keyboard shortcuts

- `Escape` — Close the dialog
- `Tab` — Move focus forward, wrapping within the dialog
- `Shift+Tab` — Move focus backward, wrapping within the dialog
- `Enter / Space` — Activate the focused key

## Common questions

**Which frameworks is Modal Dialog available in?**

Modal Dialog ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is Modal Dialog free?**

Modal Dialog is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Modal Dialog support dark mode?**

Yes. Modal Dialog ships light and dark themes, both drawn from the Vector design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Modal Dialog live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/modal

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt