GC Design SystemStart to useInstall GC Design System
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind 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@||shortcuts-version||/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-09-02