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 is the web component library and utilizes Angular's web component integration.

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. Link ionicons in app/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. Update src/app/app.module.ts

Update src/app/app.module.ts as per the four steps below:

// 1. Import the CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

// 2. Import the libs
import "@abgov/web-components";
import { AngularComponentsModule } from "@abgov/angular-components";

@NgModule({
	declarations: [AppComponent],
	imports: [
		// 3. Add the needed imports
		BrowserModule,
		AngularComponentsModule,
	],
	providers: [],
	bootstrap: [AppComponent],
	// 4. Add the CUSTOM_ELEMENTS_SCHEMA to the NgModule
	schemas: [CUSTOM_ELEMENTS_SCHEMA],
	})
export class AppModule {}

4. Add the styles link in src/styles.css

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

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