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

  

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

  

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:

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

Ongoing Support for Version 1.x

We will continue to support version 1.x until the end of the year, 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:

npm 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:

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

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:

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

Then, you can use the Button in your app:

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