Skip to main content

Introduction

The UI5 Web Components project offers a rich set of enterprise-grade, reusable UI elements built on top of the Web Components standards. With UI5 Web Components, developers can leverage a powerful, flexible, and future-proof toolkit to create anything from static web sites to complex web applications.

Key Features of UI5 Web Components​

  • Enterprise-Grade: A comprehensive collection of reusable UI elements that adhere to enterprise standards - accessibility, themeability, i18n and more.

  • Framework Agnostic: Fully compatible with any current or future web development frameworks such as React, Angular, and Vue, allowing seamless integration into any tech stack.

  • Elegant: Being custom HTML elements, they hide implementation complexity behind a single HTML tag, making them easily usable with the standard DOM APIs.

  • Consistent User Experience: Implementing the SAP Fiori design and adhering to the SAP Fiori Design Guidelines ensures a consistent and intuitive user experience across all applications.

  • Open Source: UI5 Web Components is an open-source project available to the general public, inviting developers from all backgrounds to contribute and benefit.

  • SAP Backing: Developed and maintained by SAP as part of the UI5 product family, guaranteeing ongoing support and integration with SAP's ecosystem.

  • AI-Ready: The project is structured for AI-assisted development with an MCP server for direct IDE integration, a machine-readable llms.txt file, an AGENTS.md guide for coding assistants, installable Agent Skills, and a dedicated set of AI components for building conversational and generative AI interfaces.

Ecosystem​

UI5 Web Components are complemented by a range of related projects that enhance the development experience even further. These projects build on top of the core UI5 Web Components, providing additional functionalities and integrations tailored to specific frameworks and use cases.

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 some complex layout components built on top of UI5 Web Components as well as Charting Components.

Native Web Components Support in React 19​

React 19 introduces full native support for Custom Elements, resolving the long-standing gaps in how React handles web components. Specifically, React 19 correctly binds boolean attributes, passes properties (not just attributes) to custom elements, and supports subscribing to custom events. This means you can use UI5 Web Components directly in React 19 without a wrapper library — they work just like any other HTML element.

The UI5 Web Components for React library remains valuable for its additional features — higher-level layout components, charting components, and TypeScript definitions — but it is no longer required for basic usage.

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.

Continue reading to start using UI5 Web Components right away!