{"id":14972542,"url":"https://github.com/mdbootstrap/react-chat","last_synced_at":"2025-10-23T19:28:35.608Z","repository":{"id":57749075,"uuid":"522946787","full_name":"mdbootstrap/react-chat","owner":"mdbootstrap","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 \u0026 more. https://mdbootstrap.com/docs/react/extended/chat/","archived":false,"fork":false,"pushed_at":"2022-08-11T12:45:17.000Z","size":274,"stargazers_count":4,"open_issues_count":0,"forks_count":2,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-31T22:51:16.513Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","chat","css","html","js","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-09T12:47:50.000Z","updated_at":"2024-01-21T16:13:46.000Z","dependencies_parsed_at":"2022-08-26T23:21:26.746Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-chat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-chat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-chat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-chat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-chat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-chat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238394323,"owners_count":19464583,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","chat","css","html","js","react"],"created_at":"2024-09-24T13:47:05.815Z","updated_at":"2025-10-23T19:28:35.544Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"![MDB Logo](https://mdbootstrap.com/img/Marketing/general/logo/medium/mdb-react.png)\n\n# MDB React 5\n\nResponsive 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 \u0026 more\n\nCheck out [React Chat Documentation](https://mdbootstrap.com/docs/react/extended/chat) for detailed instructions \u0026 even more examples.\n\n## Basic Example\n![React Chat Basic Example](https://user-images.githubusercontent.com/108793661/183651552-6263ab64-2294-42f4-95a6-8389dc71177c.png)\n```js\nimport React from \"react\";\nimport {\n  MDBContainer,\n  MDBRow,\n  MDBCol,\n  MDBCard,\n  MDBCardHeader,\n  MDBCardBody,\n  MDBIcon,\n  MDBTextArea,\n} from \"mdb-react-ui-kit\";\nimport \"./basic.css\";\n\nexport default function App() {\n  return (\n    \u003cMDBContainer className=\"py-5\"\u003e\n      \u003cMDBRow className=\"d-flex justify-content-center\"\u003e\n        \u003cMDBCol md=\"8\" lg=\"6\" xl=\"4\"\u003e\n          \u003cMDBCard id=\"chat1\" style={{ borderRadius: \"15px\" }}\u003e\n            \u003cMDBCardHeader\n              className=\"d-flex justify-content-between align-items-center p-3 bg-info text-white border-bottom-0\"\n              style={{\n                borderTopLeftRadius: \"15px\",\n                borderTopRightRadius: \"15px\",\n              }}\n            \u003e\n              \u003cMDBIcon fas icon=\"angle-left\" /\u003e\n              \u003cp className=\"mb-0 fw-bold\"\u003eLive chat\u003c/p\u003e\n              \u003cMDBIcon fas icon=\"times\" /\u003e\n            \u003c/MDBCardHeader\u003e\n\n            \u003cMDBCardBody\u003e\n              \u003cdiv className=\"d-flex flex-row justify-content-start mb-4\"\u003e\n                \u003cimg\n                  src=\"https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp\"\n                  alt=\"avatar 1\"\n                  style={{ width: \"45px\", height: \"100%\" }}\n                /\u003e\n                \u003cdiv\n                  className=\"p-3 ms-3\"\n                  style={{\n                    borderRadius: \"15px\",\n                    backgroundColor: \"rgba(57, 192, 237,.2)\",\n                  }}\n                \u003e\n                  \u003cp className=\"small mb-0\"\u003e\n                    Hello and thank you for visiting MDBootstrap. Please click\n                    the video below.\n                  \u003c/p\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv className=\"d-flex flex-row justify-content-end mb-4\"\u003e\n                \u003cdiv\n                  className=\"p-3 me-3 border\"\n                  style={{ borderRadius: \"15px\", backgroundColor: \"#fbfbfb\" }}\n                \u003e\n                  \u003cp className=\"small mb-0\"\u003e\n                    Thank you, I really like your product.\n                  \u003c/p\u003e\n                \u003c/div\u003e\n                \u003cimg\n                  src=\"https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava2-bg.webp\"\n                  alt=\"avatar 1\"\n                  style={{ width: \"45px\", height: \"100%\" }}\n                /\u003e\n              \u003c/div\u003e\n\n              \u003cdiv className=\"d-flex flex-row justify-content-start mb-4\"\u003e\n                \u003cimg\n                  src=\"https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp\"\n                  alt=\"avatar 1\"\n                  style={{ width: \"45px\", height: \"100%\" }}\n                /\u003e\n                \u003cdiv className=\"ms-3\" style={{ borderRadius: \"15px\" }}\u003e\n                  \u003cdiv className=\"bg-image\"\u003e\n                    \u003cimg\n                      src=\"https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/screenshot1.webp\"\n                      style={{ borderRadius: \"15px\" }}\n                      alt=\"video\"\n                    /\u003e\n                    \u003ca href=\"#!\"\u003e\n                      \u003cdiv className=\"mask\"\u003e\u003c/div\u003e\n                    \u003c/a\u003e\n                  \u003c/div\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cdiv className=\"d-flex flex-row justify-content-start mb-4\"\u003e\n                \u003cimg\n                  src=\"https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-chat/ava1-bg.webp\"\n                  alt=\"avatar 1\"\n                  style={{ width: \"45px\", height: \"100%\" }}\n                /\u003e\n                \u003cdiv\n                  className=\"p-3 ms-3\"\n                  style={{\n                    borderRadius: \"15px\",\n                    backgroundColor: \"rgba(57, 192, 237,.2)\",\n                  }}\n                \u003e\n                  \u003cp className=\"small mb-0\"\u003e...\u003c/p\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n\n              \u003cMDBTextArea\n                className=\"form-outline\"\n                label=\"Type your message\"\n                id=\"textAreaExample\"\n                rows={4}\n              /\u003e\n            \u003c/MDBCardBody\u003e\n          \u003c/MDBCard\u003e\n        \u003c/MDBCol\u003e\n      \u003c/MDBRow\u003e\n    \u003c/MDBContainer\u003e\n  );\n}\n\n```\n```css\nbody {\n  background-color: #eee;\n}\n```\n\n## How to use?\n\n1. Download MDB 5 - free REACT UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n## More examples\n### Simple Chat Application:\n[![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)\n### Chat window:\n[![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)\n### Awesome Chat Messages Box:\n[![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)\n\nYou can find other examples [here](https://mdbootstrap.com/docs/react/extended/chat).\n\n\u003chr\u003e\n\n## More extended React documentation\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-chat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-chat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-chat/lists"}