GC Design System Components Installation Page templates Contact us Get involved Find a demo GC Design System

Install GC Design System

GC Design System is in testing phase. Public servants can try out and use the design system. Be an early adopter. Install it and start experimenting!

Why GC Design System’s right for you

Use GC Design System to meet Government of Canada requirements for digital service delivery and communication.

How our updates work

Changes to GC Design System (GCDS) come in a single version update with tokens, components, and (usually) non-breaking changes. GC Design System is independent of the Web Experience Toolkit (WET) and GCWeb.

Choose the option that works best for you

The GCDS-component library works in multiple frameworks and can also be used framework free. Choose the environment you're building in and follow the instructions to get started.

Not seeing an environment that matches? Reach out to us and we'll help you get started.

Design

Development

Use these instructions to install GCDS components if you're using HTML / no framework. Use these instructions to install GCDS components if you're using React. Use these instructions to install GCDS components if you're using React with SSR (e.g. NextJS). Use these instructions to install GCDS components if you're using npm but are not using a specific framework. Use these instructions to install GCDS components if you're using Angular. Use these instructions to install GCDS components if you're using Vue.
2024-12-31