#243
iOS instructions
The install prompt in iOS mode, showing add to home screen instructions inside a reserved stage box.
Hand this to your AI. It names the exact library parts, timings and accessibility promises of this demo.
Build the "iOS instructions" pattern (@codeatlasdev/ui demo #243, feedback/install-prompt) in my app.
Call get_demo({ ids: ["#243"] }) first and keep its structure. It needs @codeatlasdev/[email protected].
Use: Prompting Safari on iPhone users, who have no native install event, to install the app to their home screen.
Keep these library parts, with the props and tokens the demo uses:
- InstallPrompt from "@codeatlasdev/ui"
Behaviour to keep:
- `<InstallPrompt mode="ios" storageKey="demo-install-ios" />`
- Wrapped in `<div class="stage">` with `min-height: calc(var(--ca-space-8) * 3)` so the page does not shift when it appears
- No handlers or state in the demo, the prompt renders only after mounting in the browser
Reduced motion: the demo handles it; keep that branch.
Keyboard: operable; keep the focus order and key handling.
Change only the copy and the data. Use the theme tokens (--ca-*), never raw colours. Library parts
- InstallPrompt
@codeatlasdev/ui
How it is built
- `<InstallPrompt mode="ios" storageKey="demo-install-ios" />`
- Wrapped in `<div class="stage">` with `min-height: calc(var(--ca-space-8) * 3)` so the page does not shift when it appears
- No handlers or state in the demo, the prompt renders only after mounting in the browser
Related
Loading source.