Fundamental Ngx
Fundamental Library for Angular is SAP Design System Angular component library
Ask AI about Fundamental Ngx
Powered by Claude Β· Grounded in docs
I know everything about Fundamental Ngx. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
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.
| Package | Description |
|---|---|
@fundamental-ngx/ui5-webcomponents | Angular wrappers for UI5 Web Components |
@fundamental-ngx/ui5-webcomponents-fiori | Angular wrappers for UI5 Fiori components |
@fundamental-ngx/ui5-webcomponents-ai | Angular wrappers for UI5 AI components |
Core Libraries
| Package | Description |
|---|---|
@fundamental-ngx/core | Base UI components (button, dialog, card, calendar, table, etc.) |
@fundamental-ngx/platform | Higher-level composites built on core with form integration and data binding |
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
| Package | Description |
|---|---|
@fundamental-ngx/ui5-webcomponents | Angular wrappers for UI5 Web Components |
@fundamental-ngx/ui5-webcomponents-fiori | Fiori-specific UI5 component wrappers |
@fundamental-ngx/ui5-webcomponents-ai | AI-specific UI5 component wrappers |
Supporting Packages
| Package | Description |
|---|---|
@fundamental-ngx/cdk | Utilities, forms, data-source abstractions |
@fundamental-ngx/i18n | Signal-based internationalization |
@fundamental-ngx/datetime-adapter | Date/time adapter (Day.js) |
@fundamental-ngx/moment-adapter | Date/time adapter (Moment.js, legacy) |
Domain-Specific
| Package | Description |
|---|---|
@fundamental-ngx/btp | Business Technology Platform components |
@fundamental-ngx/cx | Customer Experience components |
Developer Tooling
| Package | Description |
|---|---|
@fundamental-ngx/mcp | MCP server for AI coding assistants |
@fundamental-ngx/nx-plugin | NX generators and executors |
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, thenyarn)
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.
