# Smart Banner

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.

> Composed · Pro · Feedback — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/smart-banner
```

## Import

```tsx
import { SmartBanner } from "@/components/ui/smart-banner/smart-banner";
```

## Variants

- `web` — Over web content: `npx @lumioui/cli add pro/smart-banner-web`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `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". |
| `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". |
| `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). |
| `className?` | `string` | — |

## Icons rendered

- `x` — /icons.html?i=x

Source: https://lumioui.com/components/smart-banner