# UI Components

As described in the [Message UI component](/chat/docs/sdk/react/components/message-components/message_ui/), the default [MessageSimple](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageSimple.tsx) component is composed of smaller UI pieces. All of those building blocks are exported so you can build a custom Message UI component. See [Message UI Customization](/chat/docs/sdk/react/guides/theming/message_ui/) for an example.

The following UI components are available for use:

- [`MessageActions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageActions/MessageActions.tsx) - displays the available actions on a message (ex: edit, flag, pin)

- [`MessageDeleted`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageDeleted.tsx) - renders when
  `message.type` is `deleted`

- [`MessageOptions`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageOptions.tsx) - on hover,
  shows the available options on a message (i.e., react, reply, actions)

- [`MessageRepliesCountButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageRepliesCountButton.tsx) - displays
  the number of threaded replies on a message

- [`MessageStatus`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageStatus.tsx) - displays message
  delivery status and the users who have read the message

- [`MessageText`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageText.tsx) - formats and renders
  the message text in markdown using [react-markdown](https://www.npmjs.com/package/react-markdown)

- [`MessageTimestamp`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/MessageTimestamp.tsx) - shows the
  sent time of a message

- [`QuotedMessage`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/QuotedMessage.tsx) - shows a quoted
  message UI wrapper when the sent message quotes a previous message

- [`Timestamp`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Timestamp.tsx) - formats and displays a date,
  used by `MessageTimestamp` and for edited message timestamps.

- [`MessageBouncePrompt`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageBounce/MessageBouncePrompt.tsx) -
  presents options to deal with a message that got bounced by the moderation rules.

## Best Practices

- Compose these building blocks instead of duplicating message logic.
- Keep action components aligned with permission checks from context.
- Reuse `MessageText` to maintain consistent markdown behavior.
- Use `MessageStatus` sparingly to avoid visual noise in busy channels.
- Prefer incremental overrides instead of replacing the whole message UI.

There are also components for the reaction list and reaction selector. See the [reactions chapter](/chat/docs/sdk/react/components/message-components/reactions/).

## MessageActions Props

### ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

| Type                  | Default                                                                                                    |
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
| `React.ComponentType` | [ActionsIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) |

### customWrapperClass

Custom CSS class to be added to the `div` wrapping the component.

| Type   |
| ------ |
| string |

### getMessageActions

Function that returns an array of the allowed actions on a message by the currently connected user (overrides the value from `MessageContext`).

| Type                      |
| ------------------------- |
| () => MessageActionsArray |

### handleDelete

Function that removes a message from the current channel (overrides the value from `MessageContext`).

| Type                                                                                        |
| ------------------------------------------------------------------------------------------- |
| (event: React.BaseSyntheticEvent, options?: DeleteMessageOptions) => Promise<void\> \| void |

### handleFlag

Function that flags a message (overrides the value from `MessageContext`).

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |

### handleMarkUnread

Function that marks the message and all the following messages as unread in a channel.

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |

### handleMute

Function that mutes the sender of a message (overrides the value from `MessageContext`).

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |

### handlePin

Function that pins a message in the current channel (overrides the value from `MessageContext`).

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |

### inline

If true, renders the wrapper component as a `span`, not a `div`.

| Type   | Default |
| ------ | ------- |
| string | false   |

### message

The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`).

| Type   |
| ------ |
| object |

### mine

Function that returns whether the message was sent by the connected user.

| Type          |
| ------------- |
| () => boolean |

## MessageDeleted Props

### message

The `StreamChat` message object, which provides necessary data to the underlying UI components.

| Type   |
| ------ |
| object |

## MessageOptions Props

### ActionsIcon

Custom component rendering the icon used in message actions button. This button invokes the message actions menu.

| Type                  | Default                                                                                                    |
| --------------------- | ---------------------------------------------------------------------------------------------------------- |
| `React.ComponentType` | [ActionsIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) |

### displayReplies

If true, show the `ThreadIcon` and enable navigation into a `Thread` component.

| Type    | Default |
| ------- | ------- |
| boolean | true    |

### handleOpenThread

Function that opens a [`Thread`](/chat/docs/sdk/react/components/core-components/thread/) on a message (overrides the value from `MessageContext`).

| Type                                                        |
| ----------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => Promise<void\> \| void |

### ReactionIcon

Custom component rendering the icon used in a message options button invoking reactions selector for a given message.

| Type                  | Default                                                                                                     |
| --------------------- | ----------------------------------------------------------------------------------------------------------- |
| `React.ComponentType` | [ReactionIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) |

### theme

Theme string to be added to CSS class names.

```tsx
<div className={`str-chat__message-${theme}__actions`} />
```

| Type   | Default  |
| ------ | -------- |
| string | 'simple' |

### ThreadIcon

Custom component rendering the icon used in a message options button opening thread.

| Type                  | Default                                                                                                   |
| --------------------- | --------------------------------------------------------------------------------------------------------- |
| `React.ComponentType` | [ThreadIcon](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/icons.tsx) |

## MessageRepliesCountButton Props

### labelPlural

If supplied, adds custom text to the end of a multiple replies message.

```tsx
const pluralReplyText = `${reply_count} ${labelPlural}`;
```

| Type   |
| ------ |
| string |

### labelSingle

If supplied, adds custom text to the end of a single reply message.

```tsx
const singleReplyText = `1 ${labelSingle}`;
```

| Type   |
| ------ |
| string |

### onClick

Function to navigate into an existing thread on a message.

| Type                    |
| ----------------------- |
| React.MouseEventHandler |

### reply_count

The amount of replies (i.e., threaded messages) on a message.

| Type   |
| ------ |
| number |

## MessageStatus Props

### Avatar

Custom UI component to display a user's avatar (overrides the value from `ComponentContext`).

| Type      | Default                                                                                               |
| --------- | ----------------------------------------------------------------------------------------------------- |
| component | [Avatar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Avatar/Avatar.tsx) |

### MessageDeliveredStatus

Custom component to render when message is considered delivered, not read. The default UI renders MessageDeliveredIcon and a tooltip with string 'Delivered'.

| Type      |
| --------- |
| component |

### MessageReadStatus

Custom component to render when message is considered delivered and read. The default UI renders the last reader's Avatar and a tooltip with string readers' names.

| Type      |
| --------- |
| component |

### MessageSendingStatus

Custom component to render when message is considered as being the in the process of delivery. The default UI renders LoadingIndicator and a tooltip with string 'Sending'.

| Type      |
| --------- |
| component |

### messageType

Message type string to be added to CSS class names.

```tsx
<span className={`str-chat__message-${messageType}-status`} />
```

| Type   | Default  |
| ------ | -------- |
| string | 'simple' |

### tooltipUserNameMapper

Allows to customize the username(s) that appear on the message status tooltip.

| Type                           | Default             |
| ------------------------------ | ------------------- | --- | ------- |
| (user: UserResponse) => string | (user) => user.name |     | user.id |

This prop's implementation is not provided out of the box by the SDK. See below for a customization example:

```tsx
const CustomMessageStatus = (props: MessageStatusProps) => {
  const allCapsUserName = useCallback<TooltipUsernameMapper>(
    (user) => (user.name || user.id).toUpperCase(),
    [],
  );
  return <MessageStatus {...props} tooltipUserNameMapper={allCapsUserName} />;
};

// Sort in reverse order to avoid auto-selecting unread channel
const sort: ChannelSort = { last_updated: 1 };
const WrappedConnectedUser = ({
  token,
  userId,
}: Omit<ConnectedUserProps, "children">) => (
  <ConnectedUser token={token} userId={userId}>
    <ChannelList
      filters={{ id: { $eq: "add-message" }, members: { $in: [userId] } }}
      sort={sort}
    />
    <Channel MessageStatus={CustomMessageStatus}>
      <Window>
        <ChannelHeader />
        <MessageList />
      </Window>
      <Thread />
    </Channel>
  </ConnectedUser>
);
```

## MessageText Props

### customInnerClass

If provided, replaces the CSS class name placed on the component's inner `div` container.

| Type   |
| ------ |
| string |

### customWrapperClass

If provided, adds a CSS class name to the component's outer `div` container.

| Type   |
| ------ |
| string |

### message

The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value stored in `MessageContext`).

| Type   |
| ------ |
| object |

### theme

Theme string to be added to CSS class names.

```tsx
<div className={`str-chat__message-${theme}-text-inner`} />
```

| Type   | Default  |
| ------ | -------- |
| string | 'simple' |

## MessageTimestamp Props

This component has all of the same props as the underlying [`Timestamp`](#timestamp-props), except that instead of `timestamp` it uses `message.created_at` value from the `MessageContext`.

### calendar

If true, call the `Day.js` calendar function to get the date string to display.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### customClass

If provided, adds a CSS class name to the component's outer `time` container.

```tsx
<time className={customClass} />
```

| Type   |
| ------ |
| string |

### format

If provided, overrides the default timestamp format.

| Type   | Default |
| ------ | ------- |
| string | 'h:mmA' |

### message

The `StreamChat` message object, which provides necessary data to the underlying UI components (overrides the value from `MessageContext`).

| Type   |
| ------ |
| object |

## QuotedMessage Props

<admonition type="note">

`QuotedMessage` only consumes context and does not accept any optional props.

</admonition>

## MessageBouncePrompt props

This component is rendered in a modal dialog for messages that got bounced by the moderation rules.

### MessageBouncePrompt children

| Type      | Default                                                                 |
| --------- | ----------------------------------------------------------------------- |
| ReactNode | Localized string for "This message did not meet our content guidelines" |

Use this prop to easily override the text displayed in the modal dialog for the bounced messages, without fully implementing a custom `MessageBouncePrompt` component:

```tsx
import { MessageBouncePrompt } from "stream-react-chat";

function MyCustomMessageBouncePrompt(props) {
  return <MessageBouncePrompt {...props}>My custom text</MessageBouncePrompt>;
}
```

Then override the default `MessageBouncePrompt` component with your custom one:

```tsx
<Channel MessageBouncePrompt={MyCustomMessageBouncePrompt}>
  <Window>
    <ChannelHeader />
    <MessageList />
    <MessageInput />
  </Window>
  <Thread />
</Channel>
```

If you need deeper customization, refer to the [`MessageBounceContext`](/chat/docs/sdk/react/components/contexts/message_bounce_context/) documentation.

### onClose

The Message UI component passes this callback to close the modal dialog that renders `MessageBouncePrompt`.

| Type              |
| ----------------- |
| ReactEventHandler |

## Timestamp props

### calendar

If true, call the `Day.js` calendar function to get the date string to display.

| Type    | Default |
| ------- | ------- |
| boolean | false   |

### customClass

If provided, adds a CSS class name to the component's outer `time` container.

```tsx
<time className={customClass} />
```

| Type   |
| ------ |
| string |

### format

If provided, overrides the default timestamp format.

| Type   | Default |
| ------ | ------- |
| string | 'h:mmA' |

### timestamp

Either an ISO string with a date, or a Date object with a date to display.

| Type           |
| -------------- |
| Date \| string |


---

This page was last updated at 2026-03-12T08:53:05.343Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/components/message-components/ui-components/](https://getstream.io/chat/docs/sdk/react/components/message-components/ui-components/).