# Installation & Setup

## Install Packages

Package can be installed via npm or used directly from the CDN.

### NPM

```bash
npm install @riverty/web-components
```

### CDN

```html
<script type="module" src="https://cdn.riverty.design/components/{version}/dist/web-components/web-components.esm.js"></script>
```

## Registering Components

Make sure to call `defineCustomElements()` before any component renders (e.g., in your app entry point):

```js
import { defineCustomElements } from '@riverty/web-components/loader';
defineCustomElements();
```

### Vite

Vite may attempt to pre-bundle the loader, which can cause issues. To prevent this, add the following to your `vite.config.ts`(`vite.config.js`):

```ts
export default defineConfig({
  // ...
  optimizeDeps: {
    exclude: ['@riverty/web-components/loader'],
  },
});
```