# @genesislcap/foundation-ui

> Genesis Foundation UI

Latest version **15.83.0** (published 2026-10-22) · SEE LICENSE IN license.txt license · 17.8K weekly downloads

## Install

```sh
npm install @genesislcap/foundation-ui
pnpm add @genesislcap/foundation-ui
yarn add @genesislcap/foundation-ui
bun add @genesislcap/foundation-ui
```

## Health

**Score 80/100 (A)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

## Facts

| | |
|---|---|
| Version | 15.83.0 |
| Published | 2026-10-22 |
| First published | 2023-02-28 |
| Weekly downloads | 17.8K |
| License | SEE LICENSE IN license.txt |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 26 |
| Unpacked size | 6.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | genesisnpm |

## Links

- npm: https://www.npmjs.com/package/@genesislcap/foundation-ui
- Repository: https://github.com/genesislcap/foundation-ui
- Homepage: https://github.com/genesislcap/foundation-ui#readme
- Issues: https://github.com/genesislcap/foundation-ui/issues
- npm.io page: https://npm.io/package/@genesislcap/foundation-ui

## Dependencies (26)

- [rxjs](https://npm.io/package/rxjs.md) ^7.5.4
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [@popperjs/core](https://npm.io/package/@popperjs/core.md) ^2.11.0
- [dialog-polyfill](https://npm.io/package/dialog-polyfill.md) ^0.5.6
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [@microsoft/fast-colors](https://npm.io/package/@microsoft/fast-colors.md) 5.3.1
- [@microsoft/fast-router](https://npm.io/package/@microsoft/fast-router.md) 0.4.8
- [@microsoft/fast-element](https://npm.io/package/@microsoft/fast-element.md) 1.14.0
- [@genesislcap/foundation-ai](https://npm.io/package/@genesislcap/foundation-ai.md) 15.83.0
- [@microsoft/fast-components](https://npm.io/package/@microsoft/fast-components.md) 2.30.6
- [@microsoft/fast-foundation](https://npm.io/package/@microsoft/fast-foundation.md) 2.50.0
- [@genesislcap/foundation-user](https://npm.io/package/@genesislcap/foundation-user.md) 15.83.0
- [@genesislcap/foundation-comms](https://npm.io/package/@genesislcap/foundation-comms.md) 15.83.0
- [@genesislcap/foundation-utils](https://npm.io/package/@genesislcap/foundation-utils.md) 15.83.0
- [@microsoft/fast-web-utilities](https://npm.io/package/@microsoft/fast-web-utilities.md) 5.4.1
- [@genesislcap/foundation-errors](https://npm.io/package/@genesislcap/foundation-errors.md) 15.83.0
- [@genesislcap/foundation-events](https://npm.io/package/@genesislcap/foundation-events.md) 15.83.0
- [@genesislcap/foundation-logger](https://npm.io/package/@genesislcap/foundation-logger.md) 15.83.0
- [@genesislcap/expression-builder](https://npm.io/package/@genesislcap/expression-builder.md) 15.83.0
- [@genesislcap/foundation-criteria](https://npm.io/package/@genesislcap/foundation-criteria.md) 15.83.0
- [@fortawesome/fontawesome-svg-core](https://npm.io/package/@fortawesome/fontawesome-svg-core.md) ^6.2.1
- [@fortawesome/free-solid-svg-icons](https://npm.io/package/@fortawesome/free-solid-svg-icons.md) ^6.2.1
- [@fortawesome/free-brands-svg-icons](https://npm.io/package/@fortawesome/free-brands-svg-icons.md) ^6.2.1
- [@fortawesome/free-regular-svg-icons](https://npm.io/package/@fortawesome/free-regular-svg-icons.md) ^6.2.1
- [@genesislcap/foundation-notifications](https://npm.io/package/@genesislcap/foundation-notifications.md) 15.83.0
- [@genesiscommunitysuccess/analyzer-import-alias-plugin](https://npm.io/package/@genesiscommunitysuccess/analyzer-import-alias-plugin.md) ^5.0.3

## Recent versions

- 15.83.0 (latest) — 2026-10-22
- 15.81.0-GENC-1660.10 (GENC-1660) — 2026-10-22
- 15.80.0-FUI-2666.1 (FUI-2666) — 2026-10-21
- 15.80.0-GENC-1739.1 (GENC-1739) — 2026-10-21
- 15.79.2-alpha-e9d30db797.0 (canary) — 2026-10-21
- 15.72.0-FUI-2629.7 (FUI-2629) — 2026-10-15
- 15.73.0-FUI-2628.4 (FUI-2628) — 2026-10-14
- 15.71.0-FUI-2650.1 (FUI-2650) — 2026-10-13
- 15.64.0-FUI-0-genx-vulns.1 (FUI-0-genx-vulns) — 2026-10-13
- 15.50.3-holiday-picker.3 (holiday-picker) — 2026-10-07
- 15.53.0-GENC-1662.1 (GENC-1662) — 2026-10-07
- 15.48.0-alpha-830388687.0 (alpha-830388687) — 2026-10-05
- 15.50.0-BACE-0.1 (BACE-0) — 2026-10-05
- 15.46.2-FUI-2625.3 (FUI-2625) — 2026-10-01
- 15.46.5-FUI-2648.1 (FUI-2648) — 2026-10-01
- … 2581 more at https://npm.io/package/@genesislcap/foundation-ui/versions

## README

[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
[![TypeScript](https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg)](https://www.typescriptlang.org/)

# Genesis Foundation UI

This package contains our core foundation UI component library + FAST components. These base components are abstracted from
their style. Apps shouldn't have a dependency on this unless they have very good reason to. Instead, they should depend
on the design system variant that takes this foundation and applies styling etc.

- See [Rapid Design System](../foundation-ds/rapid-design-system/README.md).

## [API Docs](./docs/api/index.md)

## [Module Federation Details](https://webpack.js.org/concepts/module-federation):

| Remote Name           | Port  |
| --------------------- | ----- |
| foundationUi          | 4010  |

## Installation

To enable this module in your application, follow the steps below.

1. Add `@genesislcap/foundation-ui` as a dependency in your `package.json` file. Whenever you change the dependencies of your project, ensure you run the `$ npm run bootstrap` command again. You can find more information in the [package.json basics](https://learn.genesis.global/secure/web/basics/package-json-basics/) page.

```json
{
  "dependencies": {
    "@genesislcap/foundation-ui": "latest"
  },
}
```

## Setting Up the Design System

The setup involves providing and registering Design System components from `foundation-ui` or other places. Here's how you can do it:

### Providing the Design System & Registering All Components

Tipically, in the `components.ts` file (or your entry-point for app-level setups), you provide the design system using `provideDesignSystem` and register components against that design system. Here's an example:

```typescript
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(baseComponents);
```

In the example above, `baseComponents` is a collection of components that are part of the same Design System. You can also register additional components if needed (even from other Design Systems, which will be prefixed with `foundation-` in this case).

### Registering Specific Components

If you want to register specific components, you can do so by importing them from the design system and registering them. Here's an example:

```typescript
import { foundationButton, foundationDesignSystemProvider, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(
  /**
   * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
   */
  foundationDesignSystemProvider(),

  /**
   * Button component
   */
  foundationButton()
);
```

In the example above, `foundation-button` will be the only component registered in the Foundation Design System. YOu can also register multiple components at once:

```typescript
import { foundationButton, foundationCard, foundationDesignSystemProvider, foundationModal, provideDesignSystem } from '@genesislcap/foundation-ui';

provideDesignSystem().register(
  /**
   * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
   */
  foundationDesignSystemProvider(),

  /**
   * Components that will be registered in the Foundation Design System
   */
  foundationButton(),
  foundationCard(),
  foundationModal()
);
```

### Registering Third-Party Components

We provide a few "third-party" components that are not part of the Design System package. These can be registered in the same way as the other Design System components. Here's an example:

```typescript
import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';
import { g2plotChartsComponents } from '@genesislcap/g2plot-chart';
import { gridComponents } from '@genesislcap/grid-pro';

provideDesignSystem().register(
  baseComponents,

  /**
   * Third-party components
   */
  foundationLayoutComponents,
  g2plotChartsComponents,
  gridComponents
);
```

The example above registers Foundation UI components from the Foundation Design System, Foundation Layout, G2Plot Charts, and Grid Pro.

## Extra - Multiple Design Systems

You can also provide multiple design systems in your application. Here's an example:

```typescript
import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';
import { baseComponents as rapidBaseComponents, provideDesignSystem as provideRapidDesignSystem } from '@genesislcap/rapid-design-system';

provideDesignSystem().register(baseComponents);
provideRapidDesignSystem().register(rapidBaseComponents);
```

In the example above, we provide two different design systems: the base design system and the rapid design system.

With those in place you can now use the components from the different design systems in your application:

```html
<foundation-button>Base Button</foundation-button>
<rapid-button>Rapid Button</rapid-button>
```


## License

Note: this project provides front-end dependencies and uses licensed components listed in the next section; thus, licenses for those components are required during development. Contact [Genesis Global](https://genesis.global/contact-us/) for more details.

### Licensed components

Genesis low-code platform

---
_Source: https://npm.io/package/@genesislcap/foundation-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._