Inbox triagePro
Process a focused inbox with archive, snooze, and restore actions.
- 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { InboxTriage } from 'animui/inbox-triage';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
Use this pattern when messages need clear next actions. Connect the demo folder state to your own message service.
import { InboxTriage } from "animui/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 animui Avatar and Button.
The full library index for assistants is at /llms.txt.