Search blocks by description or jump to a page.
The full inbox grouped under Today and Earlier, read rows muted.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? Log in
Inbox List Pane is the full inbox page pattern, six notifications divided into Today and Earlier group headers. Each row pairs the actor avatar with a verb line where the target renders in medium weight: Maya Chen mentioned you in Q3 launch plan, Riley Parker closed BUG-2381 Safari upload stall as fixed, Daniel Ross shared June board deck with you. Read rows dim the avatar and shift the text to text-muted-foreground so unread rows assert themselves. One row is frozen in its hovered state, the time swaps for an Archive button, so the affordance is visible in a screenshot without client interactivity. The page header gives the honest count, 2 unread.
Groups are one array of item arrays. Freezing a row in the hover state is the static-blueprint equivalent of a hover-to-reveal pattern.
Reach for this block on the dedicated inbox route, wired to your notifications endpoint with read state per user. The archive action should call a PATCH to mark the notification archived and remove it from the default view.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the personal inbox for a workspace product. Other list shapes:
Tip: the archive button replacing the time on hover is the cleanest way to surface the action without a column of permanent icon buttons cluttering every row.