Fundamental Library for Angular

The official SAP-maintained Angular library for UI5 Web Components and the SAP design system. Ships 1000+ components across 14 packages, targeting Angular 21+.

Documentation | Component Playground

Packages

UI5 Web Components

Angular wrappers for the @ui5/webcomponents project, letting you use UI5 Web Components in Angular without needing CUSTOM_ELEMENTS_SCHEMA or NO_ERRORS_SCHEMA. Provides full type safety and access to the underlying web components in a type-safe environment. Everything available on the @ui5/webcomponents side is available here.

Core Libraries

UI5 Web Components

Supporting Packages

Domain-Specific

Developer Tooling

Getting Started

Requirements

• Angular 21 or newer
• TypeScript 5.9 or newer
• Node.js (LTS)

Peer dependencies (installed automatically by ng add, required for manual installs):

Installation

Install the Angular CLI if you don't have it:

npm install -g @angular/cli

Create an Angular app if you don't have one:

ng new my-app
cd my-app

Then add the library:

ng add @fundamental-ngx/core

ng add handles everything automatically: peer dependencies, the core stylesheet, theming assets, and theming providers. It will prompt you to choose a theme — the default is sap_horizon.

Manual install — if you are not using the Angular CLI, after installing all peer dependencies you must:

1. Add to angular.json styles:

    ./node_modules/@fundamental-ngx/core/styles/fundamental-ngx-core.css

2. Add to angular.json assets:

    { "glob": "**/css_variables.css", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/", "output": "./assets/theming-base/" },
    { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/", "output": "./assets/theming-base/baseTheme/fonts/" },
    { "glob": "**/*", "input": "./node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/fonts/", "output": "./assets/theming-base/sap_horizon/fonts/" },
    { "glob": "**/*", "input": "./node_modules/fundamental-styles/dist/theming/", "output": "./assets/fundamental-styles-theming/" }

3. Add to app.config.ts:

    import { ApplicationConfig } from '@angular/core';
    import { provideTheming, themingInitializer } from '@fundamental-ngx/core/theming';
   
    export const appConfig: ApplicationConfig = {
        providers: [
            provideTheming({ defaultTheme: 'sap_horizon', changeThemeOnQueryParamChange: false }),
            themingInitializer()
        ]
    };

All components are standalone by default — import what you need:

import { ButtonComponent } from '@fundamental-ngx/core/button';
import { DialogModule } from '@fundamental-ngx/core/dialog';

Hello World

A minimal app using @fundamental-ngx/core:

// src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { App } from './app/app';
import { appConfig } from './app/app.config';

bootstrapApplication(App, appConfig).catch(console.error);

// src/app/app.config.ts
import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { provideTheming, themingInitializer } from '@fundamental-ngx/core/theming';

export const appConfig: ApplicationConfig = {
    providers: [
        provideBrowserGlobalErrorListeners(),
        provideAnimations(),
        provideTheming({ defaultTheme: 'sap_horizon', changeThemeOnQueryParamChange: false }),
        themingInitializer()
    ]
};

// src/app/app.ts
import { Component } from '@angular/core';
import { ButtonComponent } from '@fundamental-ngx/core/button';

@Component({
    selector: 'app-root',
    imports: [ButtonComponent],
    template: `<button fd-button>Hello, Fundamental NGX!</button>`
})
export class App {}

See the documentation site for component examples and full API details.

AI Integration (MCP Server)

@fundamental-ngx/mcp is an MCP (Model Context Protocol) server that gives AI coding assistants structured access to the entire component catalog — APIs, examples, design tokens, accessibility guidance, and migration help from actual component metadata.

Quick Start

VS Code / Cursor — create or edit .vscode/mcp.json:

{
    "servers": {
        "fundamental-ngx": {
            "command": "npx",
            "args": ["-y", "@fundamental-ngx/mcp"]
        }
    }
}

Claude Code:

claude mcp add fundamental-ngx -- npx -y @fundamental-ngx/mcp

Windsurf — add to ~/.codeium/windsurf/mcp_config.json:

{
    "mcpServers": {
        "fundamental-ngx": {
            "command": "npx",
            "args": ["-y", "@fundamental-ngx/mcp"]
        }
    }
}

Agent Skills Quick Start

List skills: npx skills add SAP/fundamental-ngx --list. Install all: npx skills add SAP/fundamental-ngx --skill '*'. Install one: npx skills add SAP/fundamental-ngx --skill build-page-layout.

See the full MCP server documentation for available tools and schema details.

Component Catalog

A machine-readable JSON catalog of all 1,000+ components is published at:

https://sap.github.io/fundamental-ngx/components.json

The catalog includes component selectors, inputs, outputs, methods, and code examples. It's regenerated with every release and enables static analysis, component discovery, and documentation generation.

See CATALOG.md for format details and usage examples.

Known Issues

See Issues.

Support

If you encounter an issue, you can create a ticket.

Angular version support: features and enhancements target the latest version. Bugfixes can be downported to the version compiled with the previous Angular release. More details on the Angular Versions Support wiki page.

Contributing

See CONTRIBUTING.md for contribution guidelines and NEW_COMPONENT.md for a step-by-step guide to building new components.

Please follow the Angular commit message guidelines and the SAP Contribution Guidelines.

License

See LICENSE.txt.