Getting Started

The @department-of-veterans-affairs/vacds-design-system package contains the VA Clinical Design System all the USWDS utility classes. Please refer to this page for more information on USWDS utility classes.

Before you can use those classes, 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. Sass

It is recommended that your app has the Sass package installed.

npm install sass

yarn add sass

3. Using USWDS utility classes

If you don’t have a App.scss file yet, you can create one.

In your App.scss, include any utility classes you may need by importing the specific file or all the utility classes (please note that the uswds_all_utils.css is quite big) located in @department-of-veterans-affairs/clinical-design-system/dist/assets/.

All utility classes

For a complete list of modules and their corresponding classes, please refer to this page.

# App.scss

@import '@department-of-veterans-affairs/clinical-design-system/dist/core/css/utility-classes.css';

In your App.jsx file, import the USWDS compiled css files. This will allow you to have access to the USWDS utility classes.

# App.jsx

import './App.scss';

Now you will be able to use USWDS utilities by using the classes provided by the file you’ve imported.

# App.jsx

<div className="margin-bottom-3">....</div>

Typography

If you would like to use our fonts and associated classes, please use the following: @import '@department-of-veterans-affairs/clinical-design-system/dist/core/css/dist/core/css/typography.css

Other USWDS classes

The @department-of-veterans-affairs/clinical-design-system/dist/core/css folder also contains a selection of “USA classes”, various classes used by USWDS for specific styling purposes. Those classes are added on per needed basis, the list below will grow over time.

Those files can be imported individually follow the same pattern as above.

Currently available: