This repository contains the Government of Alberta Design System component libraries for Web Components, React, and Angular.
- Design system docs: design.alberta.ca
- Developer setup: design.alberta.ca/get-started/developers/setup
- Contribution guidelines: design.alberta.ca/get-started/contribute
- Issue tracker: github.com/GovAlta/ui-components/issues
| Package | Use when | npm |
|---|---|---|
@abgov/web-components |
You want framework-agnostic custom elements. | npm |
@abgov/react-components |
You are building a React application. | npm |
@abgov/angular-components |
You are building an Angular application. | npm |
@abgov/ui-components-common |
You need shared types, event detail interfaces, or common utilities used by the component packages. | npm |
@abgov/design-tokens |
You need the design tokens used by the components. | npm |
@abgov/styles is deprecated. Import @abgov/web-components/index.css instead.
Install the packages:
npm i @abgov/web-components @abgov/design-tokensRegister the custom elements in your app entry point, for example src/main.js:
import "@abgov/web-components";Import the component styles and tokens in your main stylesheet:
@import "@abgov/web-components/index.css";
@import "@abgov/design-tokens/dist/tokens.css";Add Ionicons to your index.html <head>:
<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>You can then use the components directly in markup:
<goa-button type="primary">Continue</goa-button>Supported React versions: 17, 18, 19.
Install the packages:
npm i @abgov/react-components @abgov/web-components @abgov/ui-components-common @abgov/design-tokensRegister the underlying web components in your app entry point, for example src/main.tsx:
import "@abgov/web-components";Import the styles in your main stylesheet:
@import "@abgov/web-components/index.css";
@import "@abgov/design-tokens/dist/tokens.css";Add Ionicons to your index.html <head>:
<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>Example:
import { GoabButton } from "@abgov/react-components";
export function App() {
return <GoabButton type="primary">Continue</GoabButton>;
}Supported Angular versions in the current docs: 18, 19, 20, 21.
Install the packages:
npm i @abgov/web-components @abgov/angular-components @abgov/ui-components-common @abgov/design-tokensAdd Ionicons to 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>Update your app module:
import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import "@abgov/web-components";
import { AngularComponentsModule } from "@abgov/angular-components";
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AngularComponentsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}If your Angular app uses standalone bootstrapping instead of AppModule, use the same package installs, web component import, styles, and Ionicons setup, then adapt the module example to your bootstrap configuration.
Import the styles in src/styles.css:
@import "@abgov/web-components/index.css";
@import "@abgov/design-tokens/dist/tokens.css";This repo uses Nx
Install dependencies:
npm installUseful local commands:
npm run serve:docsto run the docs site locally.npm run dev:watchto rebuildweb-componentswhile developing against a preview app.npm run serve:prs:reactto run the React preview app.npm run serve:prs:angularto run the Angular preview app.npm run test:prto run all tests (unit, browser, etc...).npm run buildto build affected projects.npm run validateto run the full validation pipeline.
This repository is provided as-is. There is no guarantee of ongoing maintenance, support, compatibility updates, or responses to issues or pull requests.
Point of contact: Sheldon Bauld
MIT