# UI Components

As described in the [Input UI component](/chat/docs/sdk/react/v14/components/message-composer/input-ui/), the default [`MessageComposerUI`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/MessageComposerUI.tsx) is composed from smaller exported building blocks.

## Best Practices

- Prefer composing these exported pieces instead of re-implementing composer state.
- Keep `TextareaComposer` central so autocomplete, commands, and shortcuts continue to work.
- Treat `VoiceRecordingPreviewSlot` as separate from `AttachmentPreviewList`.
- Use `LinkPreviewList` for scraped content previews; scraped links are not rendered in `AttachmentPreviewList`.
- Decide whether your custom layout should match the default command-selected state, where the attachment selector and extra actions collapse while `CommandChip` is visible.
- Reuse the default preview stack order unless your product intentionally changes that experience.

## Available Building Blocks

### Text composition and actions

- [`TextareaComposer`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx)
- [`EmojiPicker`](https://github.com/GetStream/stream-chat-react/blob/master/src/plugins/Emojis/EmojiPicker.tsx)
- [`CommandChip`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/CommandChip.tsx)
- [`CooldownTimer`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/CooldownTimer.tsx)
- [`SendButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/SendButton.tsx)
- [`SendToChannelCheckbox`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/SendToChannelCheckbox.tsx)

### Preview stack

- [`EditedMessagePreview`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/EditedMessagePreview.tsx)
- [`QuotedMessagePreview`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/QuotedMessagePreview.tsx)
- [`VoiceRecordingPreviewSlot`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/VoiceRecordingPreviewSlot.tsx)
- [`AttachmentPreviewList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentPreviewList/AttachmentPreviewList.tsx)
- [`LinkPreviewList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/LinkPreviewList.tsx)

### Attachment and recorder UI

- [`AttachmentSelector`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx)
- [`AudioRecorder`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MediaRecorder/AudioRecorder/AudioRecorder.tsx)
- [`WithDragAndDropUpload`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/WithDragAndDropUpload.tsx)
- [`FileDragAndDropContent`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageComposer/WithDragAndDropUpload.tsx)

## Command-State Behavior

In the default `MessageComposerUI`, command state is surfaced through `CommandChip`.

When a slash command is selected:

- the composer applies `str-chat__message-composer--command-active`
- `AttachmentSelector` is hidden by layout
- `AdditionalMessageComposerActions` collapses out of view
- `MessageComposerActions` no longer shows the audio-recording button

Custom composers can keep or change that behavior, but those are the current defaults to match if you want visual parity with `MessageComposerUI`.

## `TextareaComposer` Props

| Prop                             | Description                                                           | Type                                                                                                          |
| -------------------------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| `additionalTextareaProps`        | Props forwarded to the underlying `textarea`.                         | `Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "defaultValue" \| "style" \| "disabled" \| "value">` |
| `closeSuggestionsOnClickOutside` | Closes the suggestion list when the user clicks outside the composer. | `boolean`                                                                                                     |
| `containerClassName`             | Class name for the outer `div` that wraps the textarea.               | `string`                                                                                                      |
| `listClassName`                  | Class name for the suggestion-list container.                         | `string`                                                                                                      |
| `maxRows`                        | Maximum number of rows the textarea can grow to. Defaults to `10`.    | `number`                                                                                                      |
| `minRows`                        | Minimum number of rows the textarea can shrink to.                    | `number`                                                                                                      |
| `shouldSubmit`                   | Custom keyboard-submit logic.                                         | `(event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean`                                                |

## `LinkPreviewList` Props

| Prop               | Description                                                              | Type     |
| ------------------ | ------------------------------------------------------------------------ | -------- |
| `displayLinkCount` | Number of loaded previews rendered by the default list. Defaults to `1`. | `number` |

## `AttachmentPreviewList` Slots

`AttachmentPreviewList` renders uploaded attachments and shared location previews. It does not render:

- scraped links, which are handled by `LinkPreviewList`
- voice recordings, which are handled by `VoiceRecordingPreviewSlot`

The list can be customized with these component props:

| Prop                           | Purpose                                   |
| ------------------------------ | ----------------------------------------- |
| `AudioAttachmentPreview`       | preview for uploaded audio files          |
| `FileAttachmentPreview`        | preview for generic file uploads          |
| `GeolocationPreview`           | preview for shared location data          |
| `ImageAttachmentPreview`       | preview for uploaded images               |
| `UnsupportedAttachmentPreview` | preview for custom local attachment types |
| `VideoAttachmentPreview`       | preview for uploaded videos               |

## `VoiceRecordingPreviewSlot` Props

| Prop                    | Description                                                                                          | Type                                        |
| ----------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------- |
| `VoiceRecordingPreview` | Custom component used for the dedicated voice-recording preview area above the main attachment list. | `ComponentType<VoiceRecordingPreviewProps>` |


---

This page was last updated at 2026-04-13T07:26:58.172Z.

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