Zero Email components for mdxui - AI-powered email client UI
npm install @mdxui/zeroAI-powered email client components for mdxui. Provides a complete email application UI including mail lists, thread display, composition, and dashboard layouts.
``bash`
pnpm add @mdxui/zero
`tsx
import { MailZeroPage } from '@mdxui/zero'
function App() {
return (
initialFolders={folders}
initialLabels={labels}
user={{ name: 'John', email: 'john@example.com.ai' }}
/>
)
}
`
``
@mdxui/zero
├── /mail # Core mail components
│ ├── MailList # Thread list with selection
│ ├── MailItem # Individual thread item
│ ├── ThreadDisplay # Full thread view
│ └── MessageView # Single message display
├── /compose # Email composition
│ └── EmailComposer # Full compose UI with toolbar
├── /dashboard # Layout components
│ ├── MailShell # Three-panel resizable layout
│ └── MailSidebar # Folder/label navigation
├── /landing # Landing page components
└── /pages # Complete page compositions
└── MailZeroPage # Full email app with state
Complete email application with internal state management. Use this for a full email experience.
`tsx
import { MailZeroPage } from '@mdxui/zero'
initialFolders={folders}
initialLabels={labels}
initialFolderId="inbox"
user={{ name: 'John Doe', email: 'john@example.com.ai' }}
/>
`
All interactions (reply, archive, delete, etc.) are handled internally. Check the browser console for action logs.
Three-panel resizable layout combining sidebar, mail list, and thread display. Use when you need custom state management.
`tsx
import { MailShell } from '@mdxui/zero/dashboard'
folders={folders}
activeFolderId="inbox"
onFolderClick={(folderId) => setActiveFolder(folderId)}
// List props
threads={threads}
onThreadClick={(thread) => setActiveThread(thread)}
// Thread display props
activeThread={activeThread}
onReply={(messageId) => openComposer({ replyTo: messageId })}
onArchive={() => archiveThread(activeThread.id)}
/>
`
Thread list with selection, virtualization, and keyboard navigation.
`tsx
import { MailList } from '@mdxui/zero/mail'
selectedIds={selectedIds}
activeId={activeId}
selectionMode="multiple"
displayMode="comfortable"
onThreadClick={(thread) => setActiveThread(thread)}
onSelectionChange={(ids) => setSelectedIds(ids)}
/>
`
Full thread view with message list and actions.
`tsx
import { ThreadDisplay } from '@mdxui/zero/mail'
onReply={(messageId) => openComposer({ replyTo: messageId })}
onReplyAll={(messageId) => openComposer({ replyAllTo: messageId })}
onForward={(messageId) => openComposer({ forward: messageId })}
onSnooze={(isoDate) => snoozeThread(thread.id, isoDate)}
onMove={(folderId) => moveThread(thread.id, folderId)}
onLabel={(labelIds) => labelThread(thread.id, labelIds)}
/>
`
Rich email composition with toolbar, recipient input, and AI assistance.
`tsx
import { EmailComposer } from '@mdxui/zero/compose'
initialDraft={{ to: [], subject: '', body: '' }}
onSend={(draft) => sendEmail(draft)}
onSaveDraft={(draft) => saveDraft(draft)}
onDiscard={() => closeComposer()}
/>
`
All callbacks receive appropriate context:
| Callback | Signature | Context |
|----------|-----------|---------|
| onReply | (messageId: string) => void | Reply to specific message |onReplyAll
| | (messageId: string) => void | Reply-all to specific message |onForward
| | (messageId: string) => void | Forward specific message |onSnooze
| | (isoDate: string) => void | Snooze until date |onMove
| | (folderId: string) => void | Move to folder |onLabel
| | (labelIds: string[]) => void | Toggle labels |onThreadClick
| | (thread: Thread) => void | Thread object |onFolderClick
| | (folderId: string) => void | Folder ID |
Thread-level actions (archive, delete, spam, star, print) are void callbacks - the parent tracks the active thread.
Types are defined in mdxui package:
`tsx`
import type {
MailThread as Thread,
MailMessage as Message,
Folder,
MailLabel as Label,
MailShellProps,
ThreadDisplayProps,
MailListProps,
} from 'mdxui'
`bashType check
pnpm --filter @mdxui/zero typecheck
This package currently provides UI components only. It lacks the full app infrastructure found in Mail-0/Zero:
- No react-router integration
- No state management (jotai/react-query)
- No data layer / API integration
- No proper page routing
See ARCHITECTURE.md for the target architecture and implementation plan.
Components ported from Mail-0/Zero, an AI-powered email client.