Component
InstallPrompt
InstallPrompt presents the value and action clearly without triggering browser UI on its own. Pair it with useInstallPrompt and only render it when the browser supplies an install prompt.
Preview
Install Field Notes
Open notes faster in a focused app window.
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/install-prompt.jsonUsage
"use client"
import { InstallPrompt } from "@/components/ui/install-prompt"import { useInstallPrompt } from "@/hooks/use-install-prompt"
export function AppInstallPrompt() { const { status, prompt } = useInstallPrompt()
if (status !== "available" && status !== "prompting") return null
async function install() { await prompt() }
return ( <InstallPrompt installing={status === "prompting"} onInstall={install} /> )}Anatomy
InstallPrompttitledescriptioninstall actionoptional dismiss actionBehavior notes
- Render only after useInstallPrompt reports available.
- The component never requests installation during render or without a user action.
- Use product-specific copy that explains the value of installing.
Accessibility
The prompt is a labelled section with visible text and touch-sized native buttons. Browser installation remains tied to an explicit user action.