Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
Start with the design systemOverviewUser experience guidelinesOverviewSetupVerify a bugVS CodeTechnologies Supported BrowsersVersion update guideQA testingComponent lifecycleContributeRoadmapLong Term Support (LTS)Get support
DevelopersSetupOnce you are setup, you can use the project template to quickly get started.View project templates

Angular UI components

This is the web component library and utilizes Angular's web component integration.1. Add Dependencies
2. Link ionicons in app/index.html Add the following in the head element
3. Update src/app/app.module.ts as per the four steps below
4. Add the styles link in the src/styles.css file

React UI components

This library contains React components which wrap the Government of Alberta Web Components.1. Add Dependencies
2. Link ionicons in app/index.html Add the following to the head element
3. Import the web-component styles in the src/index.css file

Web components

This library contains react components from the Government of Alberta.1. Add Dependencies
2. Link ionicons in index.html Add the following in the head element
3. Import the web-components into src/main.js:
4. Add the styles link in the src/assets/main.css file or wherever your main css file is located:

Angular/React templates

Angular templateReact templateTo use the templates, follow these steps:
  1. Click the green Use this template button
  2. Select Create a new repository
  3. Select an owner and give the repo a suitable name for your project
  4. Select either Public or Private
  5. Click the button Create repository from template
  6. Clone the repo onto your machine
  7. Using a terminal of some kind, go into the directory you created and run the following commands (in order):
    1. npm i
    2. npm run build
    3. npm run start # Angular
      npm run dev # React
  8. Go to the listed port number of your localhost
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes