# Notification Banner

In-app notification banner that glows in from the top of the screen and fades away on its own. New banners stack neatly; tap to open them as a list, swipe one away, or reply right from it.

> Primitive · Pro · Feedback — React Native, Expo Go incompatible (dev build required).

## Install

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

## Import

```tsx
import { NotificationStack, useNotificationBanner, NotificationBanner } from "@/components/ui/notification-banner/notification-banner";
```

## Props

### NotificationStack

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `NotificationItem[]` | Newest first. |
| `onRemove` | `(id: string) => void` | Called once a banner has finished leaving — drop it from `items`. |
| `onDismissAll?` | `() => void` | "Clear all" in the open list. Omit to hide the button. |
| `maxVisible?` | `number` | Banners visible in the gathered stack. Default 3. |
| `placement?` | `"overlay" | "inline"` | "overlay" floats over the screen from the top (default); "inline" sits  in flow and reserves its height. |
| `className?` | `string` | — |

### NotificationBanner

| Prop | Type | Notes |
| --- | --- | --- |
| `options?` | `NotificationBannerOptions` | The banner to show. Individual option props are merged under it. |
| `onDismiss?` | `() => void` | Called once the banner has left. |
| `overlay?` | `boolean` | Float over the screen instead of sitting in flow. Default false (inline). |
| `className?` | `string` | — |

## Icons rendered

- `message-circle` — /icons.html?i=message-circle
- `x` — /icons.html?i=x
- `chevron-up` — /icons.html?i=chevron-up

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