Stacked toasts
Each new notification lands on top of the pile while older ones shrink back, with four on screen at most.
Settings
Code
<div class="uv-zstack"><button class="fire">Add notification</button><div class="pile"><div class="toast"><i>✦</i><span><b>Recent activity</b><small>The project was updated.</small></span></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Toasts
Where to use it
For moments when notifications arrive in bursts. Think of the order screen of a busy restaurant on a Friday night, or the dashboard of an online store during a sale: every new order lands on top and the previous ones step back without disappearing. Stacked toast notifications, in the style Sonner made popular in React apps.
The pile keeps the four latest and drops the oldest, so do not use it for anything people must not miss. Group repeats: “3 new orders” beats three identical cards. And add a way to clear them all once the rush is over.