Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mdbootstrap/react-chat

Responsive React Chat built with Bootstrap 5. Many variants of chatbox UI, mobile app, messages box, chat window, chatbot UI, group chat, chat widget, web chat & more. https://mdbootstrap.com/docs/react/extended/chat/
https://github.com/mdbootstrap/react-chat

bootstrap bootstrap-template bootstrap-theme bootstrap5 chat css html js react

Last synced: 6 months ago
JSON representation

Responsive React Chat built with Bootstrap 5. Many variants of chatbox UI, mobile app, messages box, chat window, chatbot UI, group chat, chat widget, web chat & more. https://mdbootstrap.com/docs/react/extended/chat/

Awesome Lists containing this project

README 

          
![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)



# MDB React 5



Responsive React Chat built with Bootstrap 5. Many variants of chatbox UI, mobile app, messages box, chat window, chatbot UI, group chat, chat widget, web chat & more



Check out [React Chat Documentation](https://mdbootstrap.com/docs/react/extended/chat) for detailed instructions & even more examples.



## Basic Example

![React Chat Basic Example](https://user-images.githubusercontent.com/108793661/183651552-6263ab64-2294-42f4-95a6-8389dc71177c.png)

```js

import React from "react";

import {

  MDBContainer,

  MDBRow,

  MDBCol,

  MDBCard,

  MDBCardHeader,

  MDBCardBody,

  MDBIcon,

  MDBTextArea,

} from "mdb-react-ui-kit";

import "./basic.css";



export default function App() {

  return (

    

      

        

          

            

              

              
Live chat


              

            



            

              


                avatar 1

                


                  


                    Hello and thank you for visiting MDBootstrap. Please click

                    the video below.

                  


                


              



              


                


                  


                    Thank you, I really like your product.

                  


                


                avatar 1

              



              


                avatar 1

                


                  

                


              



              


                avatar 1

                


                  
...


                


              



              

            

          

        

      

    

  );

}



```

```css

body {

  background-color: #eee;

}

```



## How to use?



1. Download MDB 5 - free REACT UI KIT



2. Choose your favourite customized component and click on the image



3. Copy & paste the code into your MDB project



[▶️ Subscribe to YouTube channel for web development tutorials & resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)



## More examples

### Simple Chat Application:

[![React Chat #1](https://user-images.githubusercontent.com/108793661/183652092-db1f86f1-08b9-4ed8-b255-107601cccf2b.png)](https://mdbootstrap.com/docs/react/extended/chat#section-2)

### Chat window:

[![React Chat #2](https://user-images.githubusercontent.com/108793661/183652329-3fdac981-9e6f-4287-bd16-0d09ec197f99.png)](https://mdbootstrap.com/docs/react/extended/chat#section-3)

### Awesome Chat Messages Box:

[![React Chat #3](https://user-images.githubusercontent.com/108793661/183652462-dbb456b3-c3e2-485a-a392-24dc5fa0a075.png)](https://mdbootstrap.com/docs/react/extended/chat#section-4)



You can find other examples [here](https://mdbootstrap.com/docs/react/extended/chat).






## More extended React documentation