Skip to content

Message

A layout wrapper for chat threads that positions an avatar, message bubbles, a sender header, and a timestamp footer, with start or end alignment per message.

Message
Jonas LindqvistPayments
Weekly checkout digest is in: 84% of payments now go through the new checkout, up from 79% last week.
J
Biggest jump was the mobile app — it retired its last three legacy payment screens. Only invoices still use the old flow.
Today, 9:02 AM
M
Great. Are invoices blocked on the saved-cards feature, or on capacity?
9:05 AM · Seen by Jonas and Olivia
O
Olivia MillerBilling squad
Capacity. Saved cards shipped in checkout 3.1 and work for us — the switch is scoped for the Oct 6 sprint.
9:11 AM

Olivia is typing...

Installation

pnpm dlx shadcn@latest add @sortui/message

Usage

import {
  MessageGroup,
  Message,
  MessageAvatar,
  MessageContent,
  MessageFooter,
  MessageHeader,
} from "@/components/ui/message"

Examples

Actions

Did the new pricing page go live with this morning's deploy?
Just now
Yes, it shipped together with the annual plans and the new FAQ.
Failed to send

Attachment

Onboarding, welcome screen
Onboarding, permissions screen
Onboarding, done screen
M
Here's the new onboarding screen from today's build.
Looks great. I wrote up the copy for the acme audit, too.
J
acme-audit.pdf2.1 MB
Today, 9:02 AM
M
Thanks! I'll add it to the build before it goes out to beta testers.

With a trace

Thought for 8sSearched the web8 resultsRead 3 pages
Packages: +412
Progress: resolved 412, reused 398, downloaded 14
Done in 8.7s
The install is clean now. Can you run the test suite next and tell me if anything still fails?

Ship your next project this week

Get the full Figma kit, the code of 180+ sections and every future update for one payment.

Get Pro Access