When building UI5 applications, you need to decide: should you create a classic UI5 Control or use a UI5 Web Component? This question matters even more when your organization uses different frameworks and wants a consistent user experience everywhere.
I recently presented this topic at both UI5con and SAP Devtoberfest 2025, sharing what we learned from integrating custom web components into UI5. This work showed us how to keep a consistent look and feel across applications while going beyond the standard SAP Fiori design.
Watch the full sessions:
Why Web Components Matter
UI5 controls have always been great for building SAP applications. They give you pre-built components with Fiori design, theming, and internationalization built in. No need to worry about CSS or making things look right.
But things are changing. Many organizations now use Angular, React, Vue, and UI5 across different teams. Web components let you build once and use everywhere. They work with any framework while keeping their style and functionality intact.
This helps organizations:
- Standardize UI/UX across teams using different frameworks
- Use company-specific design systems instead of only SAP Fiori
- Share components between Angular, React, Vue, and UI5 apps
- Save development time by reusing components
When to Use What?
Use traditional UI5 controls when:
- Your app only uses UI5
- You're happy with SAP Fiori design
- You don't need cross-framework support
Use UI5 web components when:
- You want Fiori design in non-UI5 frameworks
- You need components for Angular, React, and Vue
- You're building a shared component library
Use native web components when:
- Your company has its own design system
- You need company branding everywhere
- You work with different technologies
Our Proof of Concept
We integrated Nova design system web components into a UI5 application. This meant creating proxy controls that connect UI5 to the web components, handling properties, events, and data binding.
Our demo app, a simple To-Do list, replaced standard UI5 controls with Nova web components. Everything still worked like a normal UI5 app. Check out the GitHub repository to see how it works.
What We Learned
Technical stuff:
- You need proxy controls to connect UI5 with web components
- Event handling sometimes needs extra code
- Data binding requires attention, especially with components built differently
Deployment: Web components work fine with SAP BTP. You can keep your consistent UI while using all BTP features.
Current state: Web components work well in production, but the ecosystem is still growing. You might need extra code for some edge cases. It might be early for productive usage 😉
What's Next
Web components are changing how we think about UI development in SAP. Traditional UI5 controls are still great for many cases, but web components give you more options.
As more organizations share their component libraries on npm, we'll see better standardization and teamwork across companies. It's not about picking UI5 or something else, it's about using the right tool for each job.
Whether you're a UI5 developer, an architect planning UI strategy or a consultant helping clients, understanding web components and UI5 integration will be useful.
Resources
Bluesky
