Componentfeedback0.71 KB gzipZero dependencies

Install Prompt

PWA install banner stub.

Preview

Live Preview

Install box office stub app

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add install-prompt

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { InstallPrompt } from "@/components/ui/install-prompt";

<InstallPrompt />

Usage guidance

Use Install Prompt when a ticket stub surface needs PWA install banner stub. Keep props minimal and prefer composition with sibling stubs.

Avoid Install Prompt for long form flows or dense data grids where a dedicated layout block fits better.

Source code

install-prompt.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface InstallPromptProps extends React.HTMLAttributes<HTMLDivElement> {
  onInstall?: () => void;
  onDismiss?: () => void;
}

/** Install prompt stub: stub-framed PWA install banner. */
export function InstallPrompt({ onInstall, onDismiss, className, ...props }: InstallPromptProps) {
  const [hidden, setHidden] = React.useState(false);
  if (hidden) return null;
  return (
    <div className={cn("flex w-full max-w-md flex-wrap items-center gap-2 rounded-lg border-2 border-foreground bg-card p-3 shadow-sm outline-1 outline-dashed outline-offset-[-5px] outline-border/60", className)} role="dialog" aria-label="Install app" {...props}>
      <span className="flex size-8 items-center justify-center rounded border border-dashed border-accent font-mono text-sm font-bold text-accent" aria-hidden="true">◈</span>
      <p className="min-w-0 flex-1 font-mono text-[11px] uppercase tracking-wide text-foreground">Install box office stub app</p>
      <button type="button" onClick={() => { onInstall?.(); setHidden(true); }} className="rounded-md bg-accent px-2.5 py-1 font-mono text-[10px] font-bold uppercase text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Install</button>
      <button type="button" onClick={() => { onDismiss?.(); setHidden(true); }} className="rounded px-1.5 py-1 font-mono text-[10px] uppercase text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">Later</button>
    </div>
  );
}