# UI Components

As described in the [Input UI](/chat/docs/sdk/react/v11/components/message-input-components/input_ui/) section, our default [`MessageInputFlat`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx)
component is a combination of various UI subcomponents. We export all the building blocks of `MessageInputFlat`, so a custom Input UI
component can be built in a similar way. Check out the [Input UI Customization](/chat/docs/sdk/react/v11/guides/theming/input_ui/) section for an example.

The following UI components are available for use:

- [`ChatAutoComplete`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/ChatAutoComplete/ChatAutoComplete.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)

- [`DefaultTriggerProvider`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/DefaultTriggerProvider.tsx) - provides
  the default autocomplete triggers (i.e., `/`, `@`, and `:`) to the `MessageInput` children

- [`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) - component rendering scraped link data in a 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

- [`UploadsPreview`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/UploadsPreview.tsx) - displays
  a list of uploaded files prior to sending the message

## ChatAutoComplete Props

### handleSubmit

Function to override the default submit handler on the underlying `textarea` component.

| Type                                      | Default                                                                                                                     |
| ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
| (event: React.BaseSyntheticEvent) => void | [MessageInputContextValue['handleSubmit']](/chat/docs/sdk/react/v11/components/contexts/message_input_context#handlesubmit) |

### onBlur

Function to run on blur of the underlying `textarea` component.

| Type                                          |
| --------------------------------------------- |
| React.FocusEventHandler<HTMLTextAreaElement\> |

### onChange

Function to override the default onChange behavior on the underlying `textarea` component.

| Type                                           | Default                                                                                                             |
| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| React.ChangeEventHandler<HTMLTextAreaElement\> | [MessageInputContextValue['onChange']](/chat/docs/sdk/react/v11/components/contexts/message_input_context#onchange) |

### onFocus

Function to run on focus of the underlying `textarea` component.

| Type                                          |
| --------------------------------------------- |
| React.FocusEventHandler<HTMLTextAreaElement\> |

### onPaste

Function to override the default onPaste behavior on the underlying `textarea` component.

| Type                                                        | Default                                                                                                           |
| ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| (event: React.ClipboardEvent<HTMLTextAreaElement\>) => void | [MessageInputContextValue['onPaste']](/chat/docs/sdk/react/v11/components/contexts/message_input_context#onpaste) |

### placeholder

Placeholder for the underlying `textarea` component.

| Type   | Default             |
| ------ | ------------------- |
| string | 'Type your message' |

### rows

The initial number of rows for the underlying `textarea` component.

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

### value

The text value of the underlying `textarea` component.

| Type   | Default                                                                                                     |
| ------ | ----------------------------------------------------------------------------------------------------------- |
| string | [MessageInputContextValue['text']](/chat/docs/sdk/react/v11/components/contexts/message_input_context#text) |

### wordReplace

Function to override the default emojiReplace behavior on the `wordReplace` prop of the `textarea` component.

| Type                                                     |
| -------------------------------------------------------- |
| (word: string, emojiIndex?: NimbleEmojiIndex) =\> string |

## DefaultTriggerProvider

<admonition type="note">

The `DefaultTriggerProvider` component does not take any props and by default sets the `autocompleteTriggers` in `MessageInputContext` as
`/` (commands), `@` (mentions), and `:` (emojis).

`DefaultTriggerProvider` wraps the [Input UI](/chat/docs/sdk/react/v11/components/message-input-components/input_ui/) component and doesn't
need to be explicitly added to your app unless you wish to change trigger settings. To change trigger settings, provide a custom trigger
provider component to the `Channel` component via the `TriggerProvider` prop. An example can be found in the
[Message Input UI](/chat/docs/sdk/react/v11/guides/theming/input_ui/) customization section.

</admonition>

## 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

### linkPreviews

An array of `LinkPreview` objects - a union type of `LinkPreviewState` and `OGAttachment`. The array is derived from `linkPreviews` Map of `MessageInputContextValue`.

| Type          |
| ------------- |
| LinkPreview[] |

## QuotedMessagePreview Props

### quotedMessage

The existing message to be quoted by the next sent message.

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

## SendButton Props

### sendMessage

Function to send a message to the currently active channel.

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

## UploadsPreview

<admonition type="note">

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

</admonition>


---

This page was last updated at 2026-03-06T17:06:25.076Z.

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