Stacked Alerts Tray React component
Keep many alerts out of the way: they stack in a corner as a small deck with a count, open into a list over the page, and clear one at a time or all at once.
About the Stacked Alerts Tray component
Stacked Alerts Tray stops a busy app filling up with notices. Alerts gather in a corner as a small deck, with the newest on top and a count of how many are waiting.
Click the deck and they fan out over the page without moving it. Dismiss them one at a time, or clear the lot.
When to use it
Use it in dashboards and admin tools, where several things can need attention at once.
For a single message that should vanish by itself, a toast is the better fit.
Installation
Add the Stacked Alerts Tray component to your project with the shadcn CLI. It lands in components/stacked-alerts-tray.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/stacked-alerts-trayProps
<StackedAlertsTray /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| alerts Newest first. | { id: string; level: TrayLevel; title: string; message?: string; when?: string; action?: { label: string; onClick?: () => void } }[] | DEFAULT_ALERTS |
| corner Which corner it sits in. | "bottom-right" | "bottom-left" | "bottom-right" |
| contained Keep it inside the nearest positioned parent instead of the screen. | boolean | false |
| maxOpen Most alerts to show when open. The rest wait behind a count. | number | 5 |
| onDismiss | (alert: TrayAlert) => void | — |
| onClearAll | () => void | — |
- theme"dark" | "light"Default: "dark"
- alerts
Newest first.
{ id: string; level: TrayLevel; title: string; message?: string; when?: string; action?: { label: string; onClick?: () => void } }[]Default: DEFAULT_ALERTS - corner
Which corner it sits in.
"bottom-right" | "bottom-left"Default: "bottom-right" - contained
Keep it inside the nearest positioned parent instead of the screen.
booleanDefault: false - maxOpen
Most alerts to show when open. The rest wait behind a count.
numberDefault: 5 - onDismiss(alert: TrayAlert) => void
- onClearAll() => void
Stacked Alerts Tray FAQ
- Does opening it move the page?
- No. It opens upward over the page.
- How do I add a new alert?
- Pass a new list to alerts, with the newest first.
- What if there are lots of alerts?
- Only maxOpen show when open, with a count of the rest.
- Can it sit on the left?
- Yes. Set corner to bottom-left.
