> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pharen.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Pharen UI installieren

> Installiere @pharen/ui, lade die gemeinsamen Styles und verwende die erste Vue-Komponente.

Pharen UI unterstützt Vue 3. Installiere das Paket mit dem Paketmanager deiner Anwendung.

## 1. Paket installieren

<CodeGroup>
  ```bash npm theme={null}
  npm install @pharen/ui
  ```

  ```bash pnpm theme={null}
  pnpm add @pharen/ui
  ```

  ```bash yarn theme={null}
  yarn add @pharen/ui
  ```

  ```bash bun theme={null}
  bun add @pharen/ui
  ```
</CodeGroup>

## 2. Styles laden

Importiere die Styles genau einmal, zum Beispiel in `main.ts`, `app.vue` oder deiner globalen CSS-Datei.

```ts theme={null}
import '@pharen/ui/styles.css';
```

## 3. Komponente importieren

```vue theme={null}
<script setup lang="ts">
import { Button } from '@pharen/ui';
</script>

<template>
  <Button>Save changes</Button>
</template>
```

## Nuxt

Füge die Paket-Styles in `nuxt.config.ts` zur globalen CSS-Liste hinzu.

```ts theme={null}
export default defineNuxtConfig({
  css: ['@pharen/ui/styles.css'],
});
```

## AI Components

AI-spezifische Komponenten liegen in einem eigenen Exportpfad.

```ts theme={null}
import { Conversation, Message, Tool } from '@pharen/ui/components/ai';
```

<Note>
  Das Paket erwartet Vue `^3.5.26` als Peer Dependency.
</Note>