> For the complete documentation index, see [llms.txt](https://cause.evalink.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cause.evalink.io/getting-started/installation.md).

# Installation

{% hint style="danger" %}

### evalink cause is not stable yet

Be careful with the usage of this design component library. It is currently in development and has not a stable release yet. The apis might change during the further development.
{% endhint %}

### Requirements

evalink cause is a design component library for Angular and requires at least Angular version 12. It uses the following dependencies from angular it self, make sure you have installed them in your project:

* @angular/common
* @angular/core
* @angular/forms

{% hint style="warning" %}
evalink cause uses SCSS functionality. Make sure you have `SCSS` enabled for your angular project.
{% endhint %}

### Install evalink cause via npm

The easiest way to install evalink cause into your project is via npm. Open your terminal, navigate to the Angular root folder and run the following command:

```bash
$ npm install @evalink/cause
```

### Add evalink cause to your SCSS

Once the installation process is finished you can import the required files into your scss.

{% code title="src/styles.scss" %}

```css
# Import all the required scss files
@import 'node_modules/@evalink/cause/reset';
@import 'node_modules/@evalink/cause/layout';
@import 'node_modules/@evalink/cause/components';
@import 'node_modules/@evalink/cause/typography';
@import 'node_modules/@evalink/cause/colors';

# Add your own scss code
...
```

{% endcode %}

### Import evalink cause modules

Add the desired modules to your application modules and use the related components. The following examples shows how to use the `CauseHeader` :

{% tabs %}
{% tab title="app.module.ts" %}

```
@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    // The cause-header directive belongs to the CauseLayoutModule
    CauseLayoutModule,
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

{% endtab %}

{% tab title="app.component.html" %}

```css
<div class="application">
    <header cause-header></header>
    ...
</div>
```

{% endtab %}
{% endtabs %}