Webcomponents React

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:

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

Packages Overview

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

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

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.

Recommended Installation

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.

Minimal Installation

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';

Importing Assets

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';

End of Support for Version 1.x

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.

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

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>
   

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.