Email

A mail client with folders, a searchable message list, a reading pane and a composer that opens over it.

Open a message, reply, or press Compose. Type @ in the body to mention someone.

Inbox

Installation


pnpm dlx shadcn@latest add https://anotherui.dev/r/email.json

Then render it on its own route:

app/mail/page.tsx

import { Email } from "@/components/blocks/email"
 
export default function MailRoute() {
  return <Email className="h-svh rounded-none border-0" messages={messages} onSend={send} />
}

Features

Three panes. Folders on the left, the message list in the middle and the open message on the right. The panes stack one at a time when the container is narrow, and the folders move into a Sheet.
Folders with counts. Inbox shows its unread count as a Badge. Starred collects starred mail from every folder except Trash.
Search and filter in one row. The search box matches the subject, the sender, the recipients and the body. All and Unread sit beside it in a Toggle Group.
A real reading pane. The body renders through a read only Rich Text Editor, so bold, links, quotes and mentions all show. Attachments are Attachment cards with a download action.
Quick actions. Archive, Move to Trash and Mark as unread each undo from the toast. Star uses the Favorite Button burst.
Reply and forward. Both open the composer with the subject and a quoted copy of the message filled in.
A floating composer. Compose opens the Email Composer in the corner. It minimises to its header, expands to fill the client, and saves drafts into Drafts. Sent mail lands in Sent.

Usage

import { Email, type EmailMessage } from "@/components/blocks/email"
 
const messages: EmailMessage[] = [
  {
    id: "1",
    folder: "inbox",
    from: { name: "Chloe Hertz", email: "hi@chloehertz.co", avatar: "/avatars/chloe.png" },
    to: [{ name: "Mia Hart", email: "mia@invoicely.app" }],
    subject: "Concepts for the mobile onboarding flow",
    body: "Hi Mia,\n\nThe new screens look great.",
    date: "2026-10-13T16:20:00Z",
    unread: true,
  },
]
 
<Email
  messages={messages}
  accounts={[{ name: "Mia Hart", email: "mia@invoicely.app" }]}
  contacts={contacts}
  onSend={async (draft) => {
    await fetch("/api/send", { method: "POST", body: JSON.stringify(draft) })
  }}
/>

Props

messages. The mail to show. Each has a folder, from, to, optional cc, subject, a markdown body, an ISO date, and optional unread, starred, label and attachments. Without it the block shows sample mail.
accounts. The addresses you can send from, shown in the sidebar switcher and the composer.
contacts. Offered as you type a recipient and for @mentions.
onSend. Runs with the draft when you press Send: from, to, cc, bcc, subject, the body as markdown and HTML, and the attached files.
onUpload. Sends each attachment, with an onProgress callback and an abort signal, like File Upload.

Agreement Sign Email Composer

On This Page

Installation Features Usage Props