Getting started

Install - Angular

The Angular components ship as an installable library, adek-ui, with an ng add schematic - setup is a single terminal command. Requires Angular 17.3 or newer.

Quick install

# Prerequisite (once per machine): the Angular CLI
npm install -g @angular/cli

# Inside your Angular project, one command sets up the system:
ng add adek-ui

# No global CLI? This works too, from inside the project:
npx ng add adek-ui

# The ng-add schematic automatically:
#  - installs the adek-ui package from npm
#  - registers the three ADEK stylesheets in angular.json
#    (tokens.css, adek.css, adek-applications.css)
#  - adds the Montserrat <link> tags to index.html

Manual setup

# Prefer manual control? Install and wire it yourself:
npm install adek-ui

# then add the styles to angular.json:
"styles": [
  "src/styles.css",
  "node_modules/adek-ui/styles/tokens.css",
  "node_modules/adek-ui/styles/adek.css",
  "node_modules/adek-ui/styles/adek-applications.css"
]

Usage

All components are standalone - import them straight into your component's imports array. Every component page on this site has a matching Angular snippet.

// Import the standalone components you need
import { Component } from '@angular/core';
import { AdekButton } from 'adek-ui';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [AdekButton],
  template: `
    <button adek-button hierarchy="primary" size="md">
      Button CTA
    </button>
  `,
})
export class ExampleComponent {}