Skip to content
UI Kit
Accent color

Team collaboration UI for apps

Messenger, team members and roles, activity logs and a text editor.

4 components · 20 variants
Switch category

Everything a team does together

Collaboration screens hold a team together inside a product, who talks to whom, who may do what, what changed and what gets written. The four components here cover those four jobs and fit into the app frame of the kit with its sidebar and phone layouts.

Messenger shows a chat list next to the open chat, a single conversation with a pinned message, a channel with threads, a floating messenger and a search across every conversation. Team management lists members with roles and bulk changes, invites people with checked email chips, edits roles and rights, shows teams as a tree and counts seats. Activity log draws a timeline by day, an audit table with before and after and CSV export, the history of one record, a narrow side feed and a summary per day or week. Rich text editor writes a document with a full toolbar, a comment with mentions, Markdown with preview, a quiet page with a selection toolbar and an email with undo send.

Give every action a trace, a change in the activity log, a message in the thread, then people trust shared work. Keep roles few and named after what people do, three or four cover most teams. Every list here has its own phone layout, so the team stays reachable on the go.

On this page

Every component of this category. Pick one to jump to its variants.

activity-log

Activity log

Activity screens for apps. A timeline by day with filters, an audit table with before and after, record history with restore, a side feed and a summary.

Props and details · Activity log

TimelineNew in 1.2

Everything by day on a line, filtered by person, kind, period and words, with comments quoted and changes as from and to.

Audit tableNew in 1.2

Who did what, where and when, sortable and paged, each row opens before and after with device and address, and the view exports as CSV.

Record historyNew in 1.2

The current values of one record beside every change field by field, filtered by field, and an old value restored with one click.

Side feedNew in 1.2

A narrow feed beside the work with a mark for what is new, a tab for what concerns you, short times and more on request.

SummaryNew in 1.2

Changes, comments, new items and active people per day or week compared with before, a chart, the most active people and the busiest items.

messenger

Messenger

Messaging for apps. Chats with replies, reactions, photos, files and voice, typing and read status, channels with threads, a floating messenger and search.

Props and details · Messenger

List and chatNew in 1.2

Conversations with search, unread filter and typing next to the open chat. Phones switch between both with a back button.

ConversationNew in 1.2

One chat with day dividers, a pinned message, a mark for new messages, a jump to the latest and the shared files beside it.

Channel with threadsNew in 1.2

A team channel as rows with names and roles, answers in a thread beside it and the members by presence.

Floating messengerNew in 1.2

A launcher with the unread count, a small panel with the chats and a compact conversation. Escape closes it, phones get the full screen.

rich-text-editor

Rich text editor

Text editing without a package. A document with full toolbar and word count, comments with @ mentions, Markdown with preview, a selection toolbar and email.

Props and details · Rich text editor

DocumentNew in 1.2

A full toolbar with headings, lists, quote, code, link and alignment, active states from the selection, shortcuts, autosave, words and reading time.

Comment with mentionsNew in 1.2

A compact editor under a thread. Type @ to pick a person from a list, format with a small toolbar and post with Ctrl and Enter.

Markdown with previewNew in 1.2

A text field whose toolbar writes Markdown around the selection, with the preview beside it on desktops and as a second tab on phones.

Selection toolbarNew in 1.2

A quiet page for writing. Selecting words brings a small toolbar above them, Alt and F10 reach it by keyboard, Escape goes back to the text.

Email composerNew in 1.2

Sender, recipients as checked chips with Cc, subject, a formatting row, attachments, a signature to pick and a few seconds to undo the send.

team-management

Team management

Team screens for apps. Members with roles and a careful remove, invitations with checked addresses and a link, roles with rights, teams as a tree and seats.

Props and details · Team management

MembersNew in 1.2

A table with search, role filter and status, a role per person, bulk changes and a remove that asks first and can be undone. Phones get cards.

Invite peopleNew in 1.2

Email addresses as checked chips, a role as cards, open invitations to send again or withdraw and a join link to copy or renew.

Roles and rightsNew in 1.2

Roles in a list with their people, rights by group with counts, edit, duplicate and a new role. A locked owner role stays as it is.

TeamsNew in 1.2

Departments as a tree with arrow keys, the lead and head count per team, teams inside and members to add or remove.

SeatsNew in 1.2

Seats in use, held by invitations and free, seats by role, people away for a while to free up and more seats with the cost due today.

Similar components

More from App, the same area of the kit.

Often combined with

Sections that usually sit next to Team and collaboration on a page.

Often searched

Jump to

Copied to the clipboard