You are viewing the CDN resource index for v12.1.1 of the @cmsgov/design-system package. These resources are currently loaded on this page. To understand how to use these resources, check out this page's source or the code snippets in the sections below.

See also:

- Our example projects on GitHub
- Our developer documentation

## How to load the CSS

Place the following HTML in your head tag:

    <link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/12.1.1/css/index.css" />
    <link rel="stylesheet" href="https://design.cms.gov/cdn/design-system/12.1.1/css/core-theme.css" />

Copy snippet

## How to load the JavaScript components

### Web components

To import all web components, place the following code at the end of your body tag:

    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/all.js"></script>

Copy snippet

To import a select set of web components, place the following code at the end of your body tag and remove the script tags for the components that you do not need:

    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/base.js"></script>

    <!-- Remove any of the following component imports that you do not need -->
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-accordion.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-alert.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-autocomplete.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-badge.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-button.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-choice.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-date-field.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-drawer.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-dropdown.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-filter-chip.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-hint.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-inline-error.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-label.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-modal-dialog.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-month-picker.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-pagination.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-review.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-skip-nav.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-spinner.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-step-list.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-tabs.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-text-field.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-tooltip.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/web-components/bundle/ds-usa-banner.js"></script>

Copy snippet

### Preact components

Place the following HTML in your head tag:

    <script src="https://design.cms.gov/cdn/design-system/12.1.1/preact-components/bundle/preact.min.umd.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/preact-components/bundle/preact-components.js"></script>

Copy snippet

### React components

Place the following HTML in your head tag:

    <script src="https://design.cms.gov/cdn/design-system/12.1.1/react-components/bundle/react.production.min.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/react-components/bundle/react-dom.production.min.js"></script>
    <script src="https://design.cms.gov/cdn/design-system/12.1.1/react-components/bundle/react-components.js"></script>

Copy snippet