Install Prompt Sheet

ProNew

A bottom sheet that offers to add the web app to the home screen, using the browser's install prompt when it exists and plain steps for iOS when it does not, and remembers a dismissal. Use this when your web app is installable and you want to ask once, at a good moment, in your own words.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

canPrompt

open

Guide and examples

When to use it

Use it when your web app is installable and you want to ask once, at a good moment, in your own words.

Do not use it at first load before people have seen value, or for apps that are not installable.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`canPrompt`	`boolean`	`false`	True when a `beforeinstallprompt` event was captured.
`onInstall`	`() => Promise<"accepted"`	`"dismissed">`	-
`onDismiss`	`() => void`	`required`	Called for Not now (store it so you do not ask again).
`open`	`boolean`	`required`	Whether the sheet is showing.

Accessibility

A dialog titled "Install the app" with a description of the benefit; the primary button says "Install" when the browser can prompt, otherwise the sheet shows numbered steps.
Not now is as visible as Install; the choice is stored through onDismiss.
The steps are an ordered list, so the order is announced.

Testing

The pattern ships with a Testing Library test (install-prompt-sheet.test.tsx) that drives it through roles and the keyboard.

Guide and examples

When to use it

Use it when your web app is installable and you want to ask once, at a good moment, in your own words.

Do not use it at first load before people have seen value, or for apps that are not installable.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`canPrompt`	`boolean`	`false`	True when a `beforeinstallprompt` event was captured.
`onInstall`	`() => Promise<"accepted"`	`"dismissed">`	-
`onDismiss`	`() => void`	`required`	Called for Not now (store it so you do not ask again).
`open`	`boolean`	`required`	Whether the sheet is showing.

Accessibility

A dialog titled "Install the app" with a description of the benefit; the primary button says "Install" when the browser can prompt, otherwise the sheet shows numbered steps.
Not now is as visible as Install; the choice is stored through onDismiss.
The steps are an ordered list, so the order is announced.

Testing

The pattern ships with a Testing Library test (install-prompt-sheet.test.tsx) that drives it through roles and the keyboard.