{"id":23692450,"url":"https://github.com/yext/chat-ui-react","last_synced_at":"2026-02-22T09:38:38.938Z","repository":{"id":173688534,"uuid":"644950439","full_name":"yext/chat-ui-react","owner":"yext","description":"A library of React Components for powering Yext Chat integrations.","archived":false,"fork":false,"pushed_at":"2025-01-22T20:32:58.000Z","size":4301,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-22T21:28:20.330Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/yext.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-24T15:34:11.000Z","updated_at":"2025-01-22T20:32:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"2c5cedce-6a28-4e9f-b91b-aa59150a944d","html_url":"https://github.com/yext/chat-ui-react","commit_stats":null,"previous_names":["yext/chat-ui-react"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fchat-ui-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fchat-ui-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fchat-ui-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yext%2Fchat-ui-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yext","download_url":"https://codeload.github.com/yext/chat-ui-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239758828,"owners_count":19692033,"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":[],"created_at":"2024-12-30T03:27:53.649Z","updated_at":"2026-01-17T08:30:19.819Z","avatar_url":"https://github.com/yext.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chat-ui-react\n\nA library of React Components for powering Yext Chat integrations.\n\nSee the [full documentation](./docs/chat-ui-react.md) here.\n\n## Getting Started\n\nInstall the library through NPM:\n\n```bash\nnpm install @yext/chat-ui-react\n```\n\nOnce the library and its peer dependencies are installed, our React Components should be nested inside the `ChatHeadlessProvider`. `ChatHeadlessProvider` requires a `HeadlessConfig` object with the appropriate credentials and configurations:\n\n```tsx\nimport {\n  ChatHeadlessProvider,\n  HeadlessConfig,\n} from \"@yext/chat-headless-react\";\nimport { ChatPanel } from \"@yext/chat-ui-react\";\n\nconst config: HeadlessConfig = {\n  apiKey: \"\u003capiKey\u003e\",\n  botId: \"\u003cbotId\u003e\",\n};\n\nfunction App() {\n  return (\n    \u003cChatHeadlessProvider config={config}\u003e\n      \u003cChatPanel /\u003e\n    \u003c/ChatHeadlessProvider\u003e\n  );\n}\n\nexport default App;\n```\n\n## Styling\n\n### default styling\n\n#### Tailwind\n\nThe component library utilizes Tailwind styling by default. Please make sure that your application's tailwind configuration includes the following:\n\n- The `content` field should contain the path to the location of the `@yext/chat-ui-react` library (e.g., `node_modules/@yext/chat-ui-react/lib/**/*.{js,jsx}`)\n- The default theme should be extended with the custom styling used by the components specified [here](https://github.com/yext/chat-ui-react/blob/main/tailwind.config.js).\n\n#### CSS bundle\n\nFor projects that do not use Tailwind, a css bundle is exported as part of this package. To use it, you can import\nthe file `@yext/chat-ui-react/bundle.css` into your normal CSS flow.\n\nExample for Yext Pages:\n\n```css\n/* index.css */\n@import \"@yext/chat-ui-react/bundle.css\";\n```\n\nThe CSS bundle is scoped to the target class `.yext-chat`, which is automatically included as a wrapper div in both\n`ChatPanel` and `ChatPopUp`.\n\n### custom styling\n\nProjects that use Tailwind may pass Tailwind classnames into the Chat components using the `customCssClasses` prop:\n\n```tsx\nconst customCssClasses: ChatPanelCssClasses = {\n  container: \"bg-blue-300\"\n}\n\u003cChatPanel customCssClasses={customCssClasses}\u003e\n```\n\nProjects that don't use Tailwind may target the default styleless classnames added into the html elements within the Chat components and add their own css styling:\n\n```css\n.yext-chat-panel__container {\n  background-color: blue;\n}\n```\n\nAlternatively, user may provide their own classnames using the `customCssClasses` prop and target that instead\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyext%2Fchat-ui-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyext%2Fchat-ui-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyext%2Fchat-ui-react/lists"}