Notifications & Toasts

Build a toast stack with Sonner or a comparable headless primitive. Anchor bottom-right on desktop, bottom-center on mobile. Each toast: 360px wide, rounded-lg, surface fill with a subtle border, leading status icon (check / x / info), message in 13.5px, optional trailing action button (e.g. 'Undo'). Auto-dismiss after 4s with a hairline progress strip along the bottom of the toast that pauses on hover. Stack new toasts in front, push older ones backward with a slight scale-down and y-offset. Swipe right (or left) to dismiss with rubber-band friction.

Build a top banner alert component. Full-width strip pinned above the app header. Three severities (info, warning, danger) with corresponding background tint and leading icon. Content row: leading icon, message in 13.5px (single line on desktop, wraps on mobile), trailing CTA link or button, then a dismiss × button. For blocking banners (e.g. billing failure), no dismiss button. Only the resolve action. Persists dismissal in localStorage by banner id for transient banners. Slides down on mount with a 200ms ease-out.

Build an inline notice / callout component with 4 variants: note, tip, warning, danger. Each renders as a rounded-md panel with a 3px left accent bar in the variant color, a leading 16px icon, an optional title in 14px medium, and body content in 13.5px. Background is the variant color at 6% opacity, border at 12%. Variant prop controls icon and colors. Designed to be embedded in long-form content (docs, settings, MDX). No fixed positioning, no animations. Children render as the body so the notice can contain inline links, code, lists.

Build a notification center. Header has a bell icon with a tiny unread count badge (red dot or number). Click opens a dropdown panel (400px wide, rounded-2xl) anchored below the bell. Top: tabs 'All / Unread / Mentions' with an animated indicator. Below: scrollable list of notification rows. Each row has the actor's avatar, an action sentence ('Mira commented on Issue #321'), a relative timestamp, and an inline link to the source. Hovering a row tints it; clicking marks it read. Top-right of the panel: a 'Mark all 

Build a mobile snackbar. Position fixed bottom, padding-bottom env(safe-area-inset-bottom) + 16px. Width: calc(100% - 32px), max-width 480px, centered. Surface fill, rounded-lg, 14px text on the left and a single ghost action button on the right ('Undo', 'View', etc.). Auto-dismiss after 4 seconds. Slides in from below with a 200ms ease-out; reverses on dismiss. Swipe down dismisses with rubber-band drag. Only one snackbar visible at a time.

Build a promotional top banner. Slim full-width strip (40px tall) with an accent gradient (purple → pink). Centered content: a small emoji or sparkle icon, a 13px message ('Ship 2026 starts Tuesday - register'), and an inline 'Register →' link with arrow. Right-anchored × button dismisses. On dismiss, store the campaign ID in localStorage so it stays hidden for that user. Slide-in from top on mount (180ms).

Build a live presence indicator using a websocket presence channel (Liveblocks, Partykit, or your own). Top-right of the page renders a stack of up to 4 overlapping avatars with a '+N more' badge if there are extras. Each avatar has a colored ring matching the user's presence color. In the document body, render small cursor SVGs at each remote user's position, smoothly interpolated (lerped) toward target positions to avoid jitter. Hovering an avatar reveals a tooltip with the user's name; clicking jumps the viewpor

Build a progress toast. Pinned bottom-right, 380px wide, rounded-2xl, padding 16px. Top row: title ('Uploading 4 files'), spinner icon, phase label ('Encoding…') in 12px muted, close X on the right. Below: a thin progress bar that fills with percentage (or 'indeterminate' shimmer when unknown). On error, swap the spinner for a warning icon and show a 'Retry' button. On success, swap to a check icon, show 'Complete', and auto-dismiss after 3s. Stacks vertically with sibling progress toasts.

Build a pre-permission notification card. Rounded-2xl card, padding 24px, surface fill, max-width 420px. Top: a 32px bell icon. Headline 'Get notified when someone @mentions you' at 16px medium. Subtext (14px muted): one sentence explaining what events trigger notifications. Two buttons: primary 'Enable notifications' that calls Notification.requestPermission(), secondary 'Not now' that dismisses for 7 days. Never call requestPermission without this preamble.

Build a real-time activity feed. A vertical list where new events arrive via websocket and prepend to the top with a 220ms slide-down + brief highlight pulse on insert. Cap the visible list at 50 rows (older rows scroll off). Hovering anywhere in the feed pauses incoming inserts (queue them, flush on mouseleave). Each row: leading icon, actor avatar, action sentence, relative timestamp on the right.