# Notification Stack

Notifications as inset cards on the tray. They fan when collapsed, list when expanded, and swipe away.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/notification-stack
```

## Usage

```tsx
import { NotificationStack } from '@/components/fetaui/notification-stack'

export function Example() {
  return <NotificationStack items={items} onDismiss={remove} />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| items | { id, title, body, time, tone, icon }[] | required |
| title | string | Notifications |
| expanded | boolean |  |
| defaultExpanded | boolean | false |
| onExpandedChange | (expanded) => void |  |
| onDismiss | (id) => void |  |
| swipePreview | boolean | false |
| animated | boolean | true |

## When to use

- For a short feed in a sidebar, a home screen or a popover.
- When only the newest item needs attention until someone opens the rest.

## When not to use

- For a message that must be answered: use Alert Dialog.
- For a passing confirmation: use Toast.

## Accessibility

- A named section with a list that announces additions politely.
- Every card has a labelled Dismiss button, so swiping is never the only way.
- Cards behind the top one are hidden from assistive tech and inert until the list opens.
- After a dismiss, focus moves to the next card or to the toggle.

## Motion

- The stack springs from fan to list in 300 ms, scaling the cards from 0.92 to 1. The count stays put.
- A swipe follows the finger and reveals the Dismiss strip. It dismisses past 40% of the width or at 500 px/s.
- New items drop 12 px and fade in over 240 ms, and older cards slide back one step.
- With reduced motion, the list opens at once and Dismiss stays on the corner button.