Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Toast Notification Stack Hero Features Block for Solid

A features section for a notifications service: copy and one Shine Button beside a tinted panel with a stack of five toasts that rests collapsed and opens into a list on hover, focus or an Expand button, each toast dismissible.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A features section for Solid with Ark UI, where a burst of alerts folds into one stack. The pitch, the one Shine Button and a text link sit at the start for Pingboard, a notifications service. Past a split divider, in a tinted panel that runs to the end rail, five toasts rest as a stack: the front toast in full, edges of the ones behind it showing. The stack opens into a list when a mouse is over the panel, when focus is inside it and when you press the Expand button. Each toast has a status icon, a title, a line, its age, an action link and a dismiss button that removes it for real; when all are gone the panel offers to bring them back. It's buttons, a badge and the Guides line kit, with your theme's tokens for every colour. For notification, alerting and inbox products.

FAQ

What opens the stack?

Three things: a mouse over the panel, keyboard or touch focus inside it (tabbing to a toast's first control opens it), and the Expand button, which carries aria-expanded and stays open until you press it again. It closes when the pointer leaves, focus leaves and the button is off. A touch screen has no hover, so there it opens from the button or from a tap on a toast's controls.

Do the dismiss buttons really work?

Yes. A dismissed toast fades out and the rest close ranks; focus moves to the next toast's dismiss button so a keyboard user never loses their place, and a polite status line says what was dismissed and how many are left. With none left, the panel says so and offers "Show them again", which brings all five back. Nothing is saved: a reload starts over.

Is this the catalog's toast?

No. It draws its own stack of cards to show the idea. For toasts that your code raises, use the Toast or Sonner component; this block is the marketing picture of a stack, built from real buttons and links.

Does the page move when the stack opens?

No. The stage has one fixed height, as tall as the five toasts opened, and the toasts are positioned inside it, so the panel and the block keep their size whatever the stack does. A faint skeleton page behind them keeps the collapsed stack from floating in empty space.

What moves, and what happens with reduced motion?

The copy fades up once on load, and the toasts slide, scale and fade between collapsed, open and dismissed over 300 milliseconds. With reduced motion all of it is off: the stack jumps between its states.

How does it fit on a phone?

The panel sits under the copy at the same fixed height, with the Expand button in its header. Titles and lines are truncated to one line each in a narrow toast, but the full text is in the page for a screen reader.

All 170 features blocks