React UI Components

React wrappers for the Government of Alberta Design System web components.

Supported React versions: 17, 18, and 19.

Install

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

Register the web components

Import the underlying web components once in your application entry point, such as src/main.tsx:

import "@abgov/web-components";

Add styles

Import the component styles in your main stylesheet, such as src/index.css. This stylesheet includes the design tokens and dark theme overrides:

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

Add icons

Add Ionicons to the <head> of index.html:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ionicons/ionicons.esm.js"
  integrity="sha384-QeK0N4dchhCMcoF1OkHAcgwR00gJv1uQr15TCJ5CXEcLF0wm8HC4QbtQzJMCTO+c"
  crossorigin="anonymous"
></script>

Use a component

import { GoabButton } from "@abgov/react-components";

export function App() {
  return <GoabButton type="primary">Continue</GoabButton>;
}

See the developer setup guide and Government of Alberta Design System for more information.