Overlays & feedback

Notification

Q: How do I implement a Notification?

Add an in-app notification stack: cards slide in top-right with title, description, optional action, and close; newest first; pause auto-dismiss on hover; cap at 3 visible. Use role="status". Reserve the OS Notification API for background-tab events and only request permission on user gesture.

Rich reminder cards that slide into a screen corner—title, body, optional action, stackable.

Also known as notification card · toast stack · corner alert

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Notification".

Add an in-app notification stack: cards slide in top-right with title, description, optional action, and close; newest first; pause auto-dismiss on hover; cap at 3 visible. Use role="status". Reserve the OS Notification API for background-tab events and only request permission on user gesture.

Anatomy:
- title / message: First difference from a toast: it has a real title.
- description: One or two lines of detail.
- action: View / Undo—things a toast cannot hold.
- stack: Multiple cards share a corner; each closes on its own.

Preferred API / pattern: `sonner rich toasts / react-hot-toast custom / Radix Toast`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

○Avoid: Asking for system notification permission on first paint
○Avoid: Unlimited stacking
○Avoid: Timer keeps running on hover
○Avoid: Decisions that need an answer stuffed into a self-dismissing card
○Avoid: Confusing in-app cards with Notification.requestPermission

In plain wordsHow people search for it

“the card that slides in from the top-right with a title and body”“bigger than a toast, can have a button, sometimes I have to close it”“system-style messages stacking in the corner”

AnatomyOpen for part names

title / message: First difference from a toast: it has a real title.
description: One or two lines of detail.
action: View / Undo—things a toast cannot hold.
stack: Multiple cards share a corner; each closes on its own.

How to write itOpen for stack patterns

Web (HTML/CSS)role="status" + fixed stack / Notification API (OS-level)

React + Tailwind + shadcn/uisonner rich toasts / react-hot-toast custom / Radix Toast

SwiftUIoverlay banners / UNUserNotificationCenter for system

Ant Designnotification.open({ message, description, btn })

Notes

Three siblings: Toast (light, auto-gone, no title) → Notification (heavier, stay-able, rich) → Alert banner (inline, lasting state). Notifications fit async events unrelated to the click you just made—export finished, someone @’d you, background job failed. In-app cards need no permission; the OS Notification API does, and should only be requested after a user gesture.

Common mistakesHumans and models trip here

Asking for system notification permission on first paint: users refuse forever—ask after a related action.
Unlimited stacking: a batch of 50 becomes a waterfall—merge or cap.
Timer keeps running on hover: the user is mid-read when it vanishes.
Decisions that need an answer stuffed into a self-dismissing card: use a modal.
Confusing in-app cards with Notification.requestPermission: in-app needs no permission.

More failure symptoms on AI broke it.

Related patterns

Toast / SnackbarA brief, non-blocking status bar that appears after an action and dismisses itself.Alert / BannerAn in-page, persistent status strip—four severities, never traps the user in a dialog.BadgeA compact count or status mark attached to an icon, tab, or label.Modal DialogA centered window that blocks the page until the user responds.

Spotted a wrong name or missing pattern?

Message on X