# Overview

**React Chat UI makes chat UI development faster**

## Why Choose MinChat's React Chat UI?

* **Speed up development**: Quickly integrate chat functionality into your app.
* **Customizable components**: Tailor the UI to fit your needs.
* **Open Source**: Benefit from community-driven improvements.

## Demo

[View The Live Demo](https://minchat.io/demo) If you would like to see the React chat UI in action, you can visit the [live demo](https://minchat.io/demo). This demo allows you to test out the various features of the react chat components and see how they can be integrated into a real-world application. We encourage you to give it a try and see for yourself the power and flexibility of our React chat UI.

## Install

Install the component library using your preferred package manager:

**Using npm.**

```bash
npm install @minchat/react-chat-ui
```

**Using yarn.**

```bash
yarn add @minchat/react-chat-ui
```

## Usage

Here's a quick example to get you started:

```jsx
import {
  MinChatUiProvider,
  MainContainer,
  MessageInput,
  MessageContainer,
  MessageList,
  MessageHeader
} from "@minchat/react-chat-ui";
Pdash
function App() {
  return (
    <MinChatUiProvider theme="#6ea9d7">
      <MainContainer style={{ height: '100vh' }}>
        <MessageContainer>
          <MessageHeader />
          <MessageList
            currentUserId='dan'
            messages={[{
              text: 'Hello',
              user: {
                id: 'mark',
                name: 'Markus',
              },
            }]}
          />
          <MessageInput placeholder="Type message here" />
        </MessageContainer>
      </MainContainer>
    </MinChatUiProvider>
  )
}

export default App

```

## Modify Component Colors

You can modify the colors of each and every component, by passing a colorSet prop to the `MinChatUiProvider` which defines the colors to use. ommited colors will use the default theme.

```jsx
const myColorSet = {
        // input
        "--input-background-color": "#FF0000",
        "--input-text-color": "#fff",
        "--input-element-color": "rgb(0, 0, 255)",
        "--input-attach-color": "#fff",
        "--input-send-color": "#fff",
        "--input-placeholder-color": "rgb(255, 255, 255)",

        // message header
        "--message-header-background-color": "#FF0000",
        "--message-header-text-color": "#fff",
        "--message-header-last-active-color": "rgb(0, 0, 255)",
        "--message-header-back-color": "rgb(255, 255, 255)",

        // chat list header
        "--chatlist-header-background-color": "#FF0000",
        "--chatlist-header-text-color": "rgb(255, 255, 255)",
        "--chatlist-header-divider-color": "rgb(0, 128, 0)",

        //chatlist
        "--chatlist-background-color": "rgb(255, 192, 203)",
        "--no-conversation-text-color": "rgb(255, 255, 255)",

        //chat item
        "--chatitem-background-color": "rgb(0, 0, 255)",
        "--chatitem-selected-background-color": "rgb(255, 255, 0)",
        "--chatitem-title-text-color": "#FF0000",
        "--chatitem-content-text-color": "#FF0000",
        "--chatitem-hover-color": "#FF0000",

        //main container
        "--container-background-color": "rgb(255, 192, 203)",

        //loader
        "--loader-color": "rgb(0, 128, 0)",

        //message list
        "--messagelist-background-color": "rgb(0, 0, 255)",
        "--no-message-text-color": "rgb(255, 255, 255)",

        // incoming message
        "--incoming-message-text-color": "rgb(255, 255, 255)",
        "--incoming-message-name-text-color": "rgb(255, 255, 255)",
        "--incoming-message-background-color": "rgb(0, 128, 0)",
        "--incoming-message-timestamp-color": "rgb(255, 255, 255)",
        "--incoming-message-link-color": "#FF0000",
        
        //outgoing message
        "--outgoing-message-text-color": "#FF0000",
        "--outgoing-message-background-color": "rgb(255, 255, 0)",
        "--outgoing-message-timestamp-color": "#FF0000",
        "--outgoing-message-checkmark-color": "#FF0000",
        "--outgoing-message-loader-color": "#FF0000",
        "--outgoing-message-link-color": "rgb(0, 128, 0)",
    }

function App() {
  return (
    <MinChatUiProvider 
      colorSet={myColorSet}
      theme="#6ea9d7">

       {/** rest of your code*/}

    </MinChatUiProvider>
  )
}
```

## Typescript

Our library is written in TypeScript, offering type safety and easy integration into both TypeScript and JavaScript projects.

## Show your support

If you love our library, consider starring our [GitHub repository!](https://github.com/MinChatHQ/react-chat-ui)

## Community and support

For articles, tutorials, and a full guide, visit our [website](https://minchat.com/blog). Connect with other developers, share ideas, and get help.

## Website

[https://minchat.io](https://minchat.io/)&#x20;

Unleash the power of seamless chat functionality with MinChat's [React Chat API!](https://minchat.io) Say goodbye to backend worries and hello to effortless integration. Get started today and save months of development time. Build a full-fledged React chat application in just minutes, not months!

## License

&#x20;React Chat UI Kit is licensed under [MIT](https://github.com/MinChatHQ/react-chat-ui/blob/master/LICENSE). Feel free to use it in your projects.

***

Ready to build an amazing chat experience? Visit [MinChat.io](https://minchat.io/) to get started and unleash the power of seamless chat functionality in your application today!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://react.minchat.io/overview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.