# Install

## .npmrc

```
@mate:registry=https://git.akdb.de/api/v4/projects/4452/packages/npm/
@mate-react:registry=https://git.akdb.de/api/v4/projects/5092/packages/npm/
```

## Plain React

Use these bundles if you directly want to use the web component wrappers.

```shell
npm i @mate-react/bundles
```

Then import from the component you need, e.g.

```javascript
import { MateButton } from '@mate-react/button';
```

## Next.js

Use the following bundles if you are using React components with Next.js

```shell
npm i @mate-react/nextjs-bundles
```

Then import the component from that bundle, e.g.

```javascript
import { MateButton } from '@mate-react/nextjs-bundles';
```

If you are using the **.ts/.tsx** files in src folders directly (e.g. @mate-react/button/src/button.tsx), don't forget to transpile the @mate packages

```javascript
const nextConfig = {
    transpilePackages: [/@mate-react\/.*/]
};
```

Otherwise transpiled components are imported by default and there are no further steps needed.

## Typing: `theme` attribute

The `theme` attribute is not surfaced in the TypeScript types generated by `@lit/react`. To enable type-safe usage of `theme` across all Mate React components, add this import once in your app's entry file:

```typescript
import '@mate-react/component-base/src/augmentations.ts';
```