# Bc Gov Design System > BC Government Design System for React/Vite applications — npm packages, component usage (Header, Footer, Button), BC Sans font loading, design token CSS variables, and colour scheme. Use when building or reviewing BC Gov React frontends, replacing manual header/footer markup, or applying correct colour tokens instead of hard-coded hex values. - Skill: `rloisell/bc-gov-design-system` (Agent Skill) - Install (CLI): `npx skillmds@latest add rloisell/bc-gov-design-system` - Raw SKILL.md: https://api.skillmd.com/api/skills/rloisell/bc-gov-design-system/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: rloisell (https://skillmd.com/u/rloisell) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/rloisell/bc-gov-design-system --- # BC Gov Design System — React Skill Correct usage of the official BC Government Design System packages in React/Vite applications. --- ## npm Packages Three packages are required for a compliant BC Gov React frontend: | Package | Purpose | Import target | |---------|---------|---------------| | `@bcgov/design-system-react-components` | Header, Footer, Button, etc. | Named imports from package root | | `@bcgov/bc-sans` | BC Sans font files (woff/woff2) bundled locally | `@bcgov/bc-sans/css/BC_Sans.css` | | `@bcgov/design-tokens` | CSS custom properties (colour, spacing, radius) | `@bcgov/design-tokens/css/variables.css` | ```bash npm install @bcgov/design-system-react-components @bcgov/bc-sans @bcgov/design-tokens ``` **Never** import fonts from `fonts2.gov.bc.ca` — that external URL will be blocked in network-restricted or air-gapped environments. Always load BC Sans from the npm package. --- ## main.jsx — Required Import Order CSS imports must appear in this exact order so design token variables are available before component styles, and component styles are available before app overrides: ```js import '@bcgov/bc-sans/css/BC_Sans.css'; import '@bcgov/design-tokens/css/variables.css'; import './index.css'; // app-level overrides last ``` --- ## Header Component `Header` renders the official blue BC Gov banner with the BC logo built in via its internal `SvgBcLogo` component — **no static SVG asset is needed in `public/`**. ```jsx import { Header } from '@bcgov/design-system-react-components';
Skip to main content]} /> ``` Key props: | Prop | Type | Notes | |------|------|-------| | `title` | string | Application name shown beside logo | | `skipLinks` | ReactNode[] | Accessibility skip-nav links | | `logoLinkElement` | ReactNode | Override the logo anchor (e.g. ``) | | `logoImage` | ReactNode | Override the logo SVG entirely (rarely needed) | | `children` | ReactNode | Additional header content (right-side slot) | --- ## Footer Component ```jsx import { Footer, FooterLinks } from '@bcgov/design-system-react-components';