Gathering detailed insights and metrics for @ui5/webcomponents
Gathering detailed insights and metrics for @ui5/webcomponents
Gathering detailed insights and metrics for @ui5/webcomponents
Gathering detailed insights and metrics for @ui5/webcomponents
UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice.
npm install @ui5/webcomponents
Typescript
Module System
Node Version
NPM Version
TypeScript (42.6%)
HTML (28.27%)
JavaScript (16.15%)
CSS (11.63%)
MDX (1.34%)
Shell (0.01%)
Handlebars (0.01%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Apache-2.0 License
1,649 Stars
6,398 Commits
277 Forks
57 Watchers
225 Branches
706 Contributors
Updated on Jul 10, 2025
Latest Version
2.12.0
Package Id
@ui5/webcomponents@2.12.0
Unpacked Size
17.76 MB
Size
2.91 MB
File Count
2,422
NPM Version
lerna/7.4.2/node@v22.16.0+x64 (linux)
Node Version
22.16.0
Published on
Jul 04, 2025
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
Web Component | Tag name | Module import |
---|---|---|
Avatar | ui5-avatar | import "@ui5/webcomponents/dist/Avatar.js"; |
Avatar Group | ui5-avatar-group | import "@ui5/webcomponents/dist/AvatarGroup.js"; |
Bar | ui5-bar | import "@ui5/webcomponents/dist/Bar.js"; |
Breadcrumbs | ui5-breadcrumbs | import "@ui5/webcomponents/dist/Breadcrumbs.js"; |
Breadcrumbs Item | ui5-breadcrumbs-item | comes with ui5-breadcrumbs |
Tag | ui5-tag | import "@ui5/webcomponents/dist/Tag.js"; |
Busy Indicator | ui5-busy-indicator | import "@ui5/webcomponents/dist/BusyIndicator.js"; |
Button | ui5-button | import "@ui5/webcomponents/dist/Button.js"; |
ButtonBadge | ui5-button-badge | import "@ui5/webcomponents/dist/ButtonBadge.js"; |
Calendar | ui5-calendar | import "@ui5/webcomponents/dist/Calendar.js"; |
Calendar Date | ui5-date | comes with ui5-calendar |
Calendar Date Range | ui5-date-range | comes with ui5-calendar |
Calendar Special Date | ui5-date-special | comes with ui5-calendar |
Calendar Legend | ui5-calendar-legend | import "@ui5/webcomponents/dist/CalendarLegend.js"; |
Calendar Legend Item | ui5-calendar-legend-item | comes with ui5-calendar-legend |
Card | ui5-card | import "@ui5/webcomponents/dist/Card.js"; |
CardHeader | ui5-card-header | import "@ui5/webcomponents/dist/CardHeader.js"; |
Carousel | ui5-carousel | import "@ui5/webcomponents/dist/Carousel.js"; |
Checkbox | ui5-checkbox | import "@ui5/webcomponents/dist/CheckBox.js"; |
Color Palette | ui5-color-palette | import "@ui5/webcomponents/dist/ColorPalette.js"; |
Color Palette Item | ui5-color-palette-item | comes with ui5-color-palette |
Color Palette Popover | ui5-color-palette-popover | import "@ui5/webcomponents/dist/ColorPalettePopover.js"; |
Color Picker | ui5-color-picker | import "@ui5/webcomponents/dist/ComboPicker.js"; |
ComboBox | ui5-combobox | import "@ui5/webcomponents/dist/ComboBox.js"; |
ComboBox Item | ui5-cb-item | comes with ui5-combobox |
ComboBox Group Item | ui5-cb-group-item | comes with ui5-combobox |
Date Picker | ui5-date-picker | import "@ui5/webcomponents/dist/DatePicker.js"; |
Date Range Picker | ui5-daterange-picker | import "@ui5/webcomponents/dist/DateRangePicker.js"; |
Date Time Picker | ui5-datetime-picker | import "@ui5/webcomponents/dist/DateTimePicker.js"; |
Dialog | ui5-dialog | import "@ui5/webcomponents/dist/Dialog.js"; |
File Uploader | ui5-file-uploader | import "@ui5/webcomponents/dist/FileUploader.js"; |
Icon | ui5-icon | import "@ui5/webcomponents/dist/Icon.js"; |
Input | ui5-input | import "@ui5/webcomponents/dist/Input.js"; |
Label | ui5-label | import "@ui5/webcomponents/dist/Label.js"; |
Link | ui5-link | import "@ui5/webcomponents/dist/Link.js"; |
List | ui5-list | import "@ui5/webcomponents/dist/List.js"; |
List - Standard Item | ui5-li | import "@ui5/webcomponents/dist/ListItemStandard.js"; |
List - Custom Item | ui5-li-custom | import "@ui5/webcomponents/dist/ListItemCustom.js"; |
List - Group Item | ui5-li-group | import "@ui5/webcomponents/dist/ListItemGroup.js"; |
Menu | ui5-menu | import "@ui5/webcomponents/dist/Menu.js"; |
Menu Item | ui5-menu-item | comes with ui5-menu |
Menu Separator | ui5-menu-separator | comes with ui5-menu |
Message Strip | ui5-message-strip | import "@ui5/webcomponents/dist/MessageStrip.js"; |
Multi ComboBox | ui5-multi-combobox | import "@ui5/webcomponents/dist/MultiComboBox.js"; |
Multi ComboBox Item | ui5-mcb-item | comes with ui5-multi-combobox |
Multi ComboBox Item Group | ui5-mcb-item-group | comes with ui5-multi-combobox |
Multi Input | ui5-multi-input | import "@ui5/webcomponents/dist/MultiInput.js"; |
Panel | ui5-panel | import "@ui5/webcomponents/dist/Panel.js"; |
Popover | ui5-popover | import "@ui5/webcomponents/dist/Popover.js"; |
ProgressIndicator | ui5-progress-indicator | import "@ui5/webcomponents/dist/ProgressIndicator.js"; |
Radio Button | ui5-radio-button | import "@ui5/webcomponents/dist/RadioButton.js"; |
Range Slider | ui5-range-slider | import "@ui5/webcomponents/dist/RangeSlider.js"; |
Rating Indicator | ui5-rating-indicator | import "@ui5/webcomponents/dist/RatingIndicator.js"; |
Responsive Popover | ui5-responsive-popover | import "@ui5/webcomponents/dist/ResponsivePopover.js"; |
Segmented Button | ui5-segmented-button | import "@ui5/webcomponents/dist/SegmentedButton.js"; |
Segmented Button Item | ui5-segmented-button-item | comes with ui5-segmented-button |
Select | ui5-select | import "@ui5/webcomponents/dist/Select.js"; |
Select Option | ui5-option | comes with ui5-select |
Slider | ui5-slider | import "@ui5/webcomponents/dist/Slider.js"; |
Split Button | ui5-split-button | import "@ui5/webcomponents/dist/SplitButton.js"; |
Step Input | ui5-step-input | import "@ui5/webcomponents/dist/StepInput.js"; |
Suggestion Item | ui5-suggestion-item | comes with InputSuggestions.js feature - see below |
Switch | ui5-switch | import "@ui5/webcomponents/dist/Switch.js"; |
Tab Container | ui5-tabcontainer | import "@ui5/webcomponents/dist/TabContainer.js"; |
Tab | ui5-tab | import "@ui5/webcomponents/dist/Tab.js"; |
Tab Separator | ui5-tab-separator | import "@ui5/webcomponents/dist/TabSeparator.js"; |
Textarea | ui5-textarea | import "@ui5/webcomponents/dist/TextArea.js"; |
TimePicker | ui5-time-picker | import "@ui5/webcomponents/dist/TimePicker.js"; |
Title | ui5-title | import "@ui5/webcomponents/dist/Title.js"; |
Toast | ui5-toast | import "@ui5/webcomponents/dist/Toast.js"; |
Toggle Button | ui5-toggle-button | import "@ui5/webcomponents/dist/ToggleButton.js"; |
Token | ui5-token | comes with ui5-multi-input |
Tree | ui5-tree | import "@ui5/webcomponents/dist/Tree.js"; |
Tree Item | ui5-tree-item | comes with ui5-tree |
Tree Item Custom | ui5-tree-item-custom | comes with ui5-tree |
import "@ui5/webcomponents/dist/Assets.js";
Assets | Module | Notes |
---|---|---|
i18n , themes | @ui5/webcomponents/dist/Assets.js | Theming parameters and translations for the components Automatically imports also: @ui5/webcomponents-localization/dist/Assets.js and @ui5/webcomponents-theming/dist/Assets.js |
Feature name | Affects | Triggered by | Description |
---|---|---|---|
More Colors Dialog | ui5-color-palette , ui5-color-palette-popover | Setting showMoreColors to true | Support for "more colors dialog" for the color palette component |
Input Suggestions | ui5-input , ui5-multi-input | Setting showSuggestions to true | Support for input suggestions while typing |
The ui5-color-palette
component has a showMoreColors
property, that, when set to true
, enables a "More colors" dialog.
Since this functionality is not always needed, the "More colors" dialog and its children are not direct dependencies of the component by default,
and are only loaded dynamically when showMoreColors
is set to true
.
Feature import (optional as of 2.7.0
):
1import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
The <ui5-input>
element acts as an <input>
with the Fiori design and added functionality, such as value state.
The so-called "input suggestions" is an advanced feature that allows the user to choose from a list of predefined options while typing.
Since input suggestions may not always be needed, they do not come as part of the <ui5-input>
itself.
Setting the showSuggestions
property to true
loads the suggestions feature dynamically (as well as the ui5-suggestion-item
component) for your convenience.
Feature import (optional as of 2.7.0
):
1import "@ui5/webcomponents/dist/features/InputSuggestions.js";
You can optionally pre-load the feature (thus avoiding the dynamic import), if you prefer so.
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.
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.
No vulnerabilities found.
Reason
30 commit(s) and 14 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
Reason
security policy file detected
Details
Reason
no binaries found in the repo
Reason
Found 28/30 approved changesets -- score normalized to 9
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
28 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More