# react-chat **Repository Path**: mirrors_mdbootstrap/react-chat ## Basic Information - **Project Name**: react-chat - **Description**: 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/ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2022-08-12 - **Last Updated**: 2026-05-02 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## 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

...

); } ``` ```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