Inbox Triage
Prov1.0.0A support queue you clear from the keyboard: done, snooze, unread and undo, with motion that keeps your place.
Build for your project
Code/install build
Usage
Import it and pass your content. The props that matter most are listed next.
Example
import { InboxTriage, type TriageItem } from "@/components/ui/notchset/blocks/inbox-triage";
export function Queue({ items }: { items: TriageItem[] }) {
return (
<InboxTriage
items={items}
onChange={(item: TriageItem) => fetch(`/api/conversations/${item.id}`, { method: "PATCH", body: JSON.stringify({ folder: item.folder, unread: item.unread }) })}
/>
);
}Props
items–{ id, initials, name, company, tag, subject, preview, body, time, unread, slaMinutes, folder, until? }[]folder is inbox, snoozed or done; slaMinutes under 60 reads in signal.
snooze–{ label, until }[]The three snooze choices (keys 1–3).
onChange–(item) => voidA conversation moved folder or changed read state.
Anatomy
- UNREAD ONLY keeps a row that's leaving visible until it has gone.
- Opening a message marks it read.
- Only the last move can be undone.
InboxTriagedata-slot="inbox-triage"Header, folder tabs, the keyboard-driven list and the undo footer.
Source
components/ui/notchset/blocks/inbox-triage.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
Build for your project
Code/install build
Installation
pnpm dlx shadcn@latest add @beautiful-ui-pro/inbox-triageNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Styles didn't apply?
The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.
For coding agents
Give your coding assistant the Markdown guide instead of screenshots.
Use it for
- Agents clearing a queue of conversations quickly
- Any inbox where done, snooze and undo matter
Use something else when
- Answering one ticket with context: use Support Console
- Thousands of rows: virtualise the list
Mistakes to avoid
- Persist moves on the server; the block updates at once
- Keep tags short: they never truncate
Agents find it by
- support inbox, helpdesk, ticket queue, email triage, keyboard shortcuts, snooze, zendesk, front, Notchset
Where agents read it
- Guide for this component: https://beautiful-ui.dev/md/inbox-triage.md
- Every component, for tools without MCP: /llms.txt
- MCP server:
https://beautiful-ui.dev/api/mcp(setup)
Behaviour
Keyboard
- J / K or ↑ ↓
- Move between conversations
- Enter
- Open the message inline
- E
- Done (back to the inbox from DONE)
- S then 1 2 3
- Snooze
- U
- Toggle unread
- Z
- Undo the last move
- Esc
- Close the message or the snooze row
Accessibility
- Folders are tabs with arrow-key movement; the list is a labelled group that names its keys
- The current row is aria-current, and a polite live line names it as you move
- S and E are buttons named with the person; every move is confirmed in the footer's live region
Motion
- Selection
- The ink bar glides to the row (260ms) and grows with an opened message
- Done / snooze
- The row slides right and fades, then folds (300ms)
- Undo
- The row comes back in from the left
- Folders
- The underline glides, its leading edge 80ms ahead
Responsive
- Under 640px (container width) the company and preview hide.
Performance
- Plain rows and CSS transitions; nothing runs while idle.
Changelog
v1.0.0 · 2026-10-04
First release
Part of
Included with Pro
Pro is in early access.
