Install GC Design System

GC Design System is in testing phase. Public servants can try out and use the design system. Be an early adopter. Install it and start experimenting!

Why GC Design System’s right for you

Use GC Design System to meet Government of Canada requirements for digital service delivery and communication.

Simplify your digital delivery.
Work in the framework you want to work in.
Help create seamless Government of Canada service experiences.

How our updates work

Changes to GC Design System (GCDS) come in a single version update with tokens, components, and (usually) non-breaking changes. GC Design System is independent of the Web Experience Toolkit (WET) and GCWeb.

1. Choose the option that works best for you

The GCDS-component library works in multiple frameworks and can also be used framework free. Choose the environment you're building in and follow the instructions to get started.

2. Getting started

Select an option in step 1 to get your installation instructions.

2. Getting started

Use these instructions to install GCDS components if you're using Angular.

Install with npm

Navigate to the root folder of your project and run:

npm install @cdssnc/gcds-components @cdssnc/gcds-components-angular

Place the following code in the app.module.ts file of your app:

import { GcdsComponentsModule } from '@cdssnc/gcds-components-angular';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    GcdsComponentsModule
  ],
  providers: [],
  bootstrap: [...]
})

export class AppModule { }

Place the following code in the styles.scss file of your app:

@import '../node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css';

2. Getting started

Use these instructions to install GCDS components if you're using React.

Install with npm

Navigate to the root folder of your project and run:

npm install @cdssnc/gcds-components @cdssnc/gcds-components-react

Place the following code in the index.js file of your app:

import '@cdssnc/gcds-components-react/gcds.css'

2. Getting started

Use these instructions to install GCDS components if you're using Vue.

Install with npm

Navigate to the root folder of your project and run:

npm install @cdssnc/gcds-components

Place the following code in the main.js file of your app:

import { applyPolyfills, defineCustomElements } from '@cdssnc/gcds-components/loader';
import '@cdssnc/gcds-components/dist/gcds/gcds.css';

applyPolyfills().then(() => {
  defineCustomElements();
});

2. Getting started

Use these instructions to install GCDS components if you're using npm (node package manager) with no framework.

Install with npm

Navigate to the root folder of your project and run:

npm install @cdssnc/gcds-components

Place the following code in the <head> element of your site:

<!-- Icons Font Awesome (to access icons, import Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">

<!-- GC Design System -->
<link rel="stylesheet" href="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.css">
<script type="module" src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.esm.js"></script>
<script nomodule src="/node_modules/@cdssnc/gcds-components/dist/gcds/gcds.js"></script>

2. Getting started

Use these instructions to install GCDS components with no framework.

Add the code

Place the following code in the <head> element of your project:

<!-- Icons Font Awesome (to access icons, import Font Awesome) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" crossorigin="anonymous">

<!-- GC Design System -->
<link rel="stylesheet" href="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.css">
<script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@latest/dist/gcds/gcds.js"></script>

Note: <script type="module"> requires a server to load properly. If developing locally, please use <script nomodule>.

2. Getting started

Lost and looking for our Figma library? We got you:

Go to Figma

2. Getting started

Not seeing an environment that matches? Reach out to us and we'll help you get started.

3. Next steps

For each design, find code paired with guidance. We've pre-set colour, type, and spacing using design tokens that form the foundation of any design.

Start by browsing components to find what you need for your product and users. Next, open the project you created, pull in the code, and get started.

Browse components

2024-01-04