# @shopify/polaris-types

Type definitions for [Polaris web components](https://shopify.dev/docs/api/app-home/polaris-web-components).

## Installation

Add the types package as a dev dependency:

```bash
npm i -D @shopify/polaris-types
```

## Usage

Since Polaris web components are not imported directly, you need to add the types to your TypeScript configuration in one of the following ways:

### Method 1: Add to tsconfig.json

```json
{
  "compilerOptions": {
    "types": ["@shopify/polaris-types"]
  }
}
```

### Method 2: Add as a triple-slash reference

Add the following line at the top of your TypeScript files where you need the types:

```typescript
/// <reference types="@shopify/polaris-types" />
```

## Custom Elements Manifest

This package includes a [Custom Elements Manifest](https://github.com/webcomponents/custom-elements-manifest) (`custom-elements.json`) that describes the Polaris web components in a standardized format. The manifest is generated using [`@custom-elements-manifest/analyzer`](https://github.com/open-wc/custom-elements-manifest) with custom Polaris plugins.

IDE extensions and other tooling that understand the CEM format can use this to provide autocomplete, documentation, and other rich features for Polaris web components.

### Accessing the manifest

```javascript
// Via package.json "customElements" field (recommended for tooling)
// The field points to: ./dist/custom-elements.json

// Via direct import
import cem from '@shopify/polaris-types/custom-elements';
```