Message

Renders a single message within a conversational or chat layout.

$bunx shadcn@latest add @nx-ui/message
Registry item
Installs withutils

Basic usage

A Message lays out a header, content and footer; align='end' flips it to the right for the current user.

PN
Priya Nair
Soil test results are back for the Elmridge allotment — pH looks good.
09:41
Brilliant, thanks. Can you upload the report to the project folder?
09:42

Grouping consecutive messages

Wrap several Messages from the same sender in a MessageGroup — the avatar only needs to appear once per group.

PN
Priya Nair
Morning! The Riverside Grove volunteers are asking whether we can move Saturday's planting to the afternoon.
PN
Forecast has rain clearing by 1pm.
09:47

States

A pending send shows a spinner in the footer; a failed send surfaces an inline retry.

Uploading the compost turning log now…
Sending…
Compost delivery for the Thornbury site is confirmed for Thursday.
Failed to send

Ghost variant

Pass variant='ghost' to Bubble for a chrome-free look — MessageHeader and MessageFooter lose their inset padding to match.

FA
Femi Adeyemi
Windrow 3 has cooled to 42°C — ready to turn whenever the crew's free.
09:15

Composition: two-party conversation

Messages, groups, avatars and a composer combined into a realistic Nexus ReGen project thread.

PN
Priya Nair
Lab results for the Barrowfield ReGen samples just came through.
PN
Organic matter's up 3% since March — the compost blend is working.
10:02
That's brilliant news — can you share the full report with the movement list?
10:05
PN
Sending it over now 🌱
10:06

API reference

Exported parts and their props, extracted from the component source.