Skip to content
UI Kit
Accent color

Inbox and messages

Mail, chat, support tickets and shared team inboxes as complete screens. Phones show one pane at a time with a way back.

5 variants
Switch category

Inbox

Three-pane mail

Folders and labels in the sidebar, a grouped list with arrow keys and a reading pane with thread, attachments and suggested replies.

Chat

Pinned and recent conversations, grouped bubbles with reactions and photos, typing indicator and a details column with members and files.

Support tickets

A queue with priority and response time, the ticket with internal notes, status menus and a customer column that folds into the ticket on smaller screens.

Shared inboxes

Team inboxes as tabs, filters for mine and unassigned, assignment from a menu and a notice when a colleague has the same conversation open.

Triage with swipe actions

Swipe right to archive and left to snooze on phones. On the keyboard arrows move, E archives and S snoozes, every action can be undone.

Details

What Inbox brings along, read from the registry and the source.

Area
App
Variants
5
Version
1.0.2 · since 1.0.0
File
components/ui/inbox.tsx
Brings along
utilskitbuttoniconicon-buttonsidebar
npm packages
None
Languages
English and German, 104 texts of its own
Studio
Adjust in code
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The InboxProps interface from components/ui/inbox.tsx, with the comments from the code.

  • variantoptional
    InboxVariant

    mailchatsupportsharedtriage

  • sidebaroptional
    Omit<SidebarProps, 'children'>

    The app frame, see Sidebar. Without it the screen stands on its own.

  • titlerequired
    string
  • subtitleoptional
    string
  • messagesoptional
    InboxMessage[]

    mail, support, shared, triage

  • conversationsoptional
    Conversation[]

    chat

  • inboxesoptional
    SharedInbox[]

    shared: the team inboxes

  • teamoptional
    string[]

    shared and support: people a conversation can be assigned to

  • meoptional
    string

    The signed-in person

  • selectedoptional
    string

    Id of the message or conversation open at the start

  • mobileViewoptional
    'list' | 'detail'

    Phones show one pane at a time. Which one comes first.

Built-in texts

Inbox writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 104 texts
searchEnglish SearchGerman Suchen
searchMailEnglish Search mailGerman E-Mails durchsuchen
allEnglish AllGerman Alle
unreadEnglish UnreadGerman Ungelesen
listEnglish MessagesGerman Nachrichten
archiveEnglish ArchiveGerman Archivieren
deleteEnglish DeleteGerman Löschen
snoozeEnglish SnoozeGerman Zurückstellen
moveEnglish Move toGerman Verschieben nach
markUnreadEnglish Mark as unreadGerman Als ungelesen markieren
replyEnglish ReplyGerman Antworten
replyToEnglish Reply to {name}German {name} antworten
forwardEnglish ForwardGerman Weiterleiten
starEnglish StarGerman Markieren
unstarEnglish Remove starGerman Markierung entfernen
moreEnglish More actionsGerman Weitere Aktionen
backEnglish BackGerman Zurück
previousEnglish PreviousGerman Vorherige
nextEnglish NextGerman Nächste
positionEnglish {n} of {total}German {n} von {total}
attachmentsEnglish {n} attachmentsGerman {n} Anhänge
downloadEnglish Download {name}German {name} herunterladen
toMeEnglish to meGerman an mich
sendEnglish SendGerman Senden
sendCloseEnglish Send and closeGerman Senden und schließen
writeEnglish Write a replyGerman Antwort schreiben
writeMessageEnglish Message {name}German Nachricht an {name}
attachEnglish Attach a fileGerman Datei anhängen
templateEnglish Insert templateGerman Textbaustein einfügen
typingEnglish {name} is typingGerman {name} schreibt
seenEnglish SeenGerman Gesehen
discardEnglish Discard draftGerman Entwurf verwerfen
earlierEnglish {n} earlier messagesGerman {n} frühere Nachrichten
archivedEnglish Conversation archivedGerman Unterhaltung archiviert
snoozedMsgEnglish Snoozed until tomorrow, 8:00German Zurückgestellt bis morgen, 8:00
deletedEnglish Moved to trashGerman In den Papierkorb verschoben
undoEnglish UndoGerman Rückgängig
emptyEnglish Nothing here. Enjoy the quiet.German Hier ist nichts. Genieß die Ruhe.
conversationsEnglish ConversationsGerman Unterhaltungen
pinnedEnglish PinnedGerman Angeheftet
allChatsEnglish All chatsGerman Alle Chats
newMessageEnglish New messageGerman Neue Nachricht
callEnglish Start callGerman Anruf starten
videoEnglish Start video callGerman Videoanruf starten
detailsEnglish DetailsGerman Details
hideDetailsEnglish Hide detailsGerman Details ausblenden
membersEnglish MembersGerman Mitglieder
filesEnglish Shared filesGerman Geteilte Dateien
onlineEnglish OnlineGerman Online
offlineEnglish AwayGerman Abwesend
membersCountEnglish {n} membersGerman {n} Mitglieder
reactEnglish Add reactionGerman Reaktion hinzufügen
ticketsEnglish TicketsGerman Tickets
statusEnglish StatusGerman Status
priorityEnglish PriorityGerman Priorität
assigneeEnglish AssigneeGerman Zuständig
assignEnglish AssignGerman Zuweisen
assignToEnglish Assign toGerman Zuweisen an
unassignedEnglish UnassignedGerman Nicht zugewiesen
mineEnglish MineGerman Meine
openEnglish OpenGerman Offen
pendingEnglish PendingGerman Wartend
snoozedEnglish SnoozedGerman Zurückgestellt
closedEnglish ClosedGerman Geschlossen
urgentEnglish UrgentGerman Dringend
highEnglish HighGerman Hoch
normalEnglish NormalGerman Normal
lowEnglish LowGerman Niedrig
slaLeftEnglish {time} leftGerman noch {time}
slaBreachedEnglish Overdue {time}German seit {time} überfällig
customerEnglish CustomerGerman Kunde
showCustomerEnglish Show customer detailsGerman Kundendaten zeigen
planEnglish PlanGerman Tarif
sinceEnglish Customer sinceGerman Kunde seit
valueEnglish ValueGerman Umsatz
locationEnglish LocationGerman Ort
localTimeEnglish Local timeGerman Ortszeit
historyEnglish Earlier ticketsGerman Frühere Tickets
tagsEnglish TagsGerman Schlagwörter
replyTabEnglish ReplyGerman Antwort
noteTabEnglish Internal noteGerman Interne Notiz
noteHintEnglish Only your team sees this note.German Diese Notiz sieht nur dein Team.
internalEnglish Internal noteGerman Interne Notiz
viaEnglish via {channel}German über {channel}
emailEnglish EmailGerman E-Mail
chatEnglish ChatGerman Chat
phoneEnglish PhoneGerman Telefon
formEnglish FormGerman Formular
viewingEnglish {names} viewingGerman {names} schaut gerade
viewingNowEnglish {names} also has this open. Check before you reply.German {names} hat diese Unterhaltung auch offen. Kurz abstimmen, bevor du antwortest.
inboxesEnglish InboxesGerman Postfächer
doneEnglish Mark as doneGerman Als erledigt markieren
mentionEnglish Mention someone with @German Mit @ jemanden erwähnen
swipeHintEnglish Swipe right to archive, left to snooze.German Nach rechts wischen archiviert, nach links stellt zurück.
keyHintEnglish Arrow keys move, E archives, S snoozes, Enter opens.German Pfeiltasten bewegen, E archiviert, S stellt zurück, Enter öffnet.
shortcutsEnglish ShortcutsGerman Tastenkürzel
triagedEnglish Triaged todayGerman Heute sortiert
leftEnglish {n} leftGerman noch {n}
zeroEnglish Inbox zero. Everything is sorted.German Posteingang leer. Alles ist sortiert.
keyArchiveEnglish ArchiveGerman Archivieren
keySnoozeEnglish SnoozeGerman Zurückstellen
keyOpenEnglish OpenGerman Öffnen
keyMoveEnglish MoveGerman Bewegen
keyUndoEnglish UndoGerman Rückgängig

Accessibility

Read from the source of the component.

  • Inbox handles the keys Escape, Enter, Arrow up, Arrow down, Arrow left, Arrow right, Home, End, Tab, Delete and Space itself.
  • Sets aria-checked, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-live, aria-pressed and aria-selected, so screen readers announce purpose and state.
  • Uses the roles log, menu, menuitemradio, radio, radiogroup, separator, status, tab and tablist.
  • Announces changes through a live region without moving focus.
  • Every field has a label, visible or for screen readers.
  • Adds text for screen readers where icons and graphics stand alone.
  • Shows a visible focus ring when used with the keyboard.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 3 places in the code switch motion off then.

Frequent questions

How do I install Inbox?

With aiw add @ai-website/inbox. The command puts components/ui/inbox.tsx into your project, the code is yours from then on. It brings along button, icon, icon-button and sidebar. It needs no further npm packages.

Which variants does Inbox have?

5 variants, Three-pane mail, Chat, Support tickets, Shared inboxes and Triage with swipe actions. You pick one with the variant prop, for example variant="chat".

Can I translate the texts of Inbox?

Yes. Inbox carries 104 texts of its own in English and German, such as “Search”, “Search mail” and “All”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Inbox?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Inbox with aiw_components and install it with aiw_add @ai-website/inbox. Name the variant in your prompt, for example variant="mail", and the assistant writes your content straight into the props.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Inbox and messages on a page.

Often searched

Jump to

Copied to the clipboard