Angular component library implementing the SAP Design System. Ships 1000+ components across 14 packages, targeting Angular 21+.

Documentation | Component Playground

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.

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.

@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.

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.

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

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.

See Issues.

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.

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.

See LICENSE.txt.