Developer setup Set up the Government of Alberta Design System in Angular, React, or directly with Web Components.

Angular UI components

Supported versions: 18, 19, 20, 21

This library contains standalone Angular components that wrap the Government of Alberta Web Components.

1. Add dependencies

npm i @abgov/web-components
npm i @abgov/angular-components
npm i @abgov/ui-components-common
npm i @abgov/design-tokens

2. Register the web components

Import the underlying web components once in src/main.ts, before bootstrapping the application:

 
import “@abgov/web-components”;

Keep your existing bootstrapApplication call after this import.

3. Import wrapper components

Import each standalone wrapper directly into the component that uses it:

 
// src/app/app.ts
import { Component } from "@angular/core";
import { GoabButton } from "@abgov/angular-components";

@Component({
selector: "app-root",
standalone: true,
imports: [GoabButton],
template: '<goab-button type="primary">Continue</goab-button>',
})
export class App {}

standalone: true is shown explicitly for compatibility with Angular 18; it is the default in newer Angular versions.

For an existing NgModule-based application, add each standalone wrapper component to that module’s imports array. AngularComponentsModule is only needed by applications that still use the legacy goaValue, goaValueList, or goaChecked form directives.

4. Add styles

Import the component styles and design tokens in src/styles.css:

 
@import "@abgov/web-components/index.css";
@import "@abgov/design-tokens/dist/tokens.css";

5. Add icons

Add Ionicons to the head element of src/index.html:

 
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>

React UI components

Supported versions: 17, 18, 19

This library contains React components which wrap the Government of Alberta Web Components.

1. Add dependencies

npm i @abgov/react-components
npm i @abgov/web-components
npm i @abgov/ui-components-common
npm i @abgov/design-tokens

2. Link ionicons in app/index.html

Add the following to the head element:

 
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>

3. Import the web components in src/main.tsx

import “@abgov/web-components”;

4. Import the styles in src/index.css

@import “@abgov/web-components/index.css”;
@import “@abgov/design-tokens/dist/tokens.css”;

Web components

This library contains web components from the Government of Alberta.

1. Add dependencies

npm i @abgov/web-components
npm i @abgov/design-tokens

2. Link ionicons in index.html

Add the following in the head element:

 
<script type="module" src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/ionicons@latest/dist/ionicons/ionicons.js"></script>

3. Import the web components into src/main.js

import “@abgov/web-components”;

4. Add the styles link in your main CSS file

Add the following in src/assets/main.css or wherever your main CSS file is located:

 
@import “@abgov/web-components/index.css”;
@import “@abgov/design-tokens/dist/tokens.css”;
Join design system drop-in hours to:
  • Get feedback on your service
  • Propose new components or patterns
  • Suggest updates to existing resources
  • Ask questions
  • Share feedback
Drop-in sessions are available to Government of Alberta product teams. Book time in drop-in hours