Blueprint
Mail Client
Superhuman and Gmail style team email client: a three-pane inbox with a folder and label sidebar, a virtualized conversation list (unread, starred, labels, snooze, attachments) and a reading pane; a conversation view with folded earlier messages, trimmed quotes, attachments, a summary, smart reply suggestions, an inline reply and internal team notes with @mentions; a compose window (docked, minimizable, or full screen) with recipient chips and autocomplete, a rich text editor, attachments, signatures, schedule send, undo send and saved drafts; search with operators, filter fields, a date range and saved searches; contacts; settings for accounts, signatures, labels, filter rules, keyboard shortcuts and density; and a command palette with a keyboard shortcuts sheet (j and k, e to archive, r to reply, c to compose, / to search).
- Screens
- 3
- Framework
- Next.js App Router · React 19 · Tailwind CSS 4 · shadcn/ui
- Variants
- Radix UI and Base UI
- Install
- One command, every screen
What is implemented
- The App Router routes above, each composed from catalog components. Interactive UI states such as menus, dialogs, filters and tabs work as in the viewer.
- Sample data that ships with each component, so the screens render without a backend.
- Light and dark themes.
What you supply
- Your data: API routes or a backend in place of the sample data. No backend is included.
- Authentication and authorization.
- Persistence: database, file storage and any server-side state.
- Business rules and server-side validation.
Install
npx shadcn@4.17.0 add @agentic-ui/blueprint-mail-clientnpx shadcn@4.17.0 add @agentic-ui/blueprint-mail-clientYour project must be connected to the private registry first: installation guide.
Components it uses
- App ShellMail Client Shell
- InboxMail Client Inbox
- Thread ListMail Client Thread List
- Bulk ActionsData Bulk Action Bar
- ConversationMail Client Thread
- Suggestion ChipsAI Suggestion Chips
- Mention InputForm Mention Input
- ComposeMail Client Compose
- Rich Text EditorEditor Rich Text Tiptap
- Recipient InputForm Tag Input
- SearchMail Client Search
- Date RangeForm Date Range Picker
- ContactsMail Client Contacts
- SettingsMail Client Settings
- Shortcuts SheetUtil Shortcuts Overlay
- Command PaletteMotion Command Palette Spring