{"id":13708081,"url":"https://github.com/chatscope/chat-ui-kit-react","last_synced_at":"2025-05-14T15:10:44.218Z","repository":{"id":45482038,"uuid":"290567617","full_name":"chatscope/chat-ui-kit-react","owner":"chatscope","description":"Build your own chat UI with React components in few minutes. Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.","archived":false,"fork":false,"pushed_at":"2024-05-24T17:41:13.000Z","size":128,"stargazers_count":1506,"open_issues_count":63,"forks_count":134,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-05-10T13:46:45.607Z","etag":null,"topics":["chat","comments","communication","components","conversation","feed","friends","frontend","instant-messaging","interface","library","messenger","react","reusable","social","talk","toolkit","ui","ui-kit","user"],"latest_commit_sha":null,"homepage":"https://chatscope.io","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chatscope.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-26T17:56:46.000Z","updated_at":"2025-05-08T07:25:35.000Z","dependencies_parsed_at":"2024-03-03T08:32:46.279Z","dependency_job_id":"5ee33fef-e864-4f3a-a386-189e6e9654bc","html_url":"https://github.com/chatscope/chat-ui-kit-react","commit_stats":{"total_commits":95,"total_committers":5,"mean_commits":19.0,"dds":0.04210526315789476,"last_synced_commit":"89f6208011ab0ec304796fb085aa510f850c29e2"},"previous_names":[],"tags_count":39,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatscope%2Fchat-ui-kit-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatscope%2Fchat-ui-kit-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatscope%2Fchat-ui-kit-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chatscope%2Fchat-ui-kit-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chatscope","download_url":"https://codeload.github.com/chatscope/chat-ui-kit-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254170055,"owners_count":22026219,"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":["chat","comments","communication","components","conversation","feed","friends","frontend","instant-messaging","interface","library","messenger","react","reusable","social","talk","toolkit","ui","ui-kit","user"],"created_at":"2024-08-02T22:01:55.466Z","updated_at":"2025-05-14T15:10:44.191Z","avatar_url":"https://github.com/chatscope.png","language":"JavaScript","readme":"# Chat UI Kit React\n\n[![Actions Status](https://github.com/chatscope/chat-ui-kit-react/workflows/build/badge.svg)](https://github.com/chatscope/chat-ui-kit-react/actions) [![npm version](https://img.shields.io/npm/v/@chatscope/chat-ui-kit-react.svg?style=flat)](https://npmjs.com/@chatscope/chat-ui-kit-react) [![](https://img.shields.io/npm/l/@chatscope/chat-ui-kit-react?dummy=unused)](https://github.com/chatscope/chat-ui-kit-react/blob/master/LICENSE) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier) [![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release) [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://chatscope.io/storybook/react/)\n\nBuild your own chat UI with React components in a few minutes.  \nThe Chat UI Kit from chatscope is an open source UI toolkit for developing web chat applications.\n\nTired of struggling with sticky scrollbars, contenteditable, responsiveness, css hacks?  \nThis kit is for you! [See all features](https://chatscope.io/features).\n\n**Chat UI Kit brings you chat UI development at warp speed** 🚀\n\n## Demo\n\n- Full featured chat application: [https://demo.chatscope.io](https://demo.chatscope.io)\n- Zoe, Akane, Eliot and Joe: [https://chatscope.io/demo/chat-friends](https://chatscope.io/demo/chat-friends/)\n- Chat with the Martian (he is available sometimes): [https://mars.chatscope.io](https://mars.chatscope.io)\n\nDemos index: [https://chatscope.io/demo](https://chatscope.io/demo/).\n\n## Install\n\n**Component library**\n\nUsing yarn:\n\n```sh\nyarn add @chatscope/chat-ui-kit-react\n```\n\nUsing npm:\n\n```sh\nnpm install @chatscope/chat-ui-kit-react\n```\n\n**Styles**\n\nUsing yarn:\n\n```sh\nyarn add @chatscope/chat-ui-kit-styles\n```\n\nUsing npm:\n\n```sh\nnpm install @chatscope/chat-ui-kit-styles\n```\n\n## Usage\n\n### ESM\n\n```jsx\nimport styles from \"@chatscope/chat-ui-kit-styles/dist/default/styles.min.css\";\nimport {\n  MainContainer,\n  ChatContainer,\n  MessageList,\n  Message,\n  MessageInput,\n} from \"@chatscope/chat-ui-kit-react\";\n\n\u003cdiv style={{ position: \"relative\", height: \"500px\" }}\u003e\n  \u003cMainContainer\u003e\n    \u003cChatContainer\u003e\n      \u003cMessageList\u003e\n        \u003cMessage\n          model={{\n            message: \"Hello my friend\",\n            sentTime: \"just now\",\n            sender: \"Joe\",\n          }}\n        /\u003e\n      \u003c/MessageList\u003e\n      \u003cMessageInput placeholder=\"Type message here\" /\u003e\n    \u003c/ChatContainer\u003e\n  \u003c/MainContainer\u003e\n\u003c/div\u003e;\n```\n\nYeah! Your first chat GUI is ready!\n\n### UMD\n\nUMD usage is documented in our [Storybook](https://chatscope.io/storybook/react/).\n\n## Documentation\n\nCheck our friendly [Storybook](https://chatscope.io/storybook/react/).\n\n## Typescript\n\nThe library is written in Javascript, but Typescript typings are available in the package since version 1.9.3.\n\n## See also\n\n[@chatscope/use-chat](https://github.com/chatscope/use-chat) is a React hook for state management in chat applications.  \nCheck it out and see how easy you can do the chat logic yourself.\n\n## Show your support\n\nIf you've made an awesome chat UI and you love this library, please ⭐ this repository!\n\n## Community and support\n\n- Twitting via [@chatscope](https://twitter.com/chatscope)\n- Chatting at [Discord](https://discord.gg/TkUYWQRf2M)\n- Facebooking at [Facebook](https://www.facebook.com/chatscope)\n- Articles on the [chatscope blog](https://chatscope.io/blog/)\n\n## Website\n\n[https://chatscope.io](https://chatscope.io)\n\n## License\n\n[MIT](https://github.com/chatscope/chat-ui-kit-react/blob/master/LICENSE)\n","funding_links":[],"categories":["📚 Contents","JavaScript","UI components"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatscope%2Fchat-ui-kit-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchatscope%2Fchat-ui-kit-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchatscope%2Fchat-ui-kit-react/lists"}