UI5 Web Components
- A rich set of enterprise-grade reusable UI elements driven by a lightweight framework (~20K gzipped).
- Suitable for building anything from static web sites to complex web applications.
- Usable with any current or future web development framework (React, Angular, Vue, etc...).
- Implement the SAP Fiori design and follow the SAP Fiori Design Guidelines for a consistent UX.
- Created and maintained by SAP as part of the UI5 product family.
Why use web components?
- Future-proof: being web standards, they are compatible with any version of any web development framework.
- Encapsulated: the HTML/CSS in the shadow 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 for libraries and micro-frontends.
- Elegant: being custom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.
Where can I see them in action?
- UI5 Web Components Home Page
- List of all components and other public APIs
- Configuring UI5 Web Components
- Creating a custom theme
- Creating custom UI5 Web Components
- Creating custom UI5 Web Components NPM packages
- Micro-frontends and Custom elements scoping
1. What is UI5/OpenUI5?
2. How do UI5 Web Components relate to OpenUI5?
UI5 Web Components…
- …are not built on top of UI5, but rather lightweight and independent UI elements
- …are not a successor of UI5, but rather a complementary offering
- …bring the relevant UI5 qualities and SAP Fiori UX to the HTML level, usable with any web framework
UI5 Web Components are good for…
- …web applications which already 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 complete enterprise-ready and responsive web applications
UI5 Web Components for React
UI5 Web Components for React is a wrapper implementation around
UI5 Web Components which makes using them in React even more comfortable. The current version of React (
react 16) has some
shortcomings when it comes to handling Custom Elements, namely the binding of
boolean attributes as well as adding event listeners to custom event names like
selection-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.
How to use
Install the NPM module(s) that ship the desired UI5 Web Component(s), for example if you need
npm install @ui5/webcomponents
Import the desired UI5 Web Component(s) to your app:
import "@ui5/webcomponents/dist/Button.js"; // loads and defines ui5-button
Use the UI5 Web Component(s) as you would use any HTML element:
For more on using UI5 Web Components, click here.
Note: For a full list of the UI5 Web Components (and the respective NPM modules that ship them), see Public module imports.
Is there a CDN I can use?
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 rest of your application.
UI5 Web Components are supported by all major modern browsers.
Project structure, development and build
This section might be of interest to you mainly if you need to run or build the project locally
Note: The UI5 Web Components project is set up with the Yarn node package manager. This is because it offers functionality that the otherwise preferred npm package manager is currently lacking. Namely, the workspace setting which is currently used in the UI5 Web Components (mono-)repository. Note that npm might add this feature in the future.
UI5 Web Components contains several projects (NPM packages):
||UI5 Web Components||Bread-and-butter components (buttons, inputs, popups, pickers, tables, etc...) that are generally found in web apps.|
||UI5 Web Components Fiori||More semantic components, specific to the Fiori UX (shell bar, side navigation, etc...) that are commonly found in SAP apps.|
||UI5 Web Components Icons||A rich icons collection (
||UI5 Web Components Base||The UI5 Web Components framework itself|
||UI5 Web Components Theme Base||Theming assets (the default theme and additional accessibility themes)|
||UI5 Web Components Localization||
||UI5 Web Components IE11||Internet Explorer 11 polyfills and adapter code|
||N/A||The playground application|
* This package is deprecated as Internet Explorer 11 is no longer supported by UI5 Web Components. While the
@ui5/webcomponents-ie11 package allows UI5 Web Components to run on old browsers (IE11, legacy Edge) today,
future compatibility is not guaranteed and the project may stop working on old browsers even with the aid of this package. Use at your own risk.
How to run the project locally:
yarn # to install all dependencies yarn start # to serve the project
You can then explore component test pages on:
- http://localhost:8080/test-resources/pages/ for the
- http://localhost:8081/test-resources/pages/ for the
You can start the Playground app with the following commands:
# install playground specific dependencies (one time only) cd packages/playground yarn install:dependencies # start the playground from the project root cd ../.. yarn start:playground # open http://localhost:4000/
Note: If you wish to manually install dependencies & run the Playground you can check out our in depth tutorial
If you wish to run the tests locally on a Windows machine, you must also manually install
Windows Build Tools 2015 and
See the instructions on how to do this.
To build the UI5 Web Components project, run the following commands:
yarn # to install all dependencies yarn build # to build the project
Afterwards, you can find the build output in the
dist folder of the corresponding package folder.
For example, to find the Button component (that belongs to the
main package), look inside the
None as of 1.0.0-rc.8
No major bugs known. To report an issue or view the currently open issues, click here.
We welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the
#webcomponents channel of the OpenUI5 Community Slack.
Please check our Contribution Guidelines.