Inbox and email
A three-pane mail surface and a chat surface beside it. The reading and composing patterns, without a mail server.
⚠️ Pro edition
These screens are in the Pro download. The free edition ships the design system and the demo, not the application screens.
The screens
3 screens, at these routes in your download. Open them beside this page.
| Route | Screen | What it is for |
|---|---|---|
| /inbox | Inbox | Folder list, message list and reading pane, with selection and bulk actions. |
| /inbox-details | Message | One thread: participants, attachments, quoted history and the reply composer. |
| /chat | Chat | Conversations, presence and a composer, on the same shell. |
What you get
- The three-pane layout that survives a narrow window, collapsing to list then detail rather than scrolling sideways.
- Read, unread, starred and selected as real states on the list.
- A composer with attachments, and an attachment list that shows type and size.
What you connect
These are interfaces, not an application.They render, they hold their own state, and they talk to nothing. Everything below is your application's, and none of it is supplied.
- Mail. Nothing is sent, received, synced or stored. There is no IMAP, SMTP or provider anywhere in this.
- Realtime. Chat presence and delivery are rendered states, not a socket.
- Attachments. Files are chosen and listed. No upload target exists.
- Search. The box filters the demo messages in memory.
Built from
Nothing here is a one-off. Each screen composes the same families documented in the reference, so changing a token moves them with the rest of the product.
avatar, badge, scroll-area, textarea, dropdown-menu.
Next
A customer screen, end to end builds one of these from an empty route, and Theming is how you make them look like yours.