Inbox triagePro
Process a focused inbox with archive, snooze, and restore actions.
Live block · sample data
- A queue of messages or requests that need archive, snooze, or restore decisions.
- Inboxes where rows expand in place to show details and actions.
- Use inbox-sidebar for mail navigation with folders and counts.
- Use notification-center for system notifications.
- Use swipe-actions for touch-first lists with gesture actions.
Installation
Pro source and install commands unlock with a Pro plan.
Usage
Use this pattern when messages need clear next actions. Connect the demo folder state to your own message service.
example.tsx
import { InboxTriage } from "@/registry/blocks/inbox-triage/inbox-triage"; export function Messages() { return <InboxTriage />;}InboxTriage
Inbox, Snoozed, and Archive tabs with messages that expand in place, an Unread filter, archive, snooze, and restore actions with single-key shortcuts, and an undo for the last move. Takes no props; messages are sample data.
No props.
- ArrowLeftorArrowRight
- Switch folders in the tab list.
- ArrowUporArrowDown
- Move between message rows.
- EnterorSpace
- Expands or collapses the focused message and marks it read.
- E
- Archives the focused message (outside Archive).
- S
- Snoozes the focused message (in Inbox).
- U
- Moves the focused message back to Inbox (in Snoozed or Archive).
- Folders are a tablist with arrow key navigation; the list is its tabpanel.
- Message rows toggle with aria-expanded and aria-controls and declare their shortcuts with aria-keyshortcuts.
- After a message leaves, focus moves to the next row, or to the heading when the list is empty; undo returns focus to the restored row.
- Moves are announced in a polite role="status" region; the Unread filter uses aria-pressed.
- Rows and message details open and collapse with height and opacity on the smooth spring.
- The folder indicator glides between tabs with a shared layoutId; the status line swaps with a short rise.
- Reduced motion removes height and travel and keeps plain fades.
- Container queries: below 560px rows switch to a two-line layout with a 32px avatar, subject and preview under the sender, and a short hint in the footer.
- Below 360px the unread count hides, tabs tighten, and detail text drops its avatar indent.
- Rows collapse with height animation; the list is not virtualized.
- Focus moves to the next row after an action on the next frame, without extra timers.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use when a queue of messages or requests needs clear next actions.
- No callbacks are exposed; replace initialMessages and the move() and undo() functions with calls to your message service.
- Composes Arc Avatar and Button.
The full library index for assistants is at /llms.txt.