Package detail

@ui5/webcomponents-tools

UI54.8kApache-2.02.15.0

UI5 Web Components: webcomponents.tools

openui5, sapui5, ui5

What are UI5 Web Components?

A rich set of enterprise-grade reusable UI elements driven by a lightweight framework (~20K gzipped for the framework part).
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?

Playground and API Reference

More Resources

OpenUI5

1. What is UI5/OpenUI5?

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

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

UI5 Web Components for Angular

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

How to Use

Install the NPM module(s) that ship the desired UI5 Web Component(s), for example if you need ui5-button:
```
 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:
```
 <ui5-button>Hello world!</ui5-button>
```
For more information, see Importing UI5 Web Components and Understanding UI5 Web Components APIs.

Typescript Support

TypeScript Support is enabled for both component development and component consumption. Since version 1.11.0, we have been providing TypeScript definitions under an experimental flag, and starting from version 1.19.0, all TypeScript definitions are considered stable.

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.

Browser Support

UI5 Web Components are supported by all major modern browsers.

Browser	Supported versions
Chrome	Latest two stable releases
Firefox	Latest two stable releases
Safari	Latest two stable releases
Edge	Latest two stable releases

Project Structure, Development and Build

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

Requirements

Node.js (version 21 or higher)
Yarn (version 1.22 or higher for branches released before v2.15)
Yarn v4 is managed via Corepack, run corepack enable in case the yarn command is not found.

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.

Structure

The UI5 Web Components project contains several packages:

Project	NPM Package	Description
`main`	UI5 Web Components - Main	Bread-and-butter components (buttons, inputs, popups, pickers, tables, etc.) that are generally found in web apps.
`fiori`	UI5 Web Components - Fiori	More semantic components, specific to the Fiori UX (shell bar, side navigation, etc.) that are commonly found in SAP apps.
`icons`	UI5 Web Components - Icons	A rich icons collection (`SAP-icons`), suitable for enterprise-grade apps
`icons-tnt`	UI5 Web Components - Icons TNT	A rich icons collection (`SAP-icons-TNT`), suitable for more technical apps
`icons-business-suite`	UI5 Web Components - Icons Business Suite	A rich icons collection (`BusinessSuiteInAppSymbols`), suitable for SAP Fiori apps
`base`	UI5 Web Components - Base	The UI5 Web Components framework itself
`theming`	UI5 Web Components - Theming	Theming assets (the default theme and additional accessibility themes)
`localization`	UI5 Web Components - Localization	`i18n` functionality and `CLDR` assets
`create-package`	Create Webcomponents Package	An `npm init` script for creating new UI5 Webcomponents Packages
`playground`	N/A	The playground application

How to run the project locally:

yarn # to install all dependencies
yarn 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.

How to start Website (Docs & Samples):

You can start the website app with the following commands:

yarn # to install all dependencies

# start the playground from the project root
yarn start:website

# open http://localhost:3000/webcomponents/nightly/

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

Production Build

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

yarn # to install all dependencies
yarn ci:releasebuild # 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 packages/main/dist folder.

Limitations

None as of 1.24.0

Known Issues

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

Support

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.

Contribute

Please check our Contribution Guidelines.

changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.15.0 (2025-10-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.15.0-rc.3 (2025-10-02)

Note: Version bump only for package @ui5/webcomponents-tools

2.15.0-rc.2 (2025-09-25)

Note: Version bump only for package @ui5/webcomponents-tools

2.15.0-rc.1 (2025-09-25)

Bug Fixes

ui5-illustrated-message: fix imports filter (#12271) (f62d703)

2.15.0-rc.0 (2025-09-11)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0 (2025-09-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.7 (2025-09-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.6 (2025-08-29)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.5 (2025-08-28)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.4 (2025-08-25)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.3 (2025-08-22)

Bug Fixes

tools: correct strip unused theming base content (#12133) (a97901d)

2.14.0-rc.2 (2025-08-21)

Bug Fixes

framework: use font-face declarations from theming-base-content (#12144) (50deee9)

2.14.0-rc.1 (2025-08-14)

Note: Version bump only for package @ui5/webcomponents-tools

2.14.0-rc.0 (2025-08-07)

Note: Version bump only for package @ui5/webcomponents-tools

2.13.0 (2025-08-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.13.0-rc.3 (2025-07-31)

Note: Version bump only for package @ui5/webcomponents-tools

2.13.0-rc.2 (2025-07-24)

Note: Version bump only for package @ui5/webcomponents-tools

2.13.0-rc.1 (2025-07-17)

Note: Version bump only for package @ui5/webcomponents-tools

2.13.0-rc.0 (2025-07-10)

Note: Version bump only for package @ui5/webcomponents-tools

2.12.0 (2025-07-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.12.0-rc.3 (2025-07-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.12.0-rc.2 (2025-06-26)

Note: Version bump only for package @ui5/webcomponents-tools

2.12.0-rc.1 (2025-06-19)

Note: Version bump only for package @ui5/webcomponents-tools

2.12.0-rc.0 (2025-06-12)

Note: Version bump only for package @ui5/webcomponents-tools

2.11.0 (2025-06-05)

Note: Version bump only for package @ui5/webcomponents-tools

2.11.0-rc.4 (2025-06-05)

Features

ui5-illustrated-message: added new illustration types (#11560) (5517e2c)

2.11.0-rc.3 (2025-05-29)

Features

add Assets-node module for node/ssr env (#11522) (4a874cc)

2.11.0-rc.2 (2025-05-22)

Note: Version bump only for package @ui5/webcomponents-tools

2.11.0-rc.1 (2025-05-15)

Note: Version bump only for package @ui5/webcomponents-tools

2.11.0-rc.0 (2025-05-08)

Note: Version bump only for package @ui5/webcomponents-tools

2.10.0 (2025-05-07)

Note: Version bump only for package @ui5/webcomponents-tools

2.10.0-rc.3 (2025-05-01)

Bug Fixes

escape backslash when processing component's css (#11425) (2c4dc74)

Features

ui5-button: make click button preventable (#11318) (1f4aa92)

2.10.0-rc.2 (2025-04-24)

Note: Version bump only for package @ui5/webcomponents-tools

2.10.0-rc.1 (2025-04-17)

Note: Version bump only for package @ui5/webcomponents-tools

2.10.0-rc.0 (2025-04-14)

Note: Version bump only for package @ui5/webcomponents-tools

2.9.1-rc.0 (2025-04-10)

Note: Version bump only for package @ui5/webcomponents-tools

2.9.0 (2025-04-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.9.0-rc.3 (2025-04-03)

Bug Fixes

framework: fix fetching "id" (indonesian) language (#11251) (9a36df5), closes #11233

2.9.0-rc.2 (2025-03-27)

Note: Version bump only for package @ui5/webcomponents-tools

2.9.0-rc.1 (2025-03-20)

Bug Fixes

tools: fix icon imports to i18n texts (#11091) (472ffdc)

2.9.0-rc.0 (2025-03-13)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.1-rc.0 (2025-03-06)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.0 (2025-03-04)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.0-rc.3 (2025-02-27)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.0-rc.2 (2025-02-20)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.0-rc.1 (2025-02-13)

Note: Version bump only for package @ui5/webcomponents-tools

2.8.0-rc.0 (2025-02-06)

Note: Version bump only for package @ui5/webcomponents-tools

2.7.0 (2025-02-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.7.0-rc.2 (2025-01-30)

Note: Version bump only for package @ui5/webcomponents-tools

2.7.0-rc.1 (2025-01-23)

Note: Version bump only for package @ui5/webcomponents-tools

2.7.0-rc.0 (2025-01-16)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.2 (2025-01-09)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.2-rc.0 (2025-01-09)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.1 (2025-01-08)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0 (2025-01-07)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0-rc.5 (2025-01-07)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0-rc.4 (2025-01-02)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0-rc.3 (2024-12-26)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0-rc.2 (2024-12-19)

Bug Fixes

build: generation of custom-elements.json (#10403) (c4eb55c)

2.6.0-rc.1 (2024-12-16)

Note: Version bump only for package @ui5/webcomponents-tools

2.6.0-rc.0 (2024-12-12)

Features

framework: add JSX template support with TypeScript (#10046) (f42e7c1)

2.5.0 (2024-12-05)

Note: Version bump only for package @ui5/webcomponents-tools

2.5.0-rc.3 (2024-12-05)

Features

framework: add strict event type checking (#10235) (4ff8ab7)

2.5.0-rc.2 (2024-11-28)

Note: Version bump only for package @ui5/webcomponents-tools

2.5.0-rc.1 (2024-11-21)

Note: Version bump only for package @ui5/webcomponents-tools

2.5.0-rc.0 (2024-11-14)

Note: Version bump only for package @ui5/webcomponents-tools

2.4.1-rc.0 (2024-11-07)

Note: Version bump only for package @ui5/webcomponents-tools

2.4.0 (2024-11-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.4.0-rc.4 (2024-10-31)

Note: Version bump only for package @ui5/webcomponents-tools

2.4.0-rc.3 (2024-10-28)

Bug Fixes

dev-server correctly imports yargs (#10048) (7b5aa5e)

2.4.0-rc.2 (2024-10-24)

Note: Version bump only for package @ui5/webcomponents-tools

2.4.0-rc.1 (2024-10-17)

Bug Fixes

scoping issues and document how scoping is used correctly (#10023) (ee808c3)
tools: revert tsconfig moduleResolution to node (#10014) (0724b92)

2.4.0-rc.0 (2024-10-10)

Bug Fixes

require handlebar file names processed by hbs2ui5 tool to end with the '.hbs' extension (#9992) (1b23f3d)

Features

enhance [@event](https://github.com/event) decorator (#9944) (fe1d816)

2.3.1-rc.0 (2024-10-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.3.0 (2024-10-02)

Note: Version bump only for package @ui5/webcomponents-tools

2.3.0-rc.3 (2024-09-26)

Bug Fixes

nps.js works with the JS flow (#9942) (b42ef95)

2.3.0-rc.2 (2024-09-19)

Note: Version bump only for package @ui5/webcomponents-tools

2.3.0-rc.1 (2024-09-12)

Note: Version bump only for package @ui5/webcomponents-tools

2.3.0-rc.0 (2024-09-05)

Note: Version bump only for package @ui5/webcomponents-tools

2.2.0 (2024-09-03)

Note: Version bump only for package @ui5/webcomponents-tools

2.2.0-rc.3 (2024-08-29)

Note: Version bump only for package @ui5/webcomponents-tools

2.2.0-rc.2 (2024-08-22)

Note: Version bump only for package @ui5/webcomponents-tools

2.2.0-rc.1 (2024-08-15)

Note: Version bump only for package @ui5/webcomponents-tools

2.2.0-rc.0 (2024-08-08)

Features

core: add asset files with fetch URLs (#9591) (f039cf6)

2.1.1 (2024-08-02)

Note: Version bump only for package @ui5/webcomponents-tools

2.1.0 (2024-08-02)

Note: Version bump only for package @ui5/webcomponents-tools

2.1.0-rc.3 (2024-08-01)

Note: Version bump only for package @ui5/webcomponents-tools

2.1.0-rc.2 (2024-07-25)

Note: Version bump only for package @ui5/webcomponents-tools

2.1.0-rc.1 (2024-07-18)

Note: Version bump only for package @ui5/webcomponents-tools

2.1.0-rc.0 (2024-07-11)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.1 (2024-07-05)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.0 (2024-07-03)

Bug Fixes

template result comparison (#9279) (3a02e3e)

Features

add property initializers (#8846) (eef0cc9)

BREAKING CHANGES

@property decorator must be adapted according to new type parameter

2.0.0-rc.6 (2024-06-17)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.0-rc.5 (2024-06-06)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.0-rc.4 (2024-05-29)

Features

ui5-input: allow custom icon styling (#8881) (cf9f1c2), closes #8182 #6132

2.0.0-rc.3 (2024-05-10)

chore

Icons: make pathData async (#8785) (0549dc9)

Code Refactoring

theming: remove Belize theme (#8519) (990313f), closes #8461

BREAKING CHANGES

theming: Remove SAP Belize theme
Icons: UI5 Web Components Icons now export getPathData (function) instead of pathData (string)

If you used icons like this:

import "@ui5/webcomponents-icons/dist/accept.js";

or like this:

import accept from "@ui5/webcomponents-icons/dist/accept.js";

there is no change and no adaptations are required.

In the rare case you imported pathData from icons, for example:

import { pathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
console.log(pathData); // String containing the SVG path

you must change your code to, for example:

import { getPathData, ltr, accData } from "@ui5/webcomponents-icons/dist/accept.js";
getPathData().then(pathData => {
  console.log(pathData); // String containing the SVG path
});

2.0.0-rc.2 (2024-04-18)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.0-rc.1 (2024-04-11)

Note: Version bump only for package @ui5/webcomponents-tools

2.0.0-rc.0 (2024-04-09)

chore

bring release-2.0 to main (#8651) (69271c9), closes #8494 #8496 #8461 #8497 #8461 #8504 #8509 #8507 #8511 #8501 #8461 #8503 #8461 #8506 #8502 #8524 #8461 #8525 #8461 #8518 #8461 #8526 #8529 #8528 #8531 #8532 #8534 #8163 #8527 #8538 #8521 #8461 #8542 #8461 #8548 #8555 #8559 #8565 #8570 #8558 #8568 #8596 #8192 #8606 #8605 #8600 #8602 #8593

BREAKING CHANGES

"Device#isIE" method has been removed and no longer available

Removed the CSP.js module and the creation of <style> and <link> tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used:

import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js"
import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js"

Removed the ICardHeader interface. If you previously used the interface

import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js"

Use the CardHeader type instead:

import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js"

Removed the IUploadCollectionItem interface. If you previously used the interface:

import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js"

Use the UploadCollectionItem type instead:

import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js"

The size property now accepts different values. If you previously used it like:
```
<ui5-busy-indicator size="Small"></ui5-busy-indicator>
```
Now use the new values instead:
```
<ui5-busy-indicator size="S"></ui5-busy-indicator>
```

The status property and its shadow part have been renamed. If you previously used them:

<style>
  .cardHeader::part(status) { ... }
</style>
<ui5-card-header status="3 of 10"></ui5-popover>

Now use additionalText instead:

<style>
     .cardHeader::part(additional-text) { ... }
</style>
<ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header>

The pageIndicatorStyle no longer exists. If you previously used it like:

<ui5-carousel page-indicator-style="Numeric"></ui5-carousel>

Now you should use pageIndicatorType instead:

<ui5-carousel page-indicator-type="Numeric"></ui5-carousel>

Removed UI5Element#render method in favour of UI5Element#renderer. If you previously used "render"

class MyClass extends UI5Element {
  static get render() {
      return litRenderer;
  }
}

start using "renderer"

class MyClass extends UI5Element {
  static get renderer() {
      return litRenderer;
  }
}

Remove JavaScript template option from @ui5/create-webcomponents-package Previously npm init @ui5/webcomponents-package used to create JS-based project, however now it will be TypeScript-based project. If you previously used npm init @ui5/webcomponents-package --enable-typescript to create TypeScript-based project, now it's by default, e.g npm init @ui5/webcomponents-package and --enable-typescript is removed.
The Left and Right options option have been renamed. If you previously used them to set the placement or the alignment of the popover:
```
<ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover>
```
Now use Start or End instead:
```
<ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover>
```

docs: deploy v2 preview
Remove soccor icon. Use soccer instead.
Remove add-polygone icon. Use add-polygon instead.
The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the ui5-package/dist/api.json file, you can now use ui5-package/dist/custom-elements.json

All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package:

import "@ui5/webcomponents/dist/Assets-static.js";
import "@ui5/webcomponents-icons/dist/Assets-static.js"

use the dynamic equivalent of it:

import "@ui5/webcomponents/dist/Assets.js";
import "@ui5/webcomponents-icons/dist/Assets.js"

The event selected-dates-change is renamed to selection-change. In addition the event details values and dates are renamed to selectedValues and selectedDateValues. If you previously used the Calendar event as follows:

myCalendar.addEventListener("selected-dates-change", () => {
  const values = e.detail.values;
  const dates = e.detail.dates;
})

Now you have to use the new event name and details:

myCalendar.addEventListener("selection-change", () => {
 const values = event.detail.selectedValues;
 const dates = event.detail.selectedDateValues;
})

The property color is renamed to value. If you previously used the change event of the ColorPicker as follows:
```
<ui5-color-picker color="red"></ui5-color-picker>
```
Now you have to use it like this:
```
<ui5-color-picker value="red"></ui5-color-picker>
```

JavaScript projects may not function properly with the tools package.

The openPopover and showAt methods are removed in favor of open and opener properties. If you previously used the imperative API:

button.addEventListener("click", function(event) {
  colorPalettePopover.showAt(this);
});

Now the declarative API should be used instead:

<ui5-button id="opener">Open</ui5-button>
<ui5-color-palette-popover opener="opener">

button.addEventListener("click", function(event) {
  colorPalettePopover.open = !colorPalettePopover.open;
});

The ui5-bar component is now in main library. If you previously imported the ui5-bar from fiori:
```
import "@ui5/webcomponents-fiori/dist/Bar.js;
```
Now, import the ui5-bar from main:
```
import "@ui5/webcomponents/dist/Bar.js";
```

If you have previously used:

<ui5-tab id="nestedTab" slot="subTabs"></ui5-tab>

Now use:

<ui5-tab id="nestedTab" slot="items"></ui5-tab>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

If you have previously used:

<ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer>

Now use:

<ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

If you previously imported TabContainerBackgroundDesign, use BackgroundDesign instead.

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

The showOverflow property is removed. If previously you have used:

<ui5-tabcontainer show-overflow></ui5-tabcontainer>

now use the overflowButton slot:

<ui5-tabcontainer>
  <ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button>
  <ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button>
</ui5-tabcontainer>

Relates to https://github.com/SAP/ui5-webcomponents/issues/8461

The placementType property and the PopoverPlacementType enum have been renamed. If you have previously used the placementType property and the PopoverPlacementType

<ui5-popover placement-type="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js";

Now use placement instead:

<ui5-placement="Bottom"></ui5-popover>

import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js";

The size property of the ui5--illustrated-message is renamed to design. If you have previously used the size property:
```
<ui5-illustrated-message size="Dialog">
```
Now use design instead: `html<ui5-illustrated-message design="Dialog">


Related to https://github.com/SAP/ui5-webcomponents/issues/8461, https://github.com/SAP/ui5-webcomponents/issues/7887
* The `separator-style` property is renamed to  `separators` and the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`.
If you have previously used the `separator-style` property:
```html
<ui5-breadcrumbs separator-style="Slash">

Now use separators instead:

<ui5-breadcrumbs separators="Slash">

The disabled property of the ui5-option is removed. If you have previously used the disabled property:
```
<ui5-option disabled>Option</ui5-option>
```
it will no longer work for the component.

You can no longer import and implement the ITab interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.

1.24.0 (2024-04-04)

Note: Version bump only for package @ui5/webcomponents-tools

1.24.0-rc.4 (2024-04-04)

Note: Version bump only for package @ui5/webcomponents-tools

1.24.0-rc.3 (2024-03-28)

Features

framework: support sr, mk, cnr locales (#8534) (5b410d6), closes #8163

1.24.0-rc.2 (2024-03-21)

Note: Version bump only for package @ui5/webcomponents-tools

1.24.0-rc.1 (2024-03-15)

Note: Version bump only for package @ui5/webcomponents-tools

1.24.0-rc.0 (2024-03-14)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.1 (2024-03-08)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.1-rc.0 (2024-03-07)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.0 (2024-03-06)

Features

ui5-illustrated-message: introduced "Dot" size (#8343) (9c88f36), closes #8328

1.23.0-rc.5 (2024-02-29)

Bug Fixes

remove sap.ui.require call from unused openui5 module (#8359) (50219ac)

1.23.0-rc.4 (2024-02-26)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.0-rc.3 (2024-02-22)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.0-rc.2 (2024-02-20)

Note: Version bump only for package @ui5/webcomponents-tools

1.23.0-rc.1 (2024-02-19)

Bug Fixes

tools: fix usage of require in mjs (#8258) (cbca059)

1.23.0-rc.0 (2024-02-15)

Note: Version bump only for package @ui5/webcomponents-tools

1.22.1-rc.0 (2024-02-08)

Note: Version bump only for package @ui5/webcomponents-tools

1.22.0 (2024-02-05)

Note: Version bump only for package @ui5/webcomponents-tools

1.22.0-rc.3 (2024-02-01)

Note: Version bump only for package @ui5/webcomponents-tools

1.22.0-rc.2 (2024-01-25)

Note: Version bump only for package @ui5/webcomponents-tools

1.22.0-rc.1 (2024-01-18)

Features

illustration: use illustration name as default module export (#8074) (a9c0705)

1.22.0-rc.0 (2024-01-11)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0 (2024-01-05)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0-rc.5 (2024-01-04)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0-rc.4 (2023-12-28)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0-rc.3 (2023-12-21)

Bug Fixes

declare webpackChunkName in more generated dynamic imports (#8029) (c85fa23)

Features

tools: Optimize build by switching css processing to esbuild (#8008) (b4d411f)

1.21.0-rc.2 (2023-12-14)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0-rc.1 (2023-12-08)

Note: Version bump only for package @ui5/webcomponents-tools

1.21.0-rc.0 (2023-12-07)

Note: Version bump only for package @ui5/webcomponents-tools

1.20.0 (2023-12-04)

Note: Version bump only for package @ui5/webcomponents-tools

1.20.0-rc.3 (2023-11-30)

Features

1.20.0-rc.2 (2023-11-23)

Note: Version bump only for package @ui5/webcomponents-tools

1.20.0-rc.1 (2023-11-16)

Bug Fixes

declare webpackChunkName in generated dynamic imports for readable runtime bundle names (#7835) (592a10b)

1.20.0-rc.0 (2023-11-09)

Note: Version bump only for package @ui5/webcomponents-tools

1.19.0 (2023-11-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.19.0-rc.3 (2023-11-02)

Features

framework: switch default theme from Quartz Light to Morning Ho… (#7749) (10dadd7)

1.19.0-rc.2 (2023-10-26)

Note: Version bump only for package @ui5/webcomponents-tools

1.19.0-rc.1 (2023-10-19)

Bug Fixes

escape special characters when scoping CSS vars (#7704) (8888751)

1.19.0-rc.0 (2023-10-12)

Note: Version bump only for package @ui5/webcomponents-tools

1.18.1-rc.0 (2023-10-05)

Note: Version bump only for package @ui5/webcomponents-tools

1.18.0 (2023-10-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.18.0-rc.2 (2023-09-28)

Note: Version bump only for package @ui5/webcomponents-tools

1.18.0-rc.1 (2023-09-21)

Reverts

Revert "build: fix dev server page refresh" (105db9f)

1.18.0-rc.0 (2023-09-07)

Note: Version bump only for package @ui5/webcomponents-tools

1.17.0 (2023-09-01)

Note: Version bump only for package @ui5/webcomponents-tools

1.17.0-rc.2 (2023-08-24)

Note: Version bump only for package @ui5/webcomponents-tools

1.17.0-rc.1 (2023-08-17)

Features

framework: scope css variables per runtime and version (#7449) (d3f6c2e)

1.17.0-rc.0 (2023-08-10)

Bug Fixes

ui5-illustrated-message: support collection based illustration loading (#7318) (6b52dbd)

1.16.0 (2023-08-03)

Note: Version bump only for package @ui5/webcomponents-tools

1.16.0-rc.4 (2023-08-03)

Note: Version bump only for package @ui5/webcomponents-tools

1.16.0-rc.3 (2023-07-27)

Note: Version bump only for package @ui5/webcomponents-tools

1.16.0-rc.2 (2023-07-20)

Note: Version bump only for package @ui5/webcomponents-tools

1.16.0-rc.1 (2023-07-13)

Note: Version bump only for package @ui5/webcomponents-tools

1.16.0-rc.0 (2023-07-06)

Note: Version bump only for package @ui5/webcomponents-tools

1.15.0 (2023-06-30)

Bug Fixes

framework: missing CSS variables in compact mode / rtl mode (#7189) (9b39b9c)

1.15.0-rc.2 (2023-06-22)

Note: Version bump only for package @ui5/webcomponents-tools

1.15.0-rc.1 (2023-06-15)

Note: Version bump only for package @ui5/webcomponents-tools

1.15.0-rc.0 (2023-06-08)

Note: Version bump only for package @ui5/webcomponents-tools

1.14.0 (2023-06-01)

Note: Version bump only for package @ui5/webcomponents-tools

1.14.0-rc.2 (2023-06-01)

Note: Version bump only for package @ui5/webcomponents-tools

1.14.0-rc.1 (2023-05-25)

Note: Version bump only for package @ui5/webcomponents-tools

1.14.0-rc.0 (2023-05-18)

Note: Version bump only for package @ui5/webcomponents-tools

1.13.1 (2023-05-11)

Note: Version bump only for package @ui5/webcomponents-tools

1.13.0-rc.5 (2023-05-11)

Bug Fixes

create-webcomponents-package: fix package creation issues with test and lint (#6976) (dd70f3a)

1.13.0-rc.4 (2023-05-04)

Features

generate TS from HBS templates (#6558) (02611b2)

1.13.0-rc.3 (2023-04-27)

Note: Version bump only for package @ui5/webcomponents-tools

1.13.0-rc.2 (2023-04-20)

Note: Version bump only for package @ui5/webcomponents-tools

1.13.0-rc.1 (2023-04-13)

Bug Fixes

framework: correct fileName in component CSS import (#6900) (4d950c5)

1.13.0-rc.0 (2023-04-06)

Note: Version bump only for package @ui5/webcomponents-tools

1.12.0 (2023-04-04)

Bug Fixes

theming: fix icons version display for custom themes (built via the ThemeDesigner) (#6815) (63ff800), closes #6758

1.12.0-rc.3 (2023-03-30)

Note: Version bump only for package @ui5/webcomponents-tools

1.12.0-rc.2 (2023-03-23)

Bug Fixes

fix eslint for JS 3rd party projects (#6725) (215a888)

1.12.0-rc.1 (2023-03-16)

Note: Version bump only for package @ui5/webcomponents-tools

1.12.0-rc.0 (2023-03-09)

Features

enhance create-ui5-element command to create component in TS (#6609) (d870065)

1.11.0 (2023-03-06)

Note: Version bump only for package @ui5/webcomponents-tools

1.11.0-rc.4 (2023-03-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.11.0-rc.3 (2023-02-23)

Features

playground: next playground with storybook (#5831) (79274c8), closes #5898

1.11.0-rc.2 (2023-02-16)

Note: Version bump only for package @ui5/webcomponents-tools

1.11.0-rc.1 (2023-02-09)

Note: Version bump only for package @ui5/webcomponents-tools

1.11.0-rc.0 (2023-02-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.10.4-rc.0 (2023-01-26)

Note: Version bump only for package @ui5/webcomponents-tools

1.10.3 (2023-01-25)

Note: Version bump only for package @ui5/webcomponents-tools

1.10.2 (2023-01-25)

Note: Version bump only for package ui5-webcomponents

1.10.1 (2023-01-24)

Note: Version bump only for package @ui5/webcomponents-tools

1.10.0 (2023-01-20)

Bug Fixes

infra: set Content-Type header on testsuite (#6108) (fae3f91)

Features

enable TS in main, fiori (#6064) (0b56130)
migrate illustrated-message component to TS, small refactor (#6195) (046c779)
support decorators for custom elements metadata (#6072) (fc9ee6e)
ui5-button, ui5-date-picker, ui5-calendar: migrate to TS (#6173) (7232ca0), closes #6080
use Typescript for the base package (#5982) (bd184d8)

1.9.3 (2022-12-16)

Note: Version bump only for package @ui5/webcomponents-tools

1.9.1 (2022-11-10)

Bug Fixes

framework: fix paths for generating illustration imports in nps (#5997) (e932f7d)

1.9.0 (2022-10-31)

Bug Fixes

framework: fix contexts management in hbs-2-lit compiler (#5958) (94d1619), closes #4701

Features

framework: fetch illustrations on demand (#5927) (f8e1033)
framework: generate custom elements manifest (#5964) (0d62770)

1.8.0 (2022-10-03)

Features

icons: create type-definitions for icon imports (#5753) (2de4a04), closes #5747 #5335
main: add support for custom SVG icons (#5865) (d8b7200)

1.7.1 (2022-09-08)

Note: Version bump only for package @ui5/webcomponents-tools

1.7.0 (2022-09-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.6.0 (2022-07-25)

Bug Fixes

MultoComboBox: fix component scoping (#5553) (9c26e8e), closes #5521

1.5.0 (2022-07-03)

Note: Version bump only for package @ui5/webcomponents-tools

1.4.0 (2022-05-25)

Features

Note: Version bump only for package @ui5/webcomponents-icons-tnt

1.3.1 (2022-04-27)

Note: Version bump only for package @ui5/webcomponents-tools

1.3.0 (2022-04-19)

Bug Fixes

localization: fix js error if "sh" locale set (#4905) (979bca2), closes #4904

1.2.4 (2022-03-30)

Note: Version bump only for package @ui5/webcomponents-tools

1.2.3 (2022-03-23)

Note: Version bump only for package @ui5/webcomponents-tools

1.2.2 (2022-03-22)

Note: Version bump only for package @ui5/webcomponents-tools

1.2.1 (2022-03-02)

Note: Version bump only for package @ui5/webcomponents-tools

1.2.0 (2022-02-28)

Bug Fixes

correct scoping issues with several components (#4820) (621dc20)
display methods in child components API (#4792) (1929d08)

Features

jsdoc: remove attr name for Object props (#4680) (1741bd6), closes #4674

1.1.2 (2022-01-26)

Note: Version bump only for package @ui5/webcomponents-tools

1.1.1 (2022-01-24)

Note: Version bump only for package @ui5/webcomponents-tools

1.1.0 (2022-01-21)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.2 (2021-11-29)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.1 (2021-11-10)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.0 (2021-11-10)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.0-rc.16 (2021-11-09)

Features

tools: create an npm init script (#4090) (5608e04)

1.0.0-rc.15 (2021-07-23)

Bug Fixes

tools: fix build error on MacOS 11 from rollup-plugin-terser (#3347) (59892c4), closes #2515

1.0.0-rc.14 (2021-04-01)

1.0.0-rc.13 (2021-03-26)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.0-rc.12 (2021-02-18)

Note: Version bump only for package @ui5/webcomponents-tools

1.0.0-rc.11 (2020-12-21)

Bug Fixes

build error on MacOS 11 from rollup-plugin-terser (#2515) (0629fac)

1.0.0-rc.10 (2020-11-12)

1.0.0-rc.9 (2020-10-08)

Features

framework: dynamic custom elements scoping (#2091) (3588542)
framework: make assets path configurable (#2214) (16c46da)
tools: ES5 build supports dynamic imports (inlined) (#2063) (3fe5cac)
tools: process HBS files in nested directories (#2067) (13f1d2a), closes #2065

1.0.0-rc.8 (2020-07-30)

Bug Fixes

tools: Remove white spaces from hbs parser (#1613) (ec5a9cf)
tools: Strip whitespaces around < and > (#1623) (0fcda38)
tools: Enables 3 or more levels of inheritance with templates (#1593) (2a426dd)
tools: Building third-party packages no longer fails (#1994) (07aebfa)
tools: Polyfill copied correctly in all scenarios (#1783) (a04f483)

Features

tools: Add more commands to package.json (#1908) (b0551b3)
tools: Templates can be imported from node_modules/ (#1860) (6fa5847)

1.0.0-rc.7 (2020-04-30)

Bug Fixes

build: escape quotes in translation texts (#1511) (ee7f300)

1.0.0-rc.6 (2020-03-27)

Features

tools: create an init package script (#1010) (d93ab87)
tools: add docs to create-ui5-script (#987) (f0f5ec5)

1.0.0-rc.5 (2019-12-02)

Bug Fixes

JS Doc show correct since version in the playground (#983) (3051d76)

Package detail

readme

What are UI5 Web Components?

Why use web components?

Where can I see them in action?

More Resources

Related Projects

OpenUI5

1. What is UI5/OpenUI5?

2. How do UI5 Web Components relate to OpenUI5?

UI5 Web Components for React

UI5 Web Components for Angular

How to Use

Typescript Support

Is there a CDN I can use?

Browser Support

Project Structure, Development and Build

Requirements

Structure

How to run the project locally:

How to start Website (Docs & Samples):

Production Build

Limitations

Known Issues

Support

Contribute

changelog

Change Log

2.15.0 (2025-10-03)

2.15.0-rc.3 (2025-10-02)

2.15.0-rc.2 (2025-09-25)

2.15.0-rc.1 (2025-09-25)

Bug Fixes

2.15.0-rc.0 (2025-09-11)

2.14.0 (2025-09-04)

2.14.0-rc.7 (2025-09-04)

2.14.0-rc.6 (2025-08-29)

2.14.0-rc.5 (2025-08-28)

2.14.0-rc.4 (2025-08-25)

2.14.0-rc.3 (2025-08-22)

Bug Fixes

2.14.0-rc.2 (2025-08-21)

Bug Fixes

2.14.0-rc.1 (2025-08-14)

2.14.0-rc.0 (2025-08-07)

2.13.0 (2025-08-04)

2.13.0-rc.3 (2025-07-31)

2.13.0-rc.2 (2025-07-24)

2.13.0-rc.1 (2025-07-17)

2.13.0-rc.0 (2025-07-10)

2.12.0 (2025-07-04)

2.12.0-rc.3 (2025-07-03)

2.12.0-rc.2 (2025-06-26)

2.12.0-rc.1 (2025-06-19)

2.12.0-rc.0 (2025-06-12)

2.11.0 (2025-06-05)

2.11.0-rc.4 (2025-06-05)

Features

2.11.0-rc.3 (2025-05-29)

Features

2.11.0-rc.2 (2025-05-22)

2.11.0-rc.1 (2025-05-15)

2.11.0-rc.0 (2025-05-08)

2.10.0 (2025-05-07)

2.10.0-rc.3 (2025-05-01)

Bug Fixes

Features

2.10.0-rc.2 (2025-04-24)

2.10.0-rc.1 (2025-04-17)

2.10.0-rc.0 (2025-04-14)

2.9.1-rc.0 (2025-04-10)

2.9.0 (2025-04-04)

2.9.0-rc.3 (2025-04-03)

Bug Fixes

2.9.0-rc.2 (2025-03-27)

2.9.0-rc.1 (2025-03-20)

Bug Fixes

2.9.0-rc.0 (2025-03-13)

2.8.1-rc.0 (2025-03-06)

2.8.0 (2025-03-04)