Repository files navigation

• A rich set ofenterprise-grade reusable UI elements driven by alightweight framework (~20K gzipped for the framework part).
• Suitable for building anything fromstatic web sites tocomplex web applications.
• Usable with any current or futureweb development framework (React, Angular, Vue, etc.).
• Implement theSAP Fiori design and follow theSAP Fiori Design Guidelines for a consistent UX.
• Created and maintained bySAP as part of theUI5 product family.

• Future-proof: beingweb standards, they are compatible with any version of any web development framework.
• Encapsulated: the HTML/CSS in theshadow DOM are protected from interference by the web page and vice versa, making them stable in any environment and suitable not only for apps, but also forlibraries and micro-frontends.
• Elegant: beingcustom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.

• Playground and API Reference

• UI5 Web Components Home Page
• Configuring UI5 Web Components
• Customizing withUI Theme Designer
• Creating a Custom UI5 Web Components Package
• Developing Custom UI5 Web Components
• Micro-Frontends and Custom Elements Scoping
• Release Management
• F.A.Q.

OpenUI5 is an open source JS framework that lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice. It's based on JavaScript, using jQuery as its foundation and follows web standards. It eases your development with a client-side HTML5 rendering library including a rich set of controls and supports data binding to different data models (JSON, XML and OData).

UI5 Web Components…

• …arenot built on top of UI5, but rather lightweight and independent UI elements.
• …arenot a successor of UI5, but rather a complementary offering.
• …bring the relevantUI5 qualities and SAP Fiori UX to the HTML level, usable with any web framework.

UI5 Web Components are good for…

• …web applications whichalready use a different web framework.
• …static web sites built without web frameworks, to just add a few interactive UI elements.

UI5 remains what it is: the best choice for…

• …building completeenterprise-ready and responsive web applications.

UI5 Web Components for React is a wrapper implementation aroundUI5 Web Components which makes using them in React even more comfortable. The current version of React (react 18) has someshortcomings when it comes to handling Custom Elements, namely the binding ofboolean attributes as well as adding event listeners to custom event names likeselection-change. With the help of UI5 Web Components for React, you can use the UI5 Web Components in React as if they were native React components. In addition to that, this library is also offering TypeScript definitions for all components, some complex layout components built on top of UI5 Web Components as well as Charting Components.

UI5 Web Components for Angular is a wrapper implementation aroundUI5 Web Components which to make it work with Angular without needing to use theCUSTOM_ELEMENTS_SCHEMA orNO_ERRORS_SCHEMA schemas.Moreover, all Angular-specific features, such as two-way data binding and Angular Form support, work out of the box.

1. Install the NPM module(s) that ship the desired UI5 Web Component(s), for example if you needui5-button:

   npm install @ui5/webcomponents

2. Import the desired UI5 Web Component(s) to your app:

   import"@ui5/webcomponents/dist/Button.js";// loads and defines ui5-button

3. Use the UI5 Web Component(s) as you would use any HTML element:

   <ui5-button>Hello world!</ui5-button>

   For more information, seeImporting UI5 Web Components andUnderstanding UI5 Web Components APIs.

TypeScript Support is enabled for both component development and component consumption.Since version1.11.0, we have been providing TypeScript definitions under an experimental flag, and starting from version1.19.0, all TypeScript definitions are consideredstable.

No, you are expected to import only the components (or other public APIs) that you are going to use and bundle them along with the restof your application.

UI5 Web Components are supported by all major modern browsers.

This section might be of interest to you mainly if you need to run or build the project locally

• Node.js (version 21 or higher)
• Yarn (version 1.22 or higher)

Note: The UI5 Web Components project is set up with theYarn node package manager.This is because it offers functionality that the otherwise preferrednpm package manager is currently lacking. Namely, theworkspace setting which is currently used in theUI5 Web Components (mono-)repository. Note that npmmight add this feature in the future.

The UI5 Web Components project contains several packages:

yarn# to install all dependenciesyarn start# to serve the project

A dev server will be started and the browser will open its index URL with a listing of all test pages.

You can start the website app with the following commands:

yarn# to install all dependencies# start the playground from the project rootyarn start:website# open http://localhost:3000/ui5-webcomponents/nightly/

Note: If you wish to manually install dependencies & run the Playground you can check out ourin depth tutorial

To build the UI5 Web Components project, run the following commands:

yarn# to install all dependenciesyarn ci:releasebuild# to build the project

Afterwards, you can find the build output in thedist folder of the corresponding package folder.For example, to find the Button component (that belongs to themain package), look inside thepackages/main/dist folder.

None as of 1.24.0

No major bugs known. To report an issue or view the currently open issues, clickhere.

We welcome all comments, suggestions, questions, and bug reports. Please follow ourSupport Guidelines on how to report an issue, or chat with us in the#webcomponents channel of theOpenUI5 Community Slack.

Please check ourContribution Guidelines.