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.

npm i @mate-react/bundles

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

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

Next.js

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

npm i @mate-react/nextjs-bundles

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

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

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:

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