Inbox 01

New

An email-style inbox in three resizable columns: folders and labels, a searchable message list with unread and starred rows, and a reading pane with the thread and a reply box; on a phone it becomes list then message.

Installation

pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/inbox-01.json

Needs a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.

Files

What the command adds to your project, and where.

app/inbox/page.tsx
The page itself, at the route it is meant for. Move or rename it to suit your app.
components/inbox-01/compose-dialog.tsx
A component the page imports. Edit it freely.
components/inbox-01/folder-nav.tsx
A component the page imports. Edit it freely.
components/inbox-01/icons.tsx
A component the page imports. Edit it freely.
components/inbox-01/inbox-data.ts
A component the page imports. Edit it freely.
components/inbox-01/inbox.tsx
A component the page imports. Edit it freely.
components/inbox-01/message-list.tsx
A component the page imports. Edit it freely.
components/inbox-01/reading-pane.tsx
A component the page imports. Edit it freely.

It also installs the components it is built from, unless you already have them: Avatar, Button, Dialog, Input, Label, Native Select, Resizable, Textarea.

Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.

More in Inbox

Inbox 02A support-ticket inbox: queue filters, tickets ordered by a live SLA countdown, a conversation that keeps customer messages, replies and internal notes apart, a macros menu and a customer panel.

See all 2 Inbox blocks