UI5 Web Components are framework-independent UI elements incorporating the SAP Fiori design. UI5 Web Components share the fundamental enterprise-grade features of UI5 such as stability, accessibility and theming support. The UI5 Web Components project aims to achieve easier consumption of UI5 controls, lower entry barrier to UI5 controls use for own applications and less complexity of the UI5 rendering-stack by making the utilization of the full-stack UI5 optional. UI5 Web Components target web developers who want to have more flexibility to use just HTML tags or arbitrary JS frameworks.
UI5 Web Components are shipped as ES6 modules and published on NPM. If you are already using a framework that handles bundling of ES6 modules, skip forward to Installation or check the Tutorials section.
Creating a project
npm init @vitejs/app
- Select a project name:
- Select a framework:
- Select a variant:
This command will create a project structure under
my-webcomponents-app. Follow the instructions on the screen to install the initial depenednecies and start a dev server.
cd my-webcomponents-app npm install npm run dev
You should see a message that a server is running on
Local: http://localhost:3000/. Launch your favourite IDE and change some code, the browser page will be automatically refreshed.
npm install @ui5/webcomponents
This command downloads the published source code of the UI5 Web Components to the
node_modules folder. Now you can add them to your code to get them on the web page.
Take a look at the available UI5 Web Components documentation in the playground.
1. Import the needed Web Component.
// src/main.js import "@ui5/webcomponents/dist/Button.js";
This line runs the code that registers the
<ui5-button> tag with the browser. Now when the browser sees such a tag, it knows how to render it.
2. Instantiate the Web Component.
Next, change the application markup in the same file to display the button on the page:
// src/main.js ... document.querySelector('#app').innerHTML = ` <ui5-button>Hello UI5 Web Components</ui5-button> `
Check the browser to see the displayed button. You can now use UI5 Web Components just like normal HTML elements - set attributes on them, attach events, and more as described in the documentation.
3. Run a Production Build
If you want to deploy your project on a static hosting or in a Node.js project, run:
npm run build
The output will show what files were created along with their sizes:
vite v2.3.4 building for production... ✓ 99 modules transformed. dist/assets/favicon.17e50649.svg 1.49kb dist/index.html 0.51kb dist/assets/index.ccce2ca3.css 0.16kb / brotli: 0.10kb dist/assets/index.4116dceb.js 0.12kb / brotli: 0.09kb dist/assets/vendor.c05c7785.js 114.92kb / brotli: 24.30kb
The contents of the
dist folder is ready to be deployed for productive usage. The hashes in the file names make them safe for caching and the produced bundle is optimized for production.