Getting started

The @department-of-veterans-affairs/clinical-design-system package contains the Clinical Design System design tokens stored as Sass variables in the dist/core/tokens folder.

Before you can use them, you will need to satisfy developer prerequisites. Refer to the Getting Started for Developers section.

1. Installing the VACDS Core package

npm install @department-of-veterans-affairs/clinical-design-system

or

yarn add @department-of-veterans-affairs/clinical-design-system

2. Implementing VACDS Core package in React environments

You will need the Sass package installed if you plan on using the design tokens.

npm install sass

or

yarn add sass

3. Using Clinical Design System design tokens

In your App.jsx file, make sure you have an App.scss file imported.

# App.jsx

import './App.scss';

Inside the App.scss file, import the Sass variables from @department-of-veterans-affairs/clinical-design-system so the design tokens can be made available to your app.

# App.scss

@use '@department-of-veterans-affairs/clinical-design-system/dist/core/tokens/token_file.scss' as scopeName;

Currently available tokens files: _breakpoints.scss _colors.scss _fonts_.scss

Example of using color design tokens to style an html element:

# App.scss

@use '@department-of-veterans-affairs/clinical-design-system/dist/clinical-design-system/tokens/colors' as colors;

div {
    border: 1px solid colors.$base-dark;
    background-color: colors.$base-lightest;
    color: colors.$base-font-color;
}

Refer to Theme color tokens and State color tokens section for more details on color tokens.