UI5/webcomponents-react: A wrapper implementation for React of the UI5 Web Components that are compliant with the SAP Fiori User Experience · GitHub

ui5-webcomponents-react is providing a Fiori-compliant React implementation by leveraging the UI5 Web Components.

You can find our documentation under the following links:

• Stable Release Documentation
• Nightly Release Documentation
• V1 Release Documentation

• @ui5/webcomponents-react - Main Package

  

• @ui5/webcomponents-react-charts - Charts Package (deprecated)

  

• @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-ai Package

  

• 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.

You can install @ui5/webcomponents-react along with the required peer-dependencies based on the components you plan to use. In most cases, the recommended installation is the most maintainable option.

Install @ui5/webcomponents-react along with the @ui5/webcomponents and @ui5/webcomponents-fiori peer-dependencies as dependencies in your project:

npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori

Note: If you import anything from another @ui5/webcomponents-xyz package, we recommend installing it as a dependency as well, even if it’s already included through another package.

Since version v2.14.0 of @ui5/webcomponents-react, @ui5/webcomponents-fiori is an optional peer-dependency. You will still need to install it if:

• You want to use any component from the @ui5/webcomponents-fiori package.
• You want to use the VariantManagement component.
• You import anything from the @ui5/webcomponents-fiori package.

npm install @ui5/webcomponents-react @ui5/webcomponents

Note: Most popular bundlers enable tree-shaking for production builds, so there’s no difference in the final bundle size between the recommended and minimal installations.

⚠️ Warning

If your bundler does not support tree-shaking, you must use subpath imports.

Otherwise, since @ui5/webcomponents-react re-exports all components, every component (including those that depend on the @ui5/webcomponents-fiori package) will be included in your bundle, which will lead to errors due to the missing module.

✅ Do:

import { Button } from '@ui5/webcomponents-react/Button';

❌ Don’t:

import { Button } from '@ui5/webcomponents-react';

The default assets import (import '@ui5/webcomponents-react/dist/Assets.js';) includes assets from the fiori package. Due to a limitation of Next.js (top-level await is not supported), we can't dynamically import the assets based on the installed packages. If you are using the minimal installation, please import the assets manually as follows:

import '@ui5/webcomponents/dist/Assets.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n.js';

//fetch
import '@ui5/webcomponents/dist/Assets-fetch.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n-fetch.js';

//node
import '@ui5/webcomponents/dist/Assets-node.js';
import '@ui5/webcomponents-react/dist/json-imports/i18n-node.js';

The support for version 1.x of ui5-webcomponents-react has ended on July 1, 2025. We recommend migrating to version 2.x as soon as possible. For more information, please refer to our Migration Guide.

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.

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.

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.

You can find a curated list of project templates and examples on our Project Templates & Examples page.

1. Install all required dependencies

2. Import the ThemeProvider component and wrap your root component with it:

   import { ThemeProvider } from '@ui5/webcomponents-react/ThemeProvider';
   ...
   createRoot(document.getElementById('root') as HTMLElement).render(
     <ThemeProvider>
       <App />
     </ThemeProvider>,
   );

3. Use @ui5/webcomponents-react components in your app by importing them. For example, to use the Button component you need to import it:

   import { Button } from '@ui5/webcomponents-react/Button'; // loads ui5-button wrapped in a ui5-webcomponents-react component

4. Add the imported component to your JSX:

   <Button onClick={() => alert('Hello World!')}>Hello world!</Button>

UI5 Web Components for React supports the same browsers and respective versions as UI5 Web Components.

Please take a look at our GitHub Issues.

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.

Please check our Contribution Guidelines.