# Inbox triage

> Keyboard-first triage: j/k to move, e to archive, s to snooze, with undo.

Block · Pro · https://lodeui.com/blocks/inbox-triage

## When to use

- Queues people clear quickly: email, support, approvals, moderation.

## When not to use

- Lists people browse rather than clear.

## Installation

```bash
npx shadcn@latest add @lode/inbox-triage
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion, lucide-react

## Usage

```tsx title="example.tsx"
import { InboxTriage } from "@/components/blocks/inbox-triage";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <InboxTriage />
    </main>
  );
}
```

Built from: Avatar group, Tabs

## API reference

### InboxTriage

Keyboard-first inbox triage with a reading pane, animated removal and undo. Also the default export. No props: sample data sits at the top of the file, ready to swap for your own.

No props.

## Keyboard interactions

| Keys | Action |
| --- | --- |
| J or ↓ | Next message |
| K or ↑ | Previous message |
| E | Archive |
| S | Snooze until tomorrow |
| U | Toggle unread |

## Accessibility

- The inbox is focusable and its label lists the shortcuts.
- Shortcuts are ignored while typing in a field.
- Undo appears after every move.

## Motion

- Archived rows collapse and the next one slides up.
- The selected-row marker glides between rows.

## Responsive behavior

- The reading pane sits under the list below 768px.

## Performance

- Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.

## Notes for AI

- Keep single-letter shortcuts scoped to the inbox element, not the window.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Avatar group](https://lodeui.com/components/avatar-group) — Overlapping avatars that spread apart on hover.