llms.txt

# fundamental-styles

> CSS framework for SAP Design System with 120 UI components.

## What This Is

HTML/CSS component library for building enterprise applications. Framework-agnostic, works with Angular, React, Vue, or vanilla JS.

## Packages

- fundamental-styles: 120 UI components (buttons, forms, tables, dialogs)
- @fundamental-styles/common-css: Utility classes (margins, padding, flex)
- @fundamental-styles/cx: Customer Experience components

## AI Resources

Quick Reference:
- /CLAUDE.md - Quick reference with examples (start here)

Component Discovery:
- /docs/ai-component-index.md - Full component guide (120 components)
- /docs/component-catalog.json - Machine-readable component catalog
- /docs/schemas/*.json - JSON schema per component

Implementation Helpers:
- /docs/html-examples.json - 10 complete HTML patterns for complex UIs
- /docs/modifier-rules.json - Mutually exclusive modifier combinations
- /docs/accessibility.json - ARIA patterns for 72 components

Styling Reference:
- /docs/utility-classes.json - Utility classes (229 classes, 13 categories)
- /docs/design-tokens.json - 1,522 CSS custom properties (--sap* tokens)
- /docs/component-relationships.json - Component dependencies (307 relationships)

## Quick Start

```html
<link href="node_modules/fundamental-styles/dist/theming/sap_horizon.css" rel="stylesheet">
<link href="node_modules/fundamental-styles/dist/button.css" rel="stylesheet">

<button class="fd-button fd-button--emphasized">Primary Button</button>
```

## Naming Conventions

- Components: `fd-{component}` (e.g., fd-button, fd-input, fd-table)
- Modifiers: `fd-{component}--{modifier}` (e.g., fd-button--emphasized)
- Elements: `fd-{component}__{element}` (e.g., fd-table__cell)
- Utilities: `sap-{category}-{value}` (e.g., sap-margin-small, sap-flex--center)

## Links

- Storybook: https://sap.github.io/fundamental-styles/
- GitHub: https://github.com/SAP/fundamental-styles
- NPM: https://www.npmjs.com/package/fundamental-styles