Notifications

Notification centre in a max-w-md shadcn/ui Card: the header carries an unread-count Badge and icon Buttons with Tooltips for "Mark all as read" and settings, Tabs switch between All, Unread and Mentions, and each row combines an Avatar, a sentence with the actor in bold, a relative time and an unread dot. Rows mark themselves read on click and empty tabs show a friendly caught-up state. Drop it into a sidebar, sheet or popover.

An app top bar with nav links, search and a Bell icon Button carrying an unread-count Badge; its Popover (open by default, aligned to the end, 24rem wide) groups notifications into Today and Yesterday and offers inline actions – Accept / Decline on a project invite and Reply under a quoted comment. The page behind shows a realistic issue list so the dropdown reads in context. Built with shadcn/ui Popover, Avatar, Badge and Button.

Full-page activity feed (max-w-3xl) for shadcn/ui: a header with unread count, pill-shaped filter chips for All, Mentions, Assigned and System with counts, date separators for Today and This week, and a vertical timeline whose rows use tinted chart-colour icon circles per event type with a small Avatar overlay. Comment events expand through a Collapsible preview with Reply and Open issue actions, and a "Load older activity" Button closes the list.

A Skeleton page placeholder (header, stat cards and a two-column content grid) with a stack of four toasts pinned to the bottom-right corner: success with a check icon, info with a Progress bar showing export progress, warning with an action Button and destructive with Undo. Each toast dismisses with an X and a "Reset toasts" link restores the stack. Composed from shadcn/ui Skeleton, Progress and Button, useful for documenting notification styles.