Installation #

To use the aFP Design System you have to install it locally via npm. It is necessary to have at least NPM version 9 or higher for the Artifactory authentication.

Check out the React, Vue and Angular pages for more information if you're using a framework.

NPM Config #

To initialize the project, you need to execute the following commands in the console one after the other to set the required values for the NPM configuration.

npm config set @afp:registry https://artifactory.adesso-group.com/artifactory/api/npm/adessofinancialplatform-npm/
npm config set @afp-design-system:registry https://artifactory.adesso-group.com/artifactory/api/npm/adessofinancialplatform-npm/
npm config set registry https://registry.npmjs.org/

Artifactory Authentication #

To authenticate, first log in with your e-mail address and password at adesso artifactory.
Once logged in, run the following command in your terminal – either globally (root) or inside your project directory:

npm login --registry=https://artifactory.adesso-group.com/artifactory/api/npm/adessofinancialplatform-npm/

Your browser will usually open automatically and display a confirmation message.
If this does not happen, simply click the link shown in the terminal to open it manually.

Installation #

Note: If you are installing a framework-specific package, you do not need to install the Core package separately, and you can skip the Import Components step. In this case, you only need to import the styles.

1. Install via npm/pnpm #

Install the Core package or a framework-specific package:

npm install @afp-design-system/core

pnpm add @afp-design-system/core

2. Import Components #

Components can be imported via the bundle, which makes all components available. This is the recommended approach. Alternatively, individual components can be imported selectively (“cherry-picked”). See the documentation for each component for details.

Available bundle formats:

• es (recommended)
• cjs
• umd

import '@afp-design-system/core/dist/afp-design-system.<format>.js';

3. Import Styles #

To use the aFP Design System styles and utilities, import the main CSS file into your project.
For example, in the index.html file:

<link rel="stylesheet" href="/path/to/@afp-design-system/core/dist/styles/afp-design-system.css">

Example in an NX workspace (project.json):

"styles": [
  "node_modules/@afp-design-system/core/dist/styles/afp-design-system.css"
]

Import Themes #

This step is optional — the default theme is included in the afp-design-system.css. However, it is still recommended to create a custom theme for each project.

To enable theming, it is important to install and include the aFP Design System themes:

npm install @afp-design-system/themes

All details on installation, available themes, and usage can be found on the Themes page.

Native Styles #

The Native Styles provide basic, consistent styling for standard HTML elements like headings, paragraphs, and tables.
Including them is optional, but recommended if you want default aFP Design System styling without using components.

<link rel="stylesheet" href="/path/to/@afp-design-system/core/dist/styles/native.css">

Learn more on the Native Styles page.