shadcn.io is not affiliated with official shadcn/ui
Inset Notification Toast Preview CTA Block for React
A card-in-card call to action for a team inbox with a working notification tray: the pitch and a Shine Button beside a tray where a button fires toasts, newest on top, each with Undo and close.
Installation
Overview
A call to action that lets the visitor try the feature it sells. Between the page's solid rails, a muted shell with + marks on its corners holds one raised panel, split at a hairline: on the start side the headline, a line of pitch and a single Shine Button ("Try Fernbox free", the page's one primary control), on the end side a notification tray. A "Send a test notification" button drops a toast into the tray, newest on top, up to three at a time. Every toast has a title, a one-line message, a relative time, an Undo and a close button, and the ones you fire fade out on their own after six seconds. On a phone the tray stacks under the pitch, so the button stays on the first screen. It's built from Guides, Item, Button and Shine Button, with CSS transitions only and your theme's tokens, so it's light in a light theme and dark in a dark one. For products that send notifications, alerts or confirmations, and for any landing page where a toast you can fire beats a screenshot of one.
FAQ
How does the tray behave?
The test button adds the next sample from SAMPLES to the top of the tray, and the tray keeps at most three, so a fourth pushes the oldest out. A fired toast leaves after LIFETIME (six seconds). Hovering the tray or moving keyboard focus into it holds every timer, and leaving it starts the wait again from the top. Undo and the close button remove their toast at once. The tray reserves the height of a full stack of the widest toast, so adding or removing toasts never moves the page.
Why does the first toast stay put?
The card opens with one toast already shown, so a visitor, a screenshot or a page with no JavaScript sees a complete card instead of an empty tray. That first toast is marked sticky: it stays until someone dismisses it or newer toasts push it out. Every toast fired by the button times out.
What does Undo do, and how do I wire it to a real action?
In the preview Undo just removes the toast and announces "Undone". In your app, call your own reverse action from the onClick of the Undo button, then remove the toast. The same goes for the close button: it dismisses without reversing anything.
How do screen readers and keyboard users get on?
Every button has a name that includes the toast's title ("Undo: Invite sent", "Dismiss: Invite sent"), and the tray is a labelled region. One polite live region announces what happened: the new toast's title and message, or "Undone" or "Dismissed" with the title. The decorative icons are hidden. Toasts that time out are a timing risk, which is why focusing the tray holds them; if your toasts carry something people must act on, don't time them out.
Why isn't this the app-wide toast component?
The Toaster draws in a portal at the edge of the screen, which would leave the card empty and the poster blank. This block keeps the stack inside the card so the demo reads in place. For real app-wide toasts, use your toast provider; reuse ToastRow for the markup if you want the same look.
What animates, and what about reduced motion?
The card fades up once on load, and each new toast slides down a few pixels as it lands. Both are CSS transitions with no animation library, and they switch off with reduced motion. Removal is instant. The six-second timer still runs under reduced motion, since it is a timeout rather than an animation.
Related
- Pro
Feature Card Trio CTA
Pickers and togglesA split call to action on drafting lines for alert settings: a headline on one side of a hairline divider, and on the other three alert rows with a switch each, over a Shine Button whose label counts the alerts switched on.
- Pro
Light Chat Message Bubble CTA
Product previewsA reverse split CTA for a support assistant between solid rails: an ask-me chat window in a hairline frame at the start (pick a question, watch the assistant type, read its answer) and the headline, a sentence and the Shine Button at the end.
- Pro
Split Light Speech Bubble CTA
Social proofA split call to action built as a short chat: the headline at the start, and at the end a customer's quote in a bubble, answered by a reply bubble that holds the Shine Button to start free.
- Pro
Inset Star Rating Big CTA
Social proofA card-in-card call to action built on a rating summary: a headline and a Shine Button over a band with a big score and foreground stars beside a five-to-one star histogram, all figures worked out from the counts.
- Pro
Split Layout Notification Stack Hero
Stats and live dataA reverse split hero for a notifications product: a panel flush to the start rail with a stack of notification cards, then a divider, the headline, three checks and a Shine Button.
- Pro
Split Panel Address Bar CTA
Product previewsA reverse split CTA built around an editable address bar in a browser frame: type a name, see whether it is available and watch the page mirror it before you claim it with a Shine Button.