Install Prompt React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Install Prompt is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import InstallPrompt from @/components/ui/install-prompt.

// app/layout.tsx: mount it once in the root layout, the browser offers the install only once and early
import type { ReactNode } from "react"
import { InstallPrompt } from "@/components/ui/install-prompt"

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <InstallPrompt
          appName="Northwind CRM"
          appIcon="/icon-192.png"
          description="Open it right from your home screen, even offline."
          labels={{
            notNow: "Maybe later",
            iosSteps: ["Tap Share in the bottom bar", "Choose Add to Home Screen", "Tap Add"],
          }}
        />
      </body>
    </html>
  )
}

Props

• appNamedefault ""
  string

  The app's name, used in the titles ("Install Northwind CRM") and for the letter tile. Empty falls back to labels.fallbackName ("this app").

• appIcondefault ""
  string | ReactNode

  The icon: an image src (shown 48px with 12px corners, use your 192px manifest icon) or an element. Empty draws a tile in the tone with the first letter of appName.

• descriptiondefault ""
  string

  One line under the title: why installing helps. Truncated in the slim banner, wrapped in the sheet and the card.

• screenshots
  string[]

  Sheet variant: a horizontal rail of screenshots (h-72, 9:16, snapping) between the title and the buttons, keyboard scrollable.

• variantdefault "banner"
  "banner" | "sheet" | "card"

  banner: a slim floating card pinned to placement, like a Smart App Banner (on iPhone its Install opens the guide sheet; on a Mac it shows the steps inline). sheet: a bottom sheet with details, a centered dialog from 768px up. card: an inline card you place yourself (a settings page), always visible while the app can be installed.

• placementdefault "bottom"
  "bottom" | "top"

  The banner's edge. Bottom sits above a bottom tab bar and a sticky CTA bar (--bottom-bar-offset, --cta-bar-offset) and the home indicator; top sits under the notch, or under --install-prompt-top when you set it (a fixed header).

• positiondefault "fixed"
  "fixed" | "absolute"

  fixed pins the banner to the viewport (and turns it into a 380px card at the bottom end on desktop); absolute pins it inside the nearest positioned parent (a phone frame, a panel).

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The Install button and the letter tile. Keep neutral in an app; brand fits a marketing page.

• colordefault ""
  string

  Any CSS color for the Install button and the letter tile, replacing the tone.

• radiusdefault "md"
  "sm" | "md" | "lg"

  Corners of the card and the floating banner: 12, 16 or 24px.

• platformdefault "auto"
  "auto" | "chromium" | "ios" | "macos-safari" | "unsupported"

  auto detects it: chromium once the browser has offered an install (beforeinstallprompt), ios on iPhone and iPad in any browser, macos-safari on Safari 17+ for Mac; in-app browsers and everything else are unsupported and render nothing. Force one for demos and QA; a forced chromium without a real event makes Install resolve "unavailable".

• delaydefault 3000
  number

  Milliseconds after it becomes possible before the banner or sheet shows, so it never greets people on arrival. Ignored while open is controlled and by the card.

• dismissDaysdefault 14
  number

  How long Not now hides it, in days. 0 hides it for this session only (sessionStorage).

• storageKeydefault "install-prompt"
  string

  The localStorage key that remembers Not now (a timestamp). Empty keeps it in memory; with storage blocked it lasts the session.

• showOnIOSdefault true
  boolean

  Show the Add to Home Screen guide on iPhone and iPad.

• showOnDesktopdefault true
  boolean

  Show it in Chrome and Edge on a computer and the Add to Dock guide in Safari for Mac.

• defaultOpendefault false
  boolean

  Open the banner or sheet at once (no delay, a previous Not now ignored). An initially open banner skips its entrance.

• open
  boolean

  Controlled open state of the banner or sheet; pair it with onOpenChange. It still renders nothing where there is no install path.

• onOpenChange
  (open: boolean) => void

  Called when it opens after the delay and when it closes (Not now, installed, the sheet dismissed).

• onInstall
  (outcome: "accepted" | "dismissed" | "unavailable") => void

  The result of Install in Chromium: accepted, dismissed in the browser dialog (the prompt cannot be shown again until the browser offers it again), or unavailable (no pending event).

• onDismiss
  () => void

  Not now, the ×, Got it in the guide, or the sheet closed by drag, tap outside or Escape.

• safeAreadefault true
  boolean

  Pad the banner off the notch, the home indicator and the rounded side edges (env(safe-area-inset-*)).

• desktopdefault "dialog"
  "dialog" | "sheet"

  What the sheet (and the iPhone guide) becomes at 768px and up: a centered dialog, or the same bottom sheet capped at 420px.

• container
  HTMLElement | null

  Portal target of the sheet (default document.body). A transformed or contain:layout element keeps the sheet inside it, like a phone frame.

• labels
  Partial<InstallPromptLabels>

  Every string: install "Install", notNow "Not now", title(name) "Install {name}", iosTitle(name) "Add {name} to your Home Screen", iosSteps ["Tap Share in the toolbar", "Scroll and choose Add to Home Screen", "Tap Add"], macTitle(name) "Add {name} to the Dock", macSteps ["Choose File in the menu bar", "Choose Add to Dock"], installed "Installed", fallbackName "this app", close "Close", done "Got it", installedAnnouncement(name) "{name} was installed", screenshots "Screenshots", screenshot(i, n) "Screenshot {i} of {n}", addGlyph "Add", fileGlyph "File". Defaults in DEFAULT_INSTALL_PROMPT_LABELS.

• classNames
  Partial<Record<"icon" | "content" | "title" | "description" | "screenshots" | "steps" | "step" | "actions" | "install" | "dismiss", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root: the banner's pinned wrapper, the card, or the sheet's content.

Parts

FAQ

More React mobile components