More topics

Component library

Last updated on February 5, 2026

Find design assets, code and technical docs for user interface components.

On this page:

Get started with components​

Available components

This library is a work in progress. We release components when both design and code implementations are ready. To learn more about our backlog, view the roadmap.

Navigation and structure 

Header

An illustration of the header component

The header helps the user identify authorship and navigate a product or service.

Footer

An illustration of the footer component

The footer is used to display secondary information and navigation.

Inputs and controls 

Buttons

An illustration of the button component in various states

Buttons enable the user to take an important action.

Toggle button

An illustration of the toggle button group component

Toggle buttons enable the user to change a setting between binary or mutually-exclusive states.

Checkbox

An illustration of the checkbox group component

A checkbox group enables the user to select one or more options from a list.

Radio

An illustration of the radio group component

A radio group enables the user to select one option from a mutually-exclusive list.

Select (dropdown menu)

An illustration of the dropdown menu component

Dropdown menus enable the user to select an option from a list.

Switch

An illustration of the switch component in various states

Switches enable the user to toggle an option on or off.

Text field

An illustration of the text field component

A text field enables the user to enter a short amount of text into an interface or form.

Text area

An illustration of the text area component

A text area enables a user to enter multiple lines of text into an interface or form.

Number field

An illustration of the number field component

A number field enables the user to enter a numerical value into an interface or form.

Date picker

An illustration of the date picker component

A date picker enables the user to enter or select a date value.

Tags

An illustration of the tag component

Tags are used to label and filter content in an interface.

 

Notifications and feedback 

Alert banner

An illustration of the alert banner component

An alert banner displays an important, system-level message.

Inline alert

An illustration of the inline alert component

An inline alert displays an important message to the user.

Dialogs

An illustration of the modal dialog component

Modal dialogs present critical information or actions to the user, blocking the rest of the UI.

Tooltip

An illustration of the tooltip component

Tooltips provide additional information when a user hovers over or focuses an element.

Content 

Accordion group

An illustration of the accordion group component

Accordions display content inside a container that the user can open and close. 

Callout

An illustration of the callout component

A callout visually highlights a section of content within an interface.

Information for designers

You need a Figma license to make full use of the design system. Some functionality is not available on other account types. Access to the Government of B.C.'s enterprise license is administered by the CITZ Information Management Branch. Request access to Figma.

Recommended: install the managed library

If you are a member of the Government of B.C. organisation on Figma, you can add the B.C. Design System library to your projects directly.

Using this managed library makes it easy to receive updates when they are released.

Install the library

Download and import the library manually

If you are not a member of the Government of B.C. organisation, you can download the library via Figma Community.

You can then self-publish it as a library for yourself or your team to use in your projects.

Download the library

Information for developers

If you encounter a bug or have a question, create an issue on GitHub.  

The component library is built in React, and is installable via the npm registry. Releases are semantically versioned.

The library supports React v16.14.0 and later.

Core dependencies

The component library relies on these packages as core dependencies: 

A full list of dev dependencies is available on npm.

Developer resources

Find source code, documentation and tools to help you use components:

Changelogs for each release are on GitHub.

Support for other languages and frameworks

At this time, we do not officially support languages or frameworks other than React.

If you are reimplementing design system components in another format, consider sharing your work publicly for others to use. 

If your team or organisation has capacity to maintain an implementation in another format, please email designsystem@gov.bc.ca.