Zum Inhalt springen
UI Kit
Accent

Inbox und Messages

Mail, Chat, Support-Tickets und geteilte Teampostfächer als vollständige Bildschirme. Telefone zeigen jeweils einen Bereich mit Weg zurück.

5 Variants
Kategorie wechseln

Posteingang

Mail in drei Spalten

Ordner und Labels in der Seitenleiste, eine gruppierte Liste mit Pfeiltasten und ein Lesebereich mit Verlauf, Anhängen und Antwortvorschlägen.

Chat

Angeheftete und letzte Unterhaltungen, gruppierte Blasen mit Reaktionen und Fotos, Tipp-Anzeige und eine Detailspalte mit Mitgliedern und Dateien.

Support-Tickets

Eine Warteschlange mit Priorität und Antwortzeit, das Ticket mit internen Notizen, Statusmenüs und einer Kundenspalte, die auf kleineren Bildschirmen ins Ticket wandert.

Geteilte Postfächer

Teampostfächer als Reiter, Filter für meine und offene, Zuweisung aus einem Menü und ein Hinweis, wenn jemand dieselbe Unterhaltung offen hat.

Sortieren mit Wischgesten

Auf dem Telefon nach rechts wischen archiviert, nach links stellt zurück. Auf der Tastatur bewegen die Pfeile, E archiviert und S stellt zurück, jede Aktion lässt sich rückgängig machen.

Details

Was Posteingang mitbringt, aus Registry und Quellcode gelesen.

Bereich
App
Variants
5
Version
1.0.2 · seit 1.0.0
Datei
components/ui/inbox.tsx
Bringt mit
utilskitbuttoniconicon-buttonsidebar
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 104 eigene Texte
Studio
Im Code anpassen
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle InboxProps aus components/ui/inbox.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    InboxVariant

    mailchatsupportsharedtriage

  • sidebaroptional
    Omit<SidebarProps, 'children'>

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

  • titlePflicht
    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.

Eingebaute Texte

Diese Texte schreibt Posteingang selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 104 Texte anzeigen
searchEnglisch SearchDeutsch Suchen
searchMailEnglisch Search mailDeutsch E-Mails durchsuchen
allEnglisch AllDeutsch Alle
unreadEnglisch UnreadDeutsch Ungelesen
listEnglisch MessagesDeutsch Nachrichten
archiveEnglisch ArchiveDeutsch Archivieren
deleteEnglisch DeleteDeutsch Löschen
snoozeEnglisch SnoozeDeutsch Zurückstellen
moveEnglisch Move toDeutsch Verschieben nach
markUnreadEnglisch Mark as unreadDeutsch Als ungelesen markieren
replyEnglisch ReplyDeutsch Antworten
replyToEnglisch Reply to {name}Deutsch {name} antworten
forwardEnglisch ForwardDeutsch Weiterleiten
starEnglisch StarDeutsch Markieren
unstarEnglisch Remove starDeutsch Markierung entfernen
moreEnglisch More actionsDeutsch Weitere Aktionen
backEnglisch BackDeutsch Zurück
previousEnglisch PreviousDeutsch Vorherige
nextEnglisch NextDeutsch Nächste
positionEnglisch {n} of {total}Deutsch {n} von {total}
attachmentsEnglisch {n} attachmentsDeutsch {n} Anhänge
downloadEnglisch Download {name}Deutsch {name} herunterladen
toMeEnglisch to meDeutsch an mich
sendEnglisch SendDeutsch Senden
sendCloseEnglisch Send and closeDeutsch Senden und schließen
writeEnglisch Write a replyDeutsch Antwort schreiben
writeMessageEnglisch Message {name}Deutsch Nachricht an {name}
attachEnglisch Attach a fileDeutsch Datei anhängen
templateEnglisch Insert templateDeutsch Textbaustein einfügen
typingEnglisch {name} is typingDeutsch {name} schreibt
seenEnglisch SeenDeutsch Gesehen
discardEnglisch Discard draftDeutsch Entwurf verwerfen
earlierEnglisch {n} earlier messagesDeutsch {n} frühere Nachrichten
archivedEnglisch Conversation archivedDeutsch Unterhaltung archiviert
snoozedMsgEnglisch Snoozed until tomorrow, 8:00Deutsch Zurückgestellt bis morgen, 8:00
deletedEnglisch Moved to trashDeutsch In den Papierkorb verschoben
undoEnglisch UndoDeutsch Rückgängig
emptyEnglisch Nothing here. Enjoy the quiet.Deutsch Hier ist nichts. Genieß die Ruhe.
conversationsEnglisch ConversationsDeutsch Unterhaltungen
pinnedEnglisch PinnedDeutsch Angeheftet
allChatsEnglisch All chatsDeutsch Alle Chats
newMessageEnglisch New messageDeutsch Neue Nachricht
callEnglisch Start callDeutsch Anruf starten
videoEnglisch Start video callDeutsch Videoanruf starten
detailsEnglisch DetailsDeutsch Details
hideDetailsEnglisch Hide detailsDeutsch Details ausblenden
membersEnglisch MembersDeutsch Mitglieder
filesEnglisch Shared filesDeutsch Geteilte Dateien
onlineEnglisch OnlineDeutsch Online
offlineEnglisch AwayDeutsch Abwesend
membersCountEnglisch {n} membersDeutsch {n} Mitglieder
reactEnglisch Add reactionDeutsch Reaktion hinzufügen
ticketsEnglisch TicketsDeutsch Tickets
statusEnglisch StatusDeutsch Status
priorityEnglisch PriorityDeutsch Priorität
assigneeEnglisch AssigneeDeutsch Zuständig
assignEnglisch AssignDeutsch Zuweisen
assignToEnglisch Assign toDeutsch Zuweisen an
unassignedEnglisch UnassignedDeutsch Nicht zugewiesen
mineEnglisch MineDeutsch Meine
openEnglisch OpenDeutsch Offen
pendingEnglisch PendingDeutsch Wartend
snoozedEnglisch SnoozedDeutsch Zurückgestellt
closedEnglisch ClosedDeutsch Geschlossen
urgentEnglisch UrgentDeutsch Dringend
highEnglisch HighDeutsch Hoch
normalEnglisch NormalDeutsch Normal
lowEnglisch LowDeutsch Niedrig
slaLeftEnglisch {time} leftDeutsch noch {time}
slaBreachedEnglisch Overdue {time}Deutsch seit {time} überfällig
customerEnglisch CustomerDeutsch Kunde
showCustomerEnglisch Show customer detailsDeutsch Kundendaten zeigen
planEnglisch PlanDeutsch Tarif
sinceEnglisch Customer sinceDeutsch Kunde seit
valueEnglisch ValueDeutsch Umsatz
locationEnglisch LocationDeutsch Ort
localTimeEnglisch Local timeDeutsch Ortszeit
historyEnglisch Earlier ticketsDeutsch Frühere Tickets
tagsEnglisch TagsDeutsch Schlagwörter
replyTabEnglisch ReplyDeutsch Antwort
noteTabEnglisch Internal noteDeutsch Interne Notiz
noteHintEnglisch Only your team sees this note.Deutsch Diese Notiz sieht nur dein Team.
internalEnglisch Internal noteDeutsch Interne Notiz
viaEnglisch via {channel}Deutsch über {channel}
emailEnglisch EmailDeutsch E-Mail
chatEnglisch ChatDeutsch Chat
phoneEnglisch PhoneDeutsch Telefon
formEnglisch FormDeutsch Formular
viewingEnglisch {names} viewingDeutsch {names} schaut gerade
viewingNowEnglisch {names} also has this open. Check before you reply.Deutsch {names} hat diese Unterhaltung auch offen. Kurz abstimmen, bevor du antwortest.
inboxesEnglisch InboxesDeutsch Postfächer
doneEnglisch Mark as doneDeutsch Als erledigt markieren
mentionEnglisch Mention someone with @Deutsch Mit @ jemanden erwähnen
swipeHintEnglisch Swipe right to archive, left to snooze.Deutsch Nach rechts wischen archiviert, nach links stellt zurück.
keyHintEnglisch Arrow keys move, E archives, S snoozes, Enter opens.Deutsch Pfeiltasten bewegen, E archiviert, S stellt zurück, Enter öffnet.
shortcutsEnglisch ShortcutsDeutsch Tastenkürzel
triagedEnglisch Triaged todayDeutsch Heute sortiert
leftEnglisch {n} leftDeutsch noch {n}
zeroEnglisch Inbox zero. Everything is sorted.Deutsch Posteingang leer. Alles ist sortiert.
keyArchiveEnglisch ArchiveDeutsch Archivieren
keySnoozeEnglisch SnoozeDeutsch Zurückstellen
keyOpenEnglisch OpenDeutsch Öffnen
keyMoveEnglisch MoveDeutsch Bewegen
keyUndoEnglisch UndoDeutsch Rückgängig

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Posteingang reagiert selbst auf die Tasten Escape, Enter, Pfeil hoch, Pfeil runter, Pfeil links, Pfeil rechts, Pos1, Ende, Tab, Entf und Leertaste.
  • Setzt aria-checked, aria-controls, aria-current, aria-expanded, aria-haspopup, aria-label, aria-live, aria-pressed und aria-selected, damit Screenreader Zweck und Zustand ansagen.
  • Nutzt die Rollen log, menu, menuitemradio, radio, radiogroup, separator, status, tab und tablist.
  • Meldet Änderungen über eine Live-Region, ohne den Fokus zu verschieben.
  • Jedes Feld hat ein Label, sichtbar oder für Screenreader.
  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Zeigt bei Bedienung mit der Tastatur einen sichtbaren Fokusring.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 3 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Posteingang?

Mit aiw add @ai-website/inbox. Der Befehl legt die Datei components/ui/inbox.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind button, icon, icon-button und sidebar. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Posteingang?

5 Varianten, Mail in drei Spalten, Chat, Support-Tickets, Geteilte Postfächer und Sortieren mit Wischgesten. Du wählst sie mit der Prop variant, zum Beispiel variant="chat".

Kann ich die Texte von Posteingang übersetzen?

Ja. Posteingang bringt 104 eigene Texte auf Deutsch und Englisch mit, etwa „Suchen“, „E-Mails durchsuchen“ und „Alle“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Posteingang einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Posteingang mit aiw_components und installieren sie mit aiw_add @ai-website/inbox. Nenn im Prompt die Variante, etwa variant="mail", dann schreibt der Assistent deine Inhalte direkt in die Props.

Ähnliche Components

Mehr aus App, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Inbox und Messages stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert