---
title: "Message Group"
description: "A grouped chat message with author, timestamp, reply preview, reactions and an ephemeral state."
---

A grouped chat message with author, timestamp, reply preview, reactions and an ephemeral state. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Message Group — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add message-group
``` Registry dependencies, installed with it: avatar, reaction, reply-preview, status-indicator.

Files written — React: components/ui/message-group.tsx. Vue: components/ui/message-group/MessageGroup.vue, components/ui/message-group/MessageGroupAvatar.vue, components/ui/message-group/MessageGroupReply.vue, components/ui/message-group/MessageGroupBody.vue, components/ui/message-group/MessageGroupHeader.vue, components/ui/message-group/MessageGroupAuthor.vue, components/ui/message-group/MessageGroupBotTag.vue, components/ui/message-group/MessageGroupTime.vue, components/ui/message-group/MessageGroupContent.vue, components/ui/message-group/MessageGroupReactions.vue, components/ui/message-group/MessageGroupEphemeralNotice.vue, components/ui/message-group/MessageGroupEphemeralAction.vue, components/ui/message-group/index.ts.

## Usage

React:

```tsx
import { MessageGroup } from "@/components/ui/message-group"
```

Vue:

```ts
import { MessageGroup, MessageGroupAvatar, MessageGroupReply, MessageGroupBody, MessageGroupHeader, MessageGroupAuthor, MessageGroupBotTag, MessageGroupTime, MessageGroupContent, MessageGroupReactions, MessageGroupEphemeralNotice, MessageGroupEphemeralAction } from "@/components/ui/message-group"
```

## API reference

**`MessageGroup`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `withReply` | `boolean \| undefined` | — | Lay the row out as a 2x2 grid so a `MessageGroupReply` can hook over the avatar, the way the client stacks a reply above the message it answers. |
| `ephemeral` | `boolean \| undefined` | — | Tint the row as an ephemeral (visible-to-you-only) response. |

**`MessageGroupBotTag`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `verified` | `boolean \| undefined` | — | Add the check Discord puts on verified applications. |

The registry exports `MessageGroup`, `MessageGroupAvatar`, `MessageGroupReply`, `MessageGroupBody`, `MessageGroupHeader`, `MessageGroupAuthor`, `MessageGroupBotTag`, `MessageGroupTime`, `MessageGroupContent`, `MessageGroupReactions`, `MessageGroupEphemeralNotice`, `MessageGroupEphemeralAction`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

Message Group reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.