Inbox List Pane
The full inbox grouped under Today and Earlier, read rows muted.
The full inbox grouped under Today and Earlier, read rows muted.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? 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.