An accessible modal dialog built on the native dialog element, with focus return and Escape to close.
ComponentUI componentExample — not saved until you change it
What the planner understood
Confidence100%
component→meansUI component template
modal→meansUI component template
dialog→meansUI component template
modal→meansmodal component
Feasibility, templates and prompt history
Feasibility
NATIVELight and dark theme
NATIVEResponsive layout
Start from a template
Picking a template keeps the name, colours and fields from your description.
Prompt history
Off by default. Prompts are only kept in this browser if you turn this on.
index.html
Sandboxed · network off · fits 772px
Files 9 files · • = edited by you
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
Tab indents. Press Esc then Tab to move focus out of the editor. Changes preview after a short pause.
Patterns that pass keyboard testing
Each component follows the matching WAI-ARIA pattern: tabs use roving tabindex and arrow keys, the menu button supports arrows and Escape, the accordion exposes aria-expanded, and the dialog returns focus to the button that opened it.
The component library in the Plan tab shows every component’s HTML, CSS, JavaScript and React TSX with copy buttons, so you can lift one into an existing project without generating a whole app.
Styled by tokens
Components read colours and radius from CSS custom properties, so they adopt your theme automatically. Switch the preset in the Design tab and watch the component update.
Frequently asked questions
Do the components need a framework?
No. The HTML versions use plain DOM APIs. React TSX versions are included for React projects.
Can I generate a component that is not in the list?
The rule-based path covers the eight listed components. With the on-device model you can ask for code edits to adapt one, reviewed as a diff.