PWA UIv0.1 beta
Documentation
Docs / Components / InstallPrompt

Component

InstallPrompt

InstallPrompt presents the value and action clearly without triggering browser UI on its own. Pair it with useInstallPrompt: show the install action where the browser supplies a prompt, and the manual Home Screen steps where it never will.

Preview

Install Field Notes

Open notes faster in a focused app window.

Installation

bash
pnpm dlx shadcn@latest add https://pwaui.com/r/install-prompt.json

Usage

tsx
"use client"
import { InstallPrompt } from "@/components/ui/install-prompt"import { useInstallPrompt } from "@/hooks/use-install-prompt"
export function AppInstallPrompt() {  const { status, promptType, prompt } = useInstallPrompt()
  if (promptType === "ios-manual") {    return <InstallPrompt mode="manual" />  }
  if (status !== "available" && status !== "prompting") return null
  async function install() {    await prompt()  }
  return (    <InstallPrompt      installing={status === "prompting"}      onInstall={install}    />  )}

Anatomy

InstallPrompttitledescriptioninstall actionmanual stepsoptional dismiss action

Behavior notes

  • Render the default prompt mode after useInstallPrompt reports promptType "native".
  • Render mode="manual" when useInstallPrompt reports promptType "ios-manual"; iOS has no programmatic prompt, so the component shows Share → Add to Home Screen steps instead of an install button.
  • The component never requests installation during render or without a user action.
  • Use product-specific copy that explains the value of installing.

Platform limitations

  • iOS Safari never fires beforeinstallprompt, so the programmatic install flow is unavailable there — render manual "Share → Add to Home Screen" guidance for iOS. Firefox does not support programmatic PWA installation.

Accessibility

The prompt is a labelled section with visible text. Prompt mode adds touch-sized native buttons; manual mode presents an ordered list of steps and renders a button only when you supply onDismiss. Browser installation remains tied to an explicit user action.