# @microsoft/fast-components

> A library of Web Components

Latest version **2.30.6** (published 2022-05-06) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install @microsoft/fast-components
pnpm add @microsoft/fast-components
yarn add @microsoft/fast-components
bun add @microsoft/fast-components
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 2.30.6 |
| Published | 2022-05-06 |
| First published | 2020-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Microsoft |
| Maintainers | microsoft1es, fastsvc, eisenbergeffect, chrisdholt, awentzel, janechu, nirice |

## Links

- npm: https://www.npmjs.com/package/@microsoft/fast-components
- Repository: https://github.com/Microsoft/fast
- Homepage: https://github.com/Microsoft/fast#readme
- Issues: https://github.com/Microsoft/fast/issues/new/choose
- npm.io page: https://npm.io/package/@microsoft/fast-components

## Dependencies (5)

- [tslib](https://npm.io/package/tslib.md) ^1.13.0
- [@microsoft/fast-colors](https://npm.io/package/@microsoft/fast-colors.md) ^5.3.0
- [@microsoft/fast-element](https://npm.io/package/@microsoft/fast-element.md) ^1.10.1
- [@microsoft/fast-foundation](https://npm.io/package/@microsoft/fast-foundation.md) ^2.46.2
- [@microsoft/fast-web-utilities](https://npm.io/package/@microsoft/fast-web-utilities.md) ^5.4.1

## Recent versions

- 2.30.6 (latest) — 2022-05-06
- 2.30.5 — 2022-05-05
- 2.30.4 — 2022-05-04
- 2.30.3 — 2022-05-03
- 2.30.2 — 2022-05-01
- 2.30.1 — 2022-04-28
- 2.30.0 — 2022-04-27
- 2.29.1 — 2022-04-21
- 2.29.0 — 2022-04-20
- 2.28.1 — 2022-04-17
- 2.28.0 — 2022-04-14
- 2.27.1 — 2022-04-12
- 2.27.0 — 2022-04-10
- 2.26.2 — 2022-04-07
- 2.26.1 — 2022-04-06
- … 150 more at https://npm.io/package/@microsoft/fast-components/versions

## README

# FAST Components

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components)

`@microsoft/fast-components` is a library of Web Components that *composes* the exports of `@microsoft/fast-foundation` with stylesheets aligning to the FAST design language. This composition step registers a custom element. See the [quick start](https://fast.design/docs/components/getting-started) to get started using the components.

## Installation

### From NPM

To install the `@microsoft/fast-components` library, use either `npm` or `yarn` as follows:

```shell
npm install --save @microsoft/fast-components @microsoft/fast-foundation
```

```shell
yarn add @microsoft/fast-components @microsoft/fast-foundation
```

Within your JavaScript or TypeScript code, import and register desired components with the `DesignSystem`:

```ts
import { DesignSystem } from "@microsoft/fast-foundation"
import { fastAnchor } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    fastAnchor()
);
```

Alternatively you can easily register all components:

```ts
import { DesignSystem } from "@microsoft/fast-foundation"
import { allComponents } from '@microsoft/fast-components';

DesignSystem.getOrCreate().register(
    Object.values(allComponents).map(definition => definition())
);
```
 
Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](https://fast.design/docs/integrations/introduction).

### From CDN

A pre-bundled script that contains all APIs needed to use FAST Foundation is available on CDN. You can use this script by adding [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules) to the script element and then importing from the CDN.

```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components/dist/fast-components.min.js"></script>
    </head>
    <!-- ... -->
</html>
```

The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@microsoft/fast-components@2.16.0/dist/fast-components.min.js"></script>
```

:::note
For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL.
:::

## Development

To start the component development environment, run `yarn start`.

### Known issue with Storybook site hot-reloading

Storybook will watch modules for changes and hot-reload the module when necessary. This is usually great but poses a problem when the module being hot-reloaded defines a custom element. A custom element name can only be defined by the `CustomElementsRegistry` once, so reloading a module that defines a custom element will attempt to re-register the custom element name, throwing an error because the name has already been defined. This error will manifest with the following message:
`Failed to execute 'define' on 'CustomElementRegistry': the name "my-custom-element-name" has already been used with this registry`

This is a known issue and will indicate that you need to refresh the page. We're working on surfacing a more instructive error message for this case.

---
_Source: https://npm.io/package/@microsoft/fast-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._