# Using UX4G in HTML, React, and Angular

UX4G is a CSS-class-based design system. It styles standard DOM elements and does not export named React, Angular, Vue, or Web Component UI components.

## Strict import rule

Load the package once at the application entry point:

```js
import 'ux4g-web-components/styles.css';
import 'ux4g-web-components/design-system';
```

Never write named UI imports:

```js
// Invalid: these exports do not exist.
import { Button, Modal, Pagination, Card } from 'ux4g-web-components';
```

## Syntax mapping

| HTML/Angular template | React/TSX | Rule |
|---|---|---|
| `class` | `className` | Preserve the complete class value. |
| `for` | `htmlFor` | Use for label/control relationships. |
| `tabindex` | `tabIndex` | React DOM property casing. |
| `readonly` | `readOnly` | React DOM property casing. |
| `maxlength` | `maxLength` | React DOM property casing. |
| `style="..."` | `style={{ ... }}` | Convert inline styles to a JSX object. |
| `onclick` | `onClick` | Supply an application handler. |
| `onchange` | `onChange` | Supply an application handler. |
| `aria-*` | unchanged | Keep ARIA attributes hyphenated. |
| `data-*` | unchanged | Keep data attributes hyphenated. |

Angular uses the canonical HTML class contract. Add property, class, attribute, and event bindings only for dynamic application state.

## State example

Canonical HTML:

```html
<button class="ux4g-page-number active" aria-current="page" type="button">2</button>
```

React/TSX adaptation:

```tsx
<button
  className={`ux4g-page-number ${currentPage === 2 ? 'active' : ''}`}
  aria-current={currentPage === 2 ? 'page' : undefined}
  type="button"
  onClick={() => setCurrentPage(2)}
>
  2
</button>
```

Angular adaptation:

```html
<button
  class="ux4g-page-number"
  [class.active]="currentPage === 2"
  [attr.aria-current]="currentPage === 2 ? 'page' : null"
  type="button"
  (click)="setCurrentPage(2)"
>
  2
</button>
```

Framework binding syntax changes; UX4G classes, DOM structure, accessibility attributes, and runtime requirements do not.