Notification Stack
Notification stack that expands into a list. Pro · Animated components › Lists and people
Notifications gathered into a stack — the newest on top, a few edges peeking out below — that spreads into a list on hover, on tap or from its button, with every card sliding to its place (one layout animation, no render per frame). A dismissed card slides out before it is removed.
Installation
npx valyro-cli@latest login
npx valyro-cli@latest add notification-stacknpm install valyro-ui-pro
import 'valyro-ui-pro/styles.css';
import { NotificationStack } from 'valyro-ui-pro';Props
| Prop | Type | Default | |
|---|---|---|---|
items * | readonly NotificationStackItem[] | Cards, newest first. | |
expanded | boolean | Spread out into a list (true) or gathered into a stack. | |
defaultExpanded | boolean | false | Initial expanded when uncontrolled. |
onExpandedChange | (expanded: boolean) => void | Called with the new expanded when it changes. | |
onDismiss | (id: string) => void | Called after a card's dismiss animation; remove the item from items there. Without it cards have no dismiss button. | |
maxVisible | number | 3 | Cards that peek out under the top one while gathered (default 3). |
expandOnHover | boolean | true | Spread while a mouse hovers the stack (default true). |
animation | 'spring' | 'none' | 'spring' | spring (default): cards slide between the stack and the list; none: instant. |
labels | Partial<NotificationStackLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Pin List — Pinnable list: items glide between groups
- Todo List — Checklist with a wavy strike-through on done items
- Presence Avatars — Who’s online: avatars rearrange as status changes
- Toggle — Toggle button with a springy response
- Flip Button — Two-sided button that flips on a spring
- Liquid Button — Button that fills with “liquid” on hover
- Theme Toggler — Light/dark switch with a View Transitions reveal
- GitHub Stars Button — Repository link with a rolling star count
- Share Button — Button that fans out social icons
- Code Tabs — Code variants in tabs: npm, pnpm, bun, with copy
- Number Wheel — Number on a spinning wheel with neighboring values
- Radial Menu — Ring-shaped context menu on right-click
Previous: Pin List · Next: Todo List · All Animated components