GOV.WALES Component Library

BETA This library is in development and is subject to change.

About

This library contains GOV.WALES design system components built using Typescript React and SASS. Components and states are documented in Storybook.

Contact the team

This repository is maintained by the Welsh Government Corporate Digital Team. If you want to know more about GOV.WALES Design System, please email the Corporate Digital Team.

Quick start

1. Install with npm (recommended)

npm install @govwales/component-library

2. Importing GOV.WALES react components into your project

Follow the GOV.WALES component library guidance on how to use import components properties and mark-up.

import { ComponentName } from '@govwales/component-library';

3. Importing SCSS or CSS into your project

You can import the GOV.WALES global styles into your project using SCSS or CSS.

Your project will require a SCSS complier such as 'Dart-sass'. To import dart sass:

npm -i --save-dev sass

To import global SCSS add the below to your app react file:

@import '@govwales/component-library/dist/scss/_govwales-global.scss';

To import component SCSS only add the below to app react file:

@import '@govwales/component-library/dist/scss/_govwales-components.scss';

To import global SCSS and components add the below to app react file:

@import '@govwales/component-library/dist/scss/govwales-styles.scss';

To import global CSS add the below to app react file:

@import '@govwales/component-library/dist/css/govwales-styles.css';