# UI Components

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

The following UI components are available for use:

- [`TextareaComposer`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/TextareaComposer/TextareaComposer.tsx) - wrapper
  component that provides data and functionality to the underlying `textarea` component imported from [react-textarea-autosize](https://www.npmjs.com/package/react-textarea-autosize)

- [`EmojiPicker`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EmojiPicker.tsx) - picker
  component for selecting an emoji

- [`LinkPreviewList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/LinkPreviewList.tsx) - renders scraped link data in preview cards

- [`QuotedMessagePreview`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/QuotedMessagePreview.tsx) - displays
  a UI wrapper around the `MessageInput` when an existing message is being quoted

- [`SendButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/icons.tsx) - on click, sends a
  message to the currently active channel

- [`AttachmentPreviewList`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/AttachmentPreviewList/AttachmentPreviewList.tsx) - displays a list of message attachments

- [`SendToChannelCheckbox`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/SendToChannelCheckbox.tsx) - displays
  a checkbox to send the composed thread reply to the channel's message list as well

## Best Practices

- Compose a custom Input UI from these building blocks instead of re-implementing state.
- Keep the `TextareaComposer` central to ensure autocomplete and commands work.
- Use `AttachmentPreviewList` for consistent attachment validation and rendering.
- Add `SendToChannelCheckbox` only when thread-to-channel posting is supported.
- Keep emoji and link preview components optional for lighter UIs.

## TextareaComposer Props

### additionalTextareaProps

Props forwarded to `textarea` element. Note that `defaultValue`, `style`, `value` and `disabled` are omitted.

```ts
type additionalTextareaProps = Omit<
  React.TextareaHTMLAttributes<HTMLTextAreaElement>,
  "defaultValue" | "style" | "disabled" | "value"
>;
```

You can configure the default value and disabled state via [`MessageComposer` configuration](/chat/docs/sdk/react/v13/components/message-input-components/message-composer#message-composer-configuration). The value is handled by the `MessageComposer.textComposer` state. The style should be attached via CSS.

### closeSuggestionsOnClickOutside

If enabled, the suggestion list is hidden when clicked outside the `MessageInput`.

| Type    |
| ------- |
| boolean |

### containerClassName

HTML class applied to the `div` wrapping the `textarea`.

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

### listClassName

HTML class applied to the `ul` element wrapping suggestion items in `SuggestionList`.

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

### maxRows

Maximum number of rows the `textarea` can grow to.

| Type   | Default |
| ------ | ------- |
| number | 1       |

### minRows

Minimum number of rows the `textarea` can shrink to.

| Type   | Default |
| ------ | ------- |
| number | 1       |

### shouldSubmit

Function result will decide whether the combination of keys pressed should be evaluated as signal for message submission.

| Type                                                           |
| -------------------------------------------------------------- |
| `(event: React.KeyboardEvent<HTMLTextAreaElement>) => boolean` |

## EmojiPicker Props

### small

If true, updates the CSS class name of the `div` container and renders a smaller version of the picker.

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

## LinkPreviewList Props

The component does not have any props.

## QuotedMessagePreview Props

### renderText

Function to render message text content

```ts
type renderText = (
  text?: string,
  mentioned_users?: UserResponse[],
  options?: RenderTextOptions,
) => ReactNode;
```

## SendButton Props

### sendMessage

Function to send a message to the currently active channel.

| Type                                                                                                     |
| -------------------------------------------------------------------------------------------------------- |
| `(event: React.BaseSyntheticEvent, customMessageData?: Omit<UpdatedMessage, 'mentioned_users'>) => void` |

## AttachmentPreviewList

Renders message attachments in preview. The default (supported) message attachment types are:

- `audio`
- `video`
- `image`
- `voiceRecording`
- `file`

A special case of attachment is `geolocation`. The geolocation data is taken from `message.shared_location` and not from `message.attachments`.

If the attachment object has property `og_scrape_url` or `title_link`, then it is rendered by [`LinkPreviewList` component](#linkpreviewlist-props) and not `AttachmentPreviewList`.

### AudioAttachmentPreview

Custom component to render `audio` type of attachments. By default, rendered with `FileAttachmentPreview`.

| Type                                        |
| ------------------------------------------- |
| `ComponentType<FileAttachmentPreviewProps>` |

### FileAttachmentPreview

Custom component to be rendered for attachments of type `'file'`.

| Type                                        |
| ------------------------------------------- |
| `ComponentType<FileAttachmentPreviewProps>` |

### GeolocationPreview

Custom component to render the shared location data.

| Type                                     |
| ---------------------------------------- |
| `ComponentType<GeolocationPreviewProps>` |

### ImageAttachmentPreview

Custom component to be rendered for uploaded `'image'` attachment.

| Type                                         |
| -------------------------------------------- |
| `ComponentType<ImageAttachmentPreviewProps>` |

### UnsupportedAttachmentPreview

Custom component to be rendered for attachment that is not recognized as any of the default types.

| Type                                               |
| -------------------------------------------------- |
| `ComponentType<UnsupportedAttachmentPreviewProps>` |

### VideoAttachmentPreview

Custom component to render `video` type of attachments. By default, rendered with `FileAttachmentPreview`.

| Type                                        |
| ------------------------------------------- |
| `ComponentType<FileAttachmentPreviewProps>` |

### VoiceRecordingPreview

Custom component to preview audio recorded using [`AudioRecorder` component](/chat/docs/sdk/react/v13/components/message-input-components/audio_recorder/).

| Type                                        |
| ------------------------------------------- |
| `ComponentType<VoiceRecordingPreviewProps>` |


---

This page was last updated at 2026-04-21T07:55:45.226Z.

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