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 Angular

To make it easier to integrate GC Design System web components into Angular projects, the gcds-components-angular package provides Angular wrappers. These wrappers make it easier to work with web components in the Angular ecosystem by preventing unnecessary repaints through detached change detection, and enabling form controls to work with ngModel and reactive forms. The web components inherit native properties and interoperability.

Angular installation instructions

Follow these steps to install and use GC Design System components in your Angular project.

1. Install the package

Navigate to your project’s root folder and run the following command: 
npm install @gcds-core/components @gcds-core/components-angular

2. Import GC Design System

Place the following code in the app.module.ts file of your app: 
import { GcdsComponentsModule } from '@gcds-core/components-angular';

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

export class AppModule { }
Place the following code in the styles.scss file of your app to import GC Design System styles: 
@import '../node_modules/@gcds-core/components/dist/gcds/gcds.css';
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 code in the styles.scss file of your app to import CSS Shortcuts: 
@import '../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.
Need help? If you need help, reach out to us and we'll help you get started.
2026-09-02