UI5 Web Components

When SAP Fiori design compliance is strictly required, the AI-Driven Development Model keeps its React + TypeScript + Vite foundation but swaps the component layer from shadcn/ui to UI5 Web Components for React.

This is not classic Fiori

We adopt only the UI5 Web Components — standards-based custom elements with the SAP Fiori design language — consumed via their React wrapper. We do not move to SAP Fiori elements or freestyle UI5 applications. The app stays a React app.

When to use

• SAP Fiori design compliance is a hard requirement (e.g. embedding alongside standard SAP UIs, corporate Fiori guidelines).
• Otherwise, default to React & shadcn/ui.

What stays the same

Everything below the component layer is unchanged from the React & shadcn/ui setup:

• React + TypeScript + Vite 8 / Rolldown foundation
• TanStack Query data access against OData v4
• Zustand client state, i18next i18n
• Same typed backend contract from CAP or RAP

What changes

• Component library: UI5 Web Components for React instead of shadcn/ui.
• Styling follows the SAP Fiori design system via UI5 theming — Tailwind is used for layout only, if at all.

See also the site's general UI5 Web Components and Web Components pages.