Clinical Design System React components

The Clinical Design System contains a React component library. We currently leverage two other libraries: USWDS for styles and react-uswds as a starting point for the React components. Each library is customized and expanded upon to satisfy Clinician specific needs.

You can find documentation for all components in our Storybook, including links to USWDS and react-uswds documentations.

React Components Storybook

You can also browse our components section and find a link to the React component’s Storybook documentation at the top of the component’s page.

Installation

Ensure you satisfy the prerequisites listed on the Getting started for developers page.

Install the package by running

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

or

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

Note: You’ll also need to install the recommended version of focus-trap-react and the supported versions of react and react-dom. You can find the recommended and supported versions within our package.json.

Using React components

Import the component in your app. Please refer to our Storybook documentation for props and usage.

import { Button } from "@department-of-veterans-affairs/clinical-design-system";


function App() {
  return (
    <Button
      type="button"
      accentStyle="warm"
    >
  )
}

Utility classes and design tokens

The Design System makes available USWDS utility classes as well as makes use design tokens.

To get started, see the following links