ns-ui / toast-newton-cradle
0 pushed · a new toast strikes the stack, the shunt travels down 35ms per row, and past 3 the oldest gets ejected — F6 jumps focus here, Escape dismisses, hover/focus pause the clock
ns-ui / loud
A toast stack that behaves like a Newton's cradle: a new toast swings in and strikes the queue, a fast domino of shunts carries the impact down the stack, and past capacity that momentum visibly ejects the oldest toast off the far end.
Use when A toast/notification queue with a hard visible cap where the eviction itself needs to read as caused, not just as a card disappearing: momentum transfer is the entire identity here, an accelerating arrival strikes the stack and a staggered 2-3px shunt visibly carries that impact down to whichever toast gets ejected. Reach for toast-gravity-stack instead when the register should be a jostling gravity pile with drag-to-dismiss and mass-by-severity sorting, or status-glyph-cadence when the job is a single inline status glyph rather than a queue of dismissible cards.
Install
npx shadcn add https://design.helpmarq.comns-ui / toast-newton-cradle
0 pushed · a new toast strikes the stack, the shunt travels down 35ms per row, and past 3 the oldest gets ejected — F6 jumps focus here, Escape dismisses, hover/focus pause the clock
| Prop | Type | Default | Description |
|---|---|---|---|
| maxVisible? | number | 4 | how many toasts the stack shows before the impulse starts ejecting |
| duration? | number | 5000 | ms before a toast auto-dismisses (paused on hover/focus); 0 disables |
| initial? | ImpulseToastInput[] | — | toasts present at mount |
| className? | string | "w-full max-w-sm" | — |
| aria-label? | string | "Notifications" | — |