Components Packages

This section gives overview on the available components packages of web components and how to make use of them in your projects.

The UI5 Web Components project currently offers 3 NPM packages with Web Components. This separation is purely logical, as you can, and should, only import the components you are going to use.

Project	NPM Package	Description	Application	Components List
main	@ui5/webcomponents	"Bread-and-butter" components, such as buttons, pickers, inputs, list, table, etc.	General web apps	Explore
fiori	@ui5/webcomponents-fiori	More semantic, higher-order components that implement Fiori patterns	Mostly SAP Fiori apps	Explore
ai	@ui5/webcomponents-ai	Provides web components implementing AI-related visual and interaction.	Mostly SAP Fiori apps	Explore

Usage

1. Install one or all of the above packages as dependencies to your project.

npm i @ui5/webcomponents
npm i @ui5/webcomponents-fiori
npm i @ui5/webcomponents-ai

2. Import the components your app is going to use.

import "@ui5/<PACKAGE-NAME>/dist/<COMPONENT-NAME>.js";

For example:

import "@ui5/webcomponents/dist/Button.js"; // ui5-button
import "@ui5/webcomponents/dist/Input.js"; // ui5-input
import "@ui5/webcomponents/dist/List.js"; // ui5-list
import "@ui5/webcomponents/dist/ListItemStandard.js"; // ui5-li

import "@ui5/webcomponents-fiori/dist/Wizard.js"; // ui5-wizard

import "@ui5/webcomponents-fiori/dist/PromtInput.js"; // ui5-prompt-input

3. Use the components in your app.

Once a component is imported, it is automatically registered and ready to use.

For example:

<ui5-button id="btn">This is a button</ui5-button>
<ui5-input value="This is an input"></ui5-input>
<script>
    btn.addEventListener("click", () => {});
</script>

Note: For most components the name of the module (f.e. Button.js, Icon.js) coincides with the name of the tag (ui5-button, ui5-icon), whereas for others this is not the case (f.e. ListItemStandard.js and ui5-li). Always consult the documentation when in doubt.