> ## 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.

# Install Pharen UI

> Install @pharen/ui, load the shared styles, and render your first Vue component.

Pharen UI supports Vue 3. Install the package with your application package manager.

## 1. Install the package

<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. Load the styles

Import the styles exactly once, for example in `main.ts`, `app.vue`, or your global CSS entrypoint.

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

## 3. Import a component

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

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

## Nuxt

Add the package styles to the global CSS list in `nuxt.config.ts`.

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

## AI Components

AI-specific components use a separate export path.

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

<Note>
  The package expects Vue `^3.5.26` as a peer dependency.
</Note>