Messaging

A conversation laid out in time: MessageItem renders one Message whose fields decide its shape, plus MessageStatus and three demo composers.

Specimen

Guidelines

Code

Demo

hero

Online
Phoenix Baker
Thursday 11:40am
Can you review the latest design when you have a minute?
- 🎉3
- 👍

Component

Shape

Side

Time

Reactions

Actions panel

showUserLabel

import type { Message } from "@/components/application/messaging/messaging"; import { MessageItem } from "@/components/application/messaging/messaging"; const message: Message = { id: "message-001", user: { name: "Phoenix Baker", avatarUrl: "https://www.untitledui.com/images/avatars/phoenix-baker?fm=webp&q=80", status: "online", }, sentAt: "Thursday 11:40am", text: "Can you review the latest design when you have a minute?", reactions: [{ content: "🎉", count: 3 }, { content: "👍", count: 1 }], }; <ol aria-label="Conversation" className="flex flex-col gap-4"> <MessageItem msg={message} /> </ol>

In context

in-context

View in a page

Family

family

Online
Phoenix Baker
See you at three.

MessageItem

MessageStatus

MessageActionMinimal

MessageActionTextarea

MessageActionAdvanced

Types

cells

The sheet’s nine types, the reaction chips, and three composers.

Message

Online
Phoenix Baker
Thursday 11:40am
Can you review the latest design when you have a minute?

Text: the bubble, start corner squared

Online
Phoenix Baker
Thursday 11:40am
Sure, I’ll have a look this afternoon.
Done, I left two comments on the header.

Reply: the quoted nest above the text

Online
Phoenix Baker
Thursday 11:40am
Dashboard wireframe.png1.4 MB

Image: the figure, name and size as its caption

Online
Phoenix Baker
Thursday 11:40am
00:28

Audio: play, the waveform, the duration

Online
Phoenix Baker
Thursday 11:40am

Video: the 16:9 player over the poster

Online
Phoenix Baker
Thursday 11:40am
Tech requirements.pdf
1.2 MB

File: the type icon, the name and size

Online
Phoenix Baker
Thursday 11:40am
Design brief: Q3 dashboard
The scope, the deadlines, and the open questions.
https://www.drumkit.design

Link minimal: the card in the bubble, URL line under

Online
Phoenix Baker
Thursday 11:40am
https://www.drumkit.design

Link preview: the OG cover in the bubble, URL line under

Online
Phoenix Baker
Thursday 11:40am
Shipped the new header this morning.
- 🎉3
- 👍

Reactions: chips end-aligned under the bubble

Online
Phoenix Baker
Phoenix Baker is typing

Writing: the typing bubble under the name

Message action

Minimal: the input and an icon-only Send

Textarea: Record in the top corner; Attach, Emoji, Send in the bottom

Advanced: a framed field, a microphone, the sender picker, Shortcuts, Attach

Sizes

cells

Minimal

size sm

size md

size lg

Layouts

cells

Sent side

You
Thursday 11:41am
Sure, I’ll have a look this afternoon.

sent Text: no avatar, “You”, end corner squared

You
Thursday 11:41am
Can you review the latest design when you have a minute?
Thanks, fixing them now.

sent Reply

You
Thursday 11:41am
Dashboard wireframe.png1.4 MB

sent Image

You
Thursday 11:41am
00:28

sent Audio

You
Thursday 11:41am

sent Video

You
Thursday 11:41am
Tech requirements.pdf
1.2 MB

sent File

You
Thursday 11:41am
Design brief: Q3 dashboard
The scope, the deadlines, and the open questions.
https://www.drumkit.design

sent Link minimal

You
Thursday 11:41am
https://www.drumkit.design

sent Link preview

You
Thursday 11:41am
Shipped the new header this morning.
- 🎉3
- 👍

sent Reactions

The list

Online
Phoenix Baker
Thursday 11:40am
Can you review the latest design when you have a minute?
You
Thursday 11:41am
Sure, I’ll have a look this afternoon.
Online
Phoenix Baker
Phoenix Baker is typing

received, sent and typing in one named list

Welcome back. What would you like to change in your calendar?
Move my sync with Rhea to Friday afternoon.
Friday at 1:30pm is free for both of you. Shall I move it and let Rhea know?

assistant thread: showUserLabel false, replies with no user

Content

cells

Online
Phoenix Baker
Thursday 11:40am
The pricing page is the last thing standing between us and a launch, so let’s get the copy signed off before Friday and ship the rest as it is, comments and all.

a long text wraps in the bubble

You
Thursday 11:41am
The pricing page is the last thing standing between us and a launch, so let’s get the copy signed off before Friday and ship the rest as it is, comments and all.
Thanks, fixing them now.

a long reply quote clamps to one line

Online
Phoenix Baker
Thursday 11:40am
Q3_dashboard_design_brief_final_v3_reviewed_by_legal.pdf
1.2 MB

a long file name truncates

You
Thursday 11:41am
Here’s the refund policy for reference.

a link inside the text

Online
Phoenix Baker
Can you review the latest design when you have a minute?

no sentAt: the name alone in the header

Friday at 1:30pm is free for both of you.

no user: no avatar, no header

Behaviour

cells

Two shapes, one message

Online
Phoenix Baker
Thursday 11:40am
Here’s the latest wireframe.

text with image: the picture inside the text bubble

Online
Phoenix Baker
Thursday 11:40am
The requirements are attached.
Tech requirements.pdf
1.2 MB

text with attachment: the file bubble as a second block

Kit extras

You
You is typing

typing on the sent side, start corner squared

Offline
Thursday 11:40am
Can you review the latest design when you have a minute?

showUserLabel false: no name in the header

Loading

cells

received

sent

three rows, received and sent mixed

States

cells

Three status glyphs, the avatar dot, and the actions panel.

Status on sent

You
Thursday 11:41am
Sure, I’ll have a look this afternoon.

status sent: one check, named Unread

You
Thursday 11:41am
Sure, I’ll have a look this afternoon.

status read with readAt: two checks, named Read

You
Thursday 11:41am
Sure, I’ll have a look this afternoon.

status failed: the alert circle, named Failed

Avatar dot

Online
Olivia Rhye
Thursday 11:40am
Can you review the latest design when you have a minute?

user.status online

Offline
Lana Steiner
Thursday 11:40am
Can you review the latest design when you have a minute?

user.status offline

The actions panel

Online
Phoenix Baker
Thursday 11:40am
Can you review the latest design when you have a minute?

at rest: hover the bubble, or tab to Generate with AI

Online
Phoenix Baker
Thursday 11:40am
Can you review the latest design when you have a minute?

pinned open on a text bubble: Edit message

Online
Phoenix Baker
Thursday 11:40am
Tech requirements.pdf
1.2 MB

pinned open on a file bubble: Download