Notification
Persistent row for a notification center/inbox.
Basic
New comment
2m agoKenji replied to your PR.
Deploy complete
1h agov1.4.0 is live.
Activity inbox
avatar shows who, badge marks the event kind, media is a thumbnail of the thing it happened to, and layout='inline' runs the name into the event text.
Priya Natarajan liked your post · 2 min
UnreadKenji Sato commented on ORD-1042 “Can we ship this by Friday?” · 1 h
Alert cards
The default stacked layout reads as an alert: icon puts an app or category glyph in the leading disc, with the description and timestamp on their own lines.
Payment received
09:12Invoice INV-2041 was paid in full.
New sign-in
YesterdayChrome on macOS, from Lisbon.
- icon is ignored when avatar is given - a row shows who or what, not both
API reference
What happened, in a few words.
The sender's `<Avatar />` (or any 40px node) in place of the icon disc.
A small glyph pinned to the corner of the avatar/icon - the kind of event (a heart for a like, a speech bubble for a mention).
The detail under the title.
Glyph for the leading disc - an app or category icon. Ignored when `avatar` is given.
`"stacked"` (default): title, description, timestamp on separate lines (an alert). `"inline"`: one sentence, "**Ava** liked your post · 2h" (an activity feed).
A thumbnail of the thing the notification is about, on the trailing edge.
When it happened - already formatted ("2h ago"), since this renders it verbatim.
Unread: a dot on the leading edge and a bolder title.
Also accepts everything from Omit<React.HTMLAttributes<HTMLDivElement>, "title">.
Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent