GC Design System Start to use Install GC Design System
GC Design System Start to use Page templates overview Basic page Components overview Breadcrumbs Button Card Checkboxes Container Date input Date modified Details Error message Error summary Fieldset File uploader Footer Grid Header Heading Icon Input Language toggle Link Notice Pagination Radios Screenreader-only Search Select Side navigation Signature Stepper Table Text Textarea Theme and topic menu Top navigation CSS shortcuts overview Reset styles Responsive layout State Box sizing Container sizing Display Overflow Position Visibility Font Font family Font size Font style Font weight Line height Link colour Link size Link text decoration List style Text align Text colour Text overflow Text transform Word break Margin Padding Align content Align items Align self Flex Flex direction Flex grow Flex shrink Flex wrap Gap Grid columns Grid rows Justify content Justify items Justify self Order Place content Place items Place self Background colour Border colour Border radius Border style Border width Icon names Icon size Image Cursor Pointer events Transition Styles overview Design tokens Colour tokens Spacing tokens Typography tokens Contact us Get involved Find a demo

Install HTML

Use GC Design System web components directly in HTML. These components are framework-agnostic and behave similarly to native HTML elements.

Use this option for:

  • Static sites
  • CMS platforms
  • Node.js
  • Java
  • Svelte
  • .NET

If you’re using React, Angular, or Vue frameworks, browse the installation page for framework-specific options.

Select the package you’re using

Based on your selection, follow the steps to install GC Design System components in your project.

Npm installation instructions

1. Install the package

Navigate to your project’s root folder and run the following command:

npm install @gcds-core/components

2. Include GC Design System in your project

Add the following link tags inside the head tag of your HTML files to load GC Design System:

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

3. Add CSS Shortcuts stylesheet We recommend using GC Design System CSS Shortcuts to apply predefined CSS utility classes. These classes align with our components and help you build faster while maintaining consistency. Using CSS Shortcuts in your project is optional. It can be added alongside your existing CSS. Navigate to your project’s root folder and run the following command: 
npm install @gcds-core/css-shortcuts

Add the following link tag inside the head tag of your HTML files:

<!-- GC Design System CSS Shortcuts -->
<link
  rel="stylesheet"
  href="/node_modules/@gcds-core/css-shortcuts/dist/gcds-css-shortcuts.min.css"
/>

4. Start building Once you’ve installed the design system, you can start pulling the code you need into your project.

Start with a template Start with a basic page template. It combines multiple components for common GC pages.

Start with components Add components to build a product that meets your needs.

Start with your code Add style classes to HTML using CSS Shortcuts. This is for your custom code.

CDN installation instructions

1. Select how to receive updates

You have two options to receive updates from the CDN:

  • Use pinned version for stability (recommended).
  • Use @latest to get automatic updates.

It’s highly recommended to use this option to ensure stability and predictability in your project.

Add the following code to the head tag of your HTML files to load GC Design System. Make sure the current version is listed.

Current version: Version , released on .

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

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

Going forward

The code will remain unchanged until you manually update the version in the CDN URLs. This is ideal for production environments.

Check for new GC Design System versions regularly to update the latest pinned version.

b. Use @latest version

Use the @latest tag to pull the most recent version of GC Design System into your project. Put this tag in place of the version number.

While it removes the need to manually update versions, it adds the risk of introducing breaking changes to the codebase as new versions are automatically applied.

2. Add CSS Shortcuts stylesheet

We recommend using GC Design System CSS Shortcuts to apply predefined CSS utility classes. These classes align with our components and help you build faster while maintaining consistency.

Using CSS Shortcuts in your project is optional. It can be added alongside your existing CSS.

You have the same options as above:

  • Use pinned version for stability (recommended).
  • Use @latest to get automatic updates.

Add the following link tag inside the head tag of your HTML files. Make sure the current version is listed.

<!-- GC Design System CSS Shortcuts -->
<link
  rel="stylesheet"
  href="https://cdn.design-system.canada.ca/@gcds-core/css-shortcuts@1.1.0/dist/gcds-css-shortcuts.min.css"
/>

b. Use @latest version

Use the @latest tag to pull the most recent version of CSS Shortcuts into your project. Put this tag in place of the version number.

3. Start building Once you’ve installed the design system, you can start pulling the code you need into your project.

Start with a template Start with a basic page template. It combines multiple components for common GC pages.

Start with components Add components to build a product that meets your needs.

Start with your code Add style classes to HTML using CSS Shortcuts. This is for your custom code.

Need help? If you need help, reach out to us and we'll help you get started.
2026-02-17