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 Screens 3 /mail-client/compose [New tab](https://agentic-ui-kit.com/mail-client/compose)[Try a theme](https://agentic-ui-kit.com/themes) ## 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 Radix UI project ``` npx shadcn@4.17.0 add @agentic-ui/blueprint-mail-client ``` Checked: installs and builds in a clean Next.js project. Base UI project ``` npx shadcn@4.17.0 add @agentic-ui/blueprint-mail-client ``` Checked: installs and builds in a clean Next.js project. Your project must be connected to the private registry first: [installation guide](https://agentic-ui-kit.com/docs#start-from-blueprint). ## Components it uses - [App Shell Mail Client Shell](https://agentic-ui-kit.com/components/mail-client-shell) - [Inbox Mail Client Inbox](https://agentic-ui-kit.com/components/mail-client-inbox) - [Thread List Mail Client Thread List](https://agentic-ui-kit.com/components/mail-client-thread-list) - [Bulk Actions Data Bulk Action Bar](https://agentic-ui-kit.com/components/data-bulk-action-bar) - [Conversation Mail Client Thread](https://agentic-ui-kit.com/components/mail-client-thread) - [Suggestion Chips AI Suggestion Chips](https://agentic-ui-kit.com/components/ai-suggestion-chips) - [Mention Input Form Mention Input](https://agentic-ui-kit.com/components/form-mention-input) - [Compose Mail Client Compose](https://agentic-ui-kit.com/components/mail-client-compose) - [Rich Text Editor Editor Rich Text Tiptap](https://agentic-ui-kit.com/components/editor-rich-text-tiptap) - [Recipient Input Form Tag Input](https://agentic-ui-kit.com/components/form-tag-input) - [Search Mail Client Search](https://agentic-ui-kit.com/components/mail-client-search) - [Date Range Form Date Range Picker](https://agentic-ui-kit.com/components/form-date-range-picker) - [Contacts Mail Client Contacts](https://agentic-ui-kit.com/components/mail-client-contacts) - [Settings Mail Client Settings](https://agentic-ui-kit.com/components/mail-client-settings) - [Shortcuts Sheet Util Shortcuts Overlay](https://agentic-ui-kit.com/components/util-shortcuts-overlay) - [Command Palette Motion Command Palette Spring](https://agentic-ui-kit.com/components/motion-command-palette-spring)