Install GC Design System

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-vue

In your main.js file, import the GC Design System components plugin and use it:

import { GcdsComponents } from '@cdssnc/gcds-components-vue';

createApp(App).use(GcdsComponents).mount('#app');

Add the global styles to your app. There are multiple ways to achieve this.

You can import it in your main.js file next to your style.css:

import '@cdssnc/gcds-components-vue/gcds.css';
import './style.css';

or in your App.vue using the html style tag.

<style src='@cdssnc/gcds-components-vue/gcds.css'>
  /* global styles */
</style>

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

Use the latest version of GC Design System. Version , released on , is the most recent. Pinned versions provide stability and predictability because the code will remain consistent and won't change unexpectedly, which can be crucial for maintaining the stability of an application. However, it requires manual updating of the CDN links whenever a newer version of GC Design System is released.

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@||version||/dist/gcds/gcds.css">
<script type="module" src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@||version||/dist/gcds/gcds.esm.js"></script>
<script nomodule src="https://cdn.design-system.alpha.canada.ca/@cdssnc/gcds-components@||version||/dist/gcds/gcds.js"></script>

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

Automatic updates using @latest

Use the @latest version of GC Design System to receive automatic updates whenever a new version is released. While it removes the need to manually update the CDN links, it adds the risk of introducing breaking changes to the codebase as new versions are automatically applied.

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.

Contact us