Email-style rows with unread dots, star toggles, checkboxes, hover quick actions that replace the time and j/k keyboard navigation.
npx shadcn@latest add https://hyperblur.dev/r/inbox-list.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/inbox-list.tsx.
import { InboxList } from "@/components/hyperblur/inbox-list"
<InboxList onAction={(action, ids) => console.log(action, ids)} />| Prop | Type | Default | Description |
|---|---|---|---|
| messages | { id: string; sender: string; subject: string; preview: string; time: string; unread?: boolean; starred?: boolean }[] | defaultMessages | Messages to show, newest first. |
| title | string | "Inbox" | Heading shown in the header next to the unread count. |
| accent | string | "#2f7bff" | Color of the unread dot, checkboxes and selected rows. |
| onAction | (action: "open" | "star" | "archive" | "snooze" | "delete", ids: string[]) => void | Called for every action. Archive, Snooze and Delete also remove the rows with a collapse animation. |