Installations
npm install @ui5/webcomponentsDeveloper Guide
BETA
Typescript
No
Module System
ESM
Node Version
20.18.1
NPM Version
lerna/7.4.2/node@v20.18.1+x64 (linux)
Releases
288
Contributors
682
Languages
7
TypeScript
HTML
JavaScript
CSS
MDX
Handlebars
Shell
TypeScript (33.1%)
HTML (28.58%)
JavaScript (24.22%)
CSS (12.66%)
MDX (1.28%)
Handlebars (0.16%)
Shell (0.01%)
Developer
Download Statistics
Total Downloads
5,406,411
Last Day
8,305
Last Week
34,931
Last Month
154,482
Last Year
1,916,313
GitHub Statistics
1,598 Stars
5,826 Commits
273 Forks
57 Watching
191 Branches
682 Contributors
Maintainers
5
Package Meta Information
Latest Version
2.6.3
Package Id
@ui5/webcomponents@2.6.3
Unpacked Size
19.61 MB
Size
3.08 MB
File Count
2,547
NPM Version
lerna/7.4.2/node@v20.18.1+x64 (linux)
Node Version
20.18.1
Publised On
29 Jan 2025
Total Downloads
Cumulative downloads
Total Downloads
5,406,411
Last day
6.9%
8,305
Compared to previous day
Last week
-13.2%
34,931
Compared to previous week
Last month
-1.8%
154,482
Compared to previous month
Last year
17.1%
1,916,313
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
UI5 Web Components - Main
Provides general purpose UI building blocks such as buttons, labels, inputs and popups.
Provided components
| 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"; |
| 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 | comes with ui5-color-palette-popover |
| 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 |
Provided assets
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 |
Provided features
1import "@ui5/webcomponents/dist/features/<FEATURE-NAME>.js
| Affects | Feature Import | Description |
|---|---|---|
ui5-color-palette | @ui5/webcomponents/dist/features/ColorPaletteMoreColors.js | Support for "more colors dialog" for the color palette component |
ui5-input | @ui5/webcomponents/dist/features/InputSuggestions.js | Support for input suggestions while typing |
Color Palette "More Colors" Feature
1import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js";
The ui5-color-palette component has a showMoreColors property, that, when set to true, enables a "More colors" dialog.
Since this is not always needed, in order to use this dialog, you must import the above feature.
Input Suggestions Feature
1import "@ui5/webcomponents/dist/features/InputSuggestions.js";
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.
To enable the functionality, import the above module into your app. This will also automatically import ui5-suggestion-item
for your convenience.
Resources
- UI5 Web Components - README.md
- UI5 Web Components - Home Page
- UI5 Web Components - Playground and API Reference
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.
License
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 16 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE.txt:0
- Info: FSF or OSI recognized license: Apache License 2.0: LICENSE.txt:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/SAP/.github/SECURITY.md:1
- Info: Found linked content: github.com/SAP/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/SAP/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/SAP/.github/SECURITY.md:1
Reason
no binaries found in the repo
Reason
Found 29/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
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/issues-handling.yaml:9
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/merge-release-changelog.yaml:9
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-rc-auto.yaml:11
- Warn: jobLevel 'contents' permission set to 'write': .github/workflows/release-stable.yaml:20
- Warn: no topLevel permission defined: .github/workflows/ci-test-website.yaml:1
- Warn: no topLevel permission defined: .github/workflows/ci-test.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-auto.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-manually.yaml:1
- Warn: no topLevel permission defined: .github/workflows/deploy-website-on-release.yaml:1
- Warn: no topLevel permission defined: .github/workflows/issues-close.yaml:1
- Warn: no topLevel permission defined: .github/workflows/issues-handling.yaml:1
- Warn: no topLevel permission defined: .github/workflows/lint.yaml:1
- Warn: no topLevel permission defined: .github/workflows/merge-release-changelog.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-downport.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-experimental.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-rc-auto.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-rc.yaml:1
- Warn: no topLevel permission defined: .github/workflows/release-stable.yaml:1
- Warn: no topLevel permission defined: .github/workflows/reset-gh-pages.yaml:1
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test-website.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test-website.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test-website.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test-website.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci-test.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/ci-test.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-auto.yaml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-manually.yaml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-manually.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/deploy-website-on-release.yaml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/deploy-website-on-release.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-close.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-close.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/issues-handling.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/issues-handling.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/lint.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/lint.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/lint.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/merge-release-changelog.yaml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/merge-release-changelog.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-downport.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-downport.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-downport.yaml:23: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-downport.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-experimental.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-experimental.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-experimental.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-experimental.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:55: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc-auto.yaml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc-auto.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/release-rc.yaml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-rc.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:62: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release-stable.yaml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/release-stable.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/reset-gh-pages.yaml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/SAP/ui5-webcomponents/reset-gh-pages.yaml/main?enable=pin
- Info: 0 out of 33 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 5 third-party GitHubAction dependencies pinned
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 29 are checked with a SAST tool
Reason
12 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
5.4
/10
Last Scanned on 2025-01-27
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