Gathering detailed insights and metrics for @ui5/webcomponents-react-base
Gathering detailed insights and metrics for @ui5/webcomponents-react-base
A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience
Installations
npm install @ui5/webcomponents-react-baseDeveloper Guide
BETA
Typescript
Yes
Module System
ESM
Node Version
22.17.0
NPM Version
lerna/8.2.3/node@v22.17.0+x64 (linux)
Releases
322
Languages
6
TypeScript
MDX
CSS
JavaScript
HTML
Makefile
TypeScript (87.55%)
MDX (8.18%)
CSS (3.19%)
JavaScript (0.89%)
HTML (0.19%)
Developer
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
GitHub Statistics
Apache-2.0 License
502 Stars
5,588 Commits
103 Forks
14 Watchers
29 Branches
658 Contributors
Updated on Jul 10, 2025
Maintainers
3
Package Meta Information
Latest Version
2.12.0
Package Id
@ui5/webcomponents-react-base@2.12.0
Unpacked Size
269.91 kB
Size
43.07 kB
File Count
56
NPM Version
lerna/8.2.3/node@v22.17.0+x64 (linux)
Node Version
22.17.0
Published on
Jul 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
3
ui5-webcomponents-react is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components.
Resources
You can find our documentation under the following links:
Packages Overview
-
@ui5/webcomponents-react - Main Package
-
@ui5/webcomponents-react-charts - Charts Package
-
@ui5/webcomponents-react-base - Base Package
-
@ui5/webcomponents-react-compat - Legacy Components Package
-
@ui5/webcomponents-react-cli - Wrapper Generation & Code-Mod Package
-
@ui5/webcomponents-cypress-commands - Custom Cypress Commands & Queries Package
-
@ui5/webcomponents-ai-react - React wrapper for the
@ui5/webcomponents-aiPackage
Requirements
- React and React-DOM (18.0.0 or higher)
- Node.js (LTS version)
- If you're using TypeScript we recommend version 4.7 or later.
Download and Installation
To consume ui5-webcomponents-react, you need to install the npm modules and required peer dependencies:
1npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
Ongoing Support for Version 1.x
We will continue to support version 1.x until end of June 2025, focusing on bug fixes to ensure continuity for our existing users.
Getting Started
Tutorial
You are new to UI5 Web Components for React and don't know where to start?
Then take a look at our Tutorial Mission at “SAP Developers”!
There you get a first glimpse at how easy it is to create an Application with UI5 Web Components for React.
In 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.
SAP Devtoberfest 2024 session
In the SAP Devtoberfest 2024 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.
SAP Devtoberfest 2023 session
Here 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.
For 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.
Examples & Templates
You can find a curated list of project templates and examples on our Project Templates & Examples page.
Add @ui5/webcomponents-react to an existing app
First of all, you need to add the @ui5/webcomponents-react dependency to your project. Please also keep in mind installing the required peer dependencies:
1npm install @ui5/webcomponents @ui5/webcomponents-react @ui5/webcomponents-fiori
In order to use @ui5/webcomponents-react you have to wrap your application's root component into the ThemeProvider.
You will find this component most likely in src/index.js:
1import { ThemeProvider } from '@ui5/webcomponents-react'; 2... 3const root = createRoot(document.getElementById("root")); 4root.render( 5 <ThemeProvider> 6 <App /> 7 </ThemeProvider> 8);
Then you are ready to use @ui5/webcomponents-react and you can import the desired component(s) in your app:
For example, to use the Button component you need to import it:
1import { Button } from '@ui5/webcomponents-react'; // loads ui5-button wrapped in a ui5-webcomponents-react component
Then, you can use the Button in your app:
1<Button onClick={() => alert('Hello World!')}>Hello world!</Button>
Browser Support
UI5 Web Components for React supports the same browsers and respective versions as UI5 Web Components.
Known Issues
Please take a look at our GitHub Issues.
How to obtain support
We welcome all comments, suggestions, questions, and bug reports. Feel free to open issues or chat with us directly in the #webcomponents-react channel in the
OpenUI5 Community Slack.
Please note that you have to join this Slack workspace via this link if you are not part of it already.
Contributing
Please check our Contribution Guidelines.
No vulnerabilities found.
Reason
30 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE:0
Reason
no binaries found in the repo
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/SAP/.github/SECURITY.md:1
- Info: Found linked content: github.com/SAP/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/SAP/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/SAP/.github/SECURITY.md:1
Reason
SAST tool is run on all commits
Details
- Info: SAST configuration detected: CodeQL
- Info: all commits (28) are checked with a SAST tool
Reason
Found 16/18 approved changesets -- score normalized to 8
Reason
dependency not pinned by hash detected -- score normalized to 1
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/chromatic.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/chromatic.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/chromatic.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/chromatic.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/chromatic.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/codeql-analysis.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/codeql-analysis.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/codeql-analysis.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:70: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/codeql-analysis.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-stable.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/docs-stable.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs-stable.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/docs-stable.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs-stable.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/docs-stable.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:61: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:93: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/examples.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/examples.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:113: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:116: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:129: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:44: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:92: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:94: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/main.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/open-source-security.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/open-source-security.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/open-source-security.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/open-source-security.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/open-source-security.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/open-source-security.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-comments.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-comments.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-comments.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-comments.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-comments.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-comments.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-custom-tag.yml:31: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-custom-tag.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-custom-tag.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-custom-tag.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-snapshot.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-snapshot.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-snapshot.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release-snapshot.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:73: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/release.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/stale.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/test.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:45: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/test.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/test.yml:67: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents-react/test.yml/main?enable=pin
- Warn: npmCommand not pinned by hash: .github/workflows/release-custom-tag.yml:44
- Warn: npmCommand not pinned by hash: .github/workflows/release-snapshot.yml:34
- Warn: npmCommand not pinned by hash: .github/workflows/release.yml:47
- Warn: npmCommand not pinned by hash: .github/workflows/release.yml:80
- Info: 0 out of 40 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 10 third-party GitHubAction dependencies pinned
- Info: 3 out of 7 npmCommand dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Info: jobLevel 'actions' permission set to 'read': .github/workflows/codeql-analysis.yml:28
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/codeql-analysis.yml:29
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/docs-stable.yml:16
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-custom-tag.yml:28
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-snapshot.yml:18
- Info: jobLevel 'contents' permission set to 'read': .github/workflows/release.yml:33
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release.yml:63
- Warn: no topLevel permission defined: .github/workflows/chromatic.yml:1
- Warn: no topLevel permission defined: .github/workflows/codeql-analysis.yml:1
- Warn: no topLevel permission defined: .github/workflows/docs-stable.yml:1
- Warn: no topLevel permission defined: .github/workflows/examples.yml:1
- Warn: no topLevel permission defined: .github/workflows/main.yml:1
- Warn: no topLevel permission defined: .github/workflows/open-source-security.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-comments.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-custom-tag.yml:1
- Warn: no topLevel permission defined: .github/workflows/release-snapshot.yml:1
- Warn: no topLevel permission defined: .github/workflows/release.yml:1
- Warn: no topLevel permission defined: .github/workflows/stale.yml:1
- Warn: no topLevel permission defined: .github/workflows/test.yml:1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
16 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
- Warn: Project is vulnerable to: GHSA-pq67-2wwv-3xjx
- Warn: Project is vulnerable to: GHSA-8cj5-5rvv-wf4v
- Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
6.1
/10
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More