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

AI Integration (MCP Server)

The @fundamental-ngx/mcp package is an MCP (Model Context Protocol) server that gives AI coding assistants structured access to the entire Fundamental NGX component catalog — 1000+ components across 8 libraries.

With it, your AI assistant can look up component APIs, get usage examples, compare alternatives, check accessibility guidance, and receive migration help — all from actual component metadata, not hallucinated docs.

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"]
        }
    }
}

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

2. Requirements

UI5 Web Components

Supporting Packages

Domain-Specific

Developer Tooling

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"]
        }
    }
}

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

Getting Started

Requirements

• Angular 21 or newer
• Node.js (LTS)
• Yarn (corepack enable, then yarn)

Installation

ng add @fundamental-ngx/core

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

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

See the documentation site for component examples and API details.

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 building new components.

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

License

See LICENSE.txt.