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 React

To make it easier to integrate GC Design System web components into React projects, the gcds-components-react package provides React wrappers. These wrappers make it easier to work with web components in the React ecosystem. They offer JSX bindings for properties and custom events, auto-completion, and type safety. The web components inherit native properties and interoperability.

React installation instructions

Follow these steps to install and use GC Design System components in your React 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-react

2. Import GC Design System

Place the following code in the index.js file of your app to import GC Design System styles: 
import '@gcds-core/components-react/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 index.js file of your app to import GC Design System CSS Shortcuts: 
import '@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