{"id":13880987,"url":"https://github.com/SAP/ui5-webcomponents-react","last_synced_at":"2025-07-16T17:31:40.072Z","repository":{"id":37348969,"uuid":"182085192","full_name":"SAP/ui5-webcomponents-react","owner":"SAP","description":"A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience","archived":false,"fork":false,"pushed_at":"2025-07-14T12:32:42.000Z","size":2099448,"stargazers_count":503,"open_issues_count":49,"forks_count":103,"subscribers_count":14,"default_branch":"main","last_synced_at":"2025-07-14T16:10:11.844Z","etag":null,"topics":["open-source","react","typescript","ui-components","web-components"],"latest_commit_sha":null,"homepage":"https://sap.github.io/ui5-webcomponents-react/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SAP.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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,"zenodo":null}},"created_at":"2019-04-18T12:38:30.000Z","updated_at":"2025-07-14T13:26:21.000Z","dependencies_parsed_at":"2023-12-20T14:14:24.696Z","dependency_job_id":"9317b201-69c3-4374-a791-3f99101f72f7","html_url":"https://github.com/SAP/ui5-webcomponents-react","commit_stats":{"total_commits":5164,"total_committers":47,"mean_commits":"109.87234042553192","dds":0.7261812548412083,"last_synced_commit":"edd6c0aa0b807259d902c2e3cf0b19e62bbe1452"},"previous_names":["sap/fiori-for-react"],"tags_count":471,"template":false,"template_full_name":null,"purl":"pkg:github/SAP/ui5-webcomponents-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Fui5-webcomponents-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Fui5-webcomponents-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Fui5-webcomponents-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Fui5-webcomponents-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SAP","download_url":"https://codeload.github.com/SAP/ui5-webcomponents-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SAP%2Fui5-webcomponents-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265329779,"owners_count":23748129,"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":["open-source","react","typescript","ui-components","web-components"],"created_at":"2024-08-06T08:03:44.307Z","updated_at":"2025-07-16T17:31:35.059Z","avatar_url":"https://github.com/SAP.png","language":"TypeScript","readme":"\u003ca name=\"top\"\u003e\u003c/a\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/main/assets/Logo-Sticker.png\" alt=\"UI5 Web Components for React Logo\" /\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://coveralls.io/github/SAP/ui5-webcomponents-react'\u003e\n    \u003cimg src='https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg' alt='Coverage Status' /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/\" target=\"_blank\"\u003e\n      \u003cimg alt=\"Slack Badge\" src=\"https://badgen.net/badge/slack/Join OpenUI5 Slack workspace/blue?icon=slack\"\u003e\n    \u003c/a\u003e\n  \u003ca href=\"https://openui5.slack.com/archives/CSQEJ2J04\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Slack Badge\" src=\"https://badgen.net/badge/slack/webcomponents-react/orange?icon=slack\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react\" target=\"_blank\"\u003e\n    \u003cimg alt=\"REUSE Status\" src=\"https://api.reuse.software/badge/github.com/SAP/ui5-webcomponents-react\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n`ui5-webcomponents-react` is providing a Fiori-compliant React implementation by leveraging the [UI5 Web Components](https://github.com/SAP/ui5-webcomponents).\n\n## Resources\n\nYou can find our documentation under the following links:\n\n- [Stable Release Documentation](https://sap.github.io/ui5-webcomponents-react/)\n- [Nightly Release Documentation](https://sap.github.io/ui5-webcomponents-react/nightly/)\n- [V1 Release Documentation](https://sap.github.io/ui5-webcomponents-react/v1/)\n\n## Packages Overview\n\n- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/main) - Main Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)\n\n- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/charts) - Charts Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)\n\n- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/base) - Base Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)\n\n- [@ui5/webcomponents-react-compat](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/compat) - Legacy Components Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-react-compat?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-compat)\n\n- [@ui5/webcomponents-react-cli](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cli) - Wrapper Generation \u0026 Code-Mod Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-react-cli?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-cli)\n\n- [@ui5/webcomponents-cypress-commands](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cypress-commands) - Custom Cypress Commands \u0026 Queries Package\n\n  [![](https://badgen.net/npm/v/@ui5/webcomponents-cypress-commands?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-cypress-commands)\n\n\u003c!-- *********************************************************************** --\u003e\n\n\u003ca name=\"requirements\"\u003e\u003c/a\u003e\n\n## Requirements\n\n- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) (**18.0.0 or higher**)\n- [Node.js](https://nodejs.org/) (**LTS version**)\n- If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.\n\n\u003c!-- *********************************************************************** --\u003e\n\n\u003ca name=\"download\"\u003e\u003c/a\u003e\n\n## Download and Installation\n\nTo consume `ui5-webcomponents-react`, you need to install the npm modules and required peer dependencies:\n\n```sh\nnpm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori\n```\n\n## Ongoing Support for Version 1.x\n\nWe will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.\n\n\u003c!-- *********************************************************************** --\u003e\n\n## Getting Started\n\n### Tutorial\n\nYou are new to UI5 Web Components for React and don't know where to start?\u003cbr /\u003e\nThen take a look at our [Tutorial Mission](https://developers.sap.com/mission.react-spa.html) at “SAP Developers”!\nThere you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.\u003cbr /\u003e\nIn about an hour you will create a business dashboard from scratch and get familiar with some React basics in case you don't know them already.\n\n### SAP Devtoberfest 2024 session\n\nIn the [SAP Devtoberfest 2024](https://www.youtube.com/watch?v=lvpN3eK39h8) session, we showcased the most prominent new features in version 2 of UI5 Web Components and UI5 Web Components for React, and provided an example of how to migrate from version 1 to version 2 using our [Codemod](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs#codemod).\n\n### SAP Devtoberfest 2023 session\n\n[Here](https://www.youtube.com/watch?v=zyOxgjoSnGw) you can find the video of our session for the SAP Devtoberfest 2023 (aired Sep 29, 2023). There we briefly explain why UI5 Web Components for React exist at all, where the project fits into the SAP UI stack and what advantages our wrapper has over implementations that use pure ui5-webcomponents.\nFor the main part, we show how you could create a simple Movie Database UI, first by using our `Vite` template and then with our `Next.js` template.\n\n### Examples \u0026 Templates\n\nYou can find a curated list of project templates and examples on our [Project Templates \u0026 Examples page](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/project-templates-examples--docs).\n\n### Add `@ui5/webcomponents-react` to an existing app\n\nFirst of all, you need to add the `@ui5/webcomponents-react` dependency to your project. Please also keep in mind installing the required peer dependencies:\n\n```sh\nnpm install @ui5/webcomponents @ui5/webcomponents-react @ui5/webcomponents-fiori\n```\n\nIn order to use `@ui5/webcomponents-react` you have to wrap your application's root component into the `ThemeProvider`.\u003cbr/\u003e\nYou will find this component most likely in `src/index.js`:\n\n```jsx\nimport { ThemeProvider } from '@ui5/webcomponents-react';\n...\nconst root = createRoot(document.getElementById(\"root\"));\nroot.render(\n        \u003cThemeProvider\u003e\n          \u003cApp /\u003e\n        \u003c/ThemeProvider\u003e\n);\n```\n\nThen you are ready to use `@ui5/webcomponents-react` and you can import the desired component(s) in your app:\u003cbr /\u003e\nFor example, to use the `Button` component you need to import it:\n\n```jsx\nimport { Button } from '@ui5/webcomponents-react'; // loads ui5-button wrapped in a ui5-webcomponents-react component\n```\n\nThen, you can use the Button in your app:\n\n```jsx\n\u003cButton onClick={() =\u003e alert('Hello World!')}\u003eHello world!\u003c/Button\u003e\n```\n\n### Browser Support\n\nUI5 Web Components for React supports the same [browsers and respective versions](https://github.com/SAP/ui5-webcomponents#browser-support) as UI5 Web Components.\n\n\u003c!-- *********************************************************************** --\u003e\n\n\u003ca name=\"issues\"\u003e\u003c/a\u003e\n\n## Known Issues\n\nPlease take a look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues).\n\n\u003c!-- *********************************************************************** --\u003e\n\n\u003ca name=\"support\"\u003e\u003c/a\u003e\n\n## How to obtain support\n\nWe welcome all comments, suggestions, questions, and bug reports. Feel free to [open issues](https://github.com/SAP/ui5-webcomponents-react/issues/new/choose) or chat with us directly in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel in the\n[OpenUI5 Community Slack](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/).\nPlease note that you have to join this Slack workspace via [this link](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) if you are not part of it already.\n\n\u003c!-- *********************************************************************** --\u003e\n\n\u003ca name=\"contributing\"\u003e\u003c/a\u003e\n\n## Contributing\n\nPlease check our [Contribution Guidelines](/CONTRIBUTING.md).\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP%2Fui5-webcomponents-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FSAP%2Fui5-webcomponents-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FSAP%2Fui5-webcomponents-react/lists"}