An install invite for web apps: an Install button wired to the browser prompt, manual Share then Add to Home Screen steps on iPhone, and a remembered snooze.
Reorder in two taps and track every delivery.
npx shadcn@latest add https://hyperblur.dev/r/install-app-banner.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/install-app-banner.tsx.
import { InstallAppBanner } from "@/components/hyperblur/install-app-banner"
<InstallAppBanner appName="Corner Kitchen" onInstall={(outcome) => console.log(outcome)} />| Prop | Type | Default | Description |
|---|---|---|---|
| appName | string | "Corner Kitchen" | App name next to the icon. |
| meta | string | "Free · Installs in seconds" | Small line under the name. |
| description | string | "Reorder in two taps and track every delivery." | Short pitch. |
| benefits | string[] | ["Live order tracking", "Works offline"] | Checklist under the pitch. |
| icon | React.ReactNode | App icon slot. Defaults to a drawn bowl icon. | |
| snoozeDays | number | 7 | Days the banner stays hidden after it is dismissed. |
| storageKey | string | "install-banner-snooze" | localStorage key used for the snooze. |
| delay | number | 1200 | Milliseconds to wait before showing the banner. |
| forceVisible | boolean | false | Always shows the banner and skips the snooze, for previews and testing. |
| mode | "auto" | "prompt" | "ios" | "auto" | Auto picks the iPhone steps on iOS Safari and the Install button where the browser supports it. |
| placement | "fixed" | "inline" | "fixed" | Fixed is a bottom sheet on phones and a corner card on wide screens. Inline renders in the flow. |
| appearance | "dark" | "light" | "dark" | Color scheme. |
| labels | Partial<InstallAppLabels> | English | Every visible string, including the iPhone steps. |
| onInstall | (outcome: "accepted" | "dismissed" | "unavailable") => void | Called after the install prompt closes, or with unavailable when the browser offered no prompt. | |
| onDismiss | () => void | Called when the banner is closed with Not now, Got it, the close button or Escape. | |
| accent | string | "#2f7bff" | Accent color used for buttons, focus rings and highlights. |
| className | string | Extra classes on the root element. | |
| style | React.CSSProperties | Inline styles on the root element. |