Smart Banner

Pro

Banner that invites website visitors to get your app, with icon, star rating and a button. An Install button can turn into Open with a check, and dismissing folds the banner neatly away.

Preview

Installation

npx @lumioui/cli add pro/smart-banner

Usage

import { SmartBanner } from "@/components/ui/smart-banner/smart-banner";
<SmartBanner />

Examples

Over web content

A trail guide read in the mobile browser.

API reference

Prop Type Default
appName* string

App name shown next to the icon.

 —
tagline string

Line under the name — defaults to star rating + store label.

 —
rating number

0–5 rating shown as partial-fill stars.

 —
ctaLabel string

CTA text — "Open", "Install". Default "Open".

 "Open"
onPress () => void

CTA tap — deep-link into the app, store page, etc. After an install, the "Open" tap.

 —
onInstall () => void | Promise<unknown>

Install in place. When set, the first CTA tap runs this (may return a Promise) while the pill fills with light, then the pill becomes installedLabel. Optional.

 —
installedLabel string

Label once installed. Default "Open".

 "Open"
onInstalled () => void

Called once the installed state has held, ~700ms after it lands.

 —
onDismiss () => void

X tap — parent unmounts; if unset the X is hidden.

 —
iconSource ImageSourcePropType

Custom app icon. Falls back to a branded initial tile.

 —
glass boolean

Glass strip, for a banner floating over scrolling content. Default false (a solid in-page strip).

 false
className string —