# Component-Library

This module contains reusable Web Components (with React bindings) implementing [USWDS](https://designsystem.digital.gov/) for the [VA Design System](https://design.va.gov), published as an [NPM package](https://www.npmjs.com/package/@department-of-veterans-affairs/component-library). While built for VA.gov, the components are framework-agnostic and can be used in any project.

Design tokens are provided by the companion [CSS-Library](https://www.npmjs.com/package/@department-of-veterans-affairs/css-library) package. The CSS custom property version of the tokens is already included with the Web Components, so you don't need to install CSS-Library separately unless you need the tokens in another format (Sass variables or JSON) or want to use its stylesheets directly.

## Quick start

```
yarn add @department-of-veterans-affairs/component-library
```

```js
import '@department-of-veterans-affairs/component-library/dist/main.css';
import {
  applyPolyfills,
  defineCustomElements,
} from '@department-of-veterans-affairs/component-library';

applyPolyfills().then(() => {
  defineCustomElements();
});
```

For the full setup, including the icon sprite sheet and framework-specific examples, see the [installation guide](https://design.va.gov/about/developers/install).

See [design.va.gov](https://design.va.gov/components/) or [Storybook](https://design.va.gov/storybook/?path=/story/about-introduction--page) for a full list of available components.

This library is maintained by the VA Design System team.

## Web Components

This library is built on [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components) using [Stencil](https://stenciljs.com/), implementing [USWDS](https://designsystem.digital.gov/) as standards-based, framework-agnostic custom elements. Components can be used in plain HTML pages or in JSX-based frameworks like React via generated bindings.

### Usage

To use these Web Components in your own project, follow the [installation guide](https://design.va.gov/about/developers/install). This will allow the components to be used in JSX or HTML.