# Approval
Source: https://docs.pharen.app/ui/ai/approval

Import and use the Approval components from @pharen/ui/components/ai.

Use **Approval** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="approval" title="Approval preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ApprovalPresentation } from '@pharen/ui/components/ai';

  const presentation = {
    kind: 'browser_batch' as const,
    toolName: 'browser',
    riskClass: 'mutation' as const,
    executionTarget: 'local' as const,
    approvalScope: 'single_call' as const,
    steps: [
      { position: 1, action: 'open_page', target: 'pharen.app', riskClass: 'read' as const },
      { position: 2, action: 'submit_form', target: 'Create workflow', riskClass: 'mutation' as const },
    ],
  };
  </script>

  <template><ApprovalPresentation :presentation="presentation" label="Planned browser actions" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ApprovalPresentation } from '@pharen/ui/components/ai';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `ApprovalPresentation` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/approval)


# Chain of thought
Source: https://docs.pharen.app/ui/ai/chain-of-thought

Import and use the Chain of thought components from @pharen/ui/components/ai.

Use **Chain of thought** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="chain-of-thought" title="Chain of thought preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ChainOfThought, ChainOfThoughtContent, ChainOfThoughtHeader, ChainOfThoughtStep } from '@pharen/ui/components/ai';
  </script>

  <template>
    <ChainOfThought default-open class="w-full max-w-lg">
      <ChainOfThoughtHeader>How the answer was prepared</ChainOfThoughtHeader>
      <ChainOfThoughtContent>
        <ChainOfThoughtStep label="Searched the workspace" description="Found 12 related documents." icon="lucide:search" status="complete" />
        <ChainOfThoughtStep label="Compared the results" description="Checked dates and duplicate entries." icon="lucide:list-checks" status="active" :spin="false" last />
      </ChainOfThoughtContent>
    </ChainOfThought>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ChainOfThought, ChainOfThoughtHeader, ChainOfThoughtContent, ChainOfThoughtStep, ChainOfThoughtSearchResults, ChainOfThoughtSearchResult, ChainOfThoughtImage } from '@pharen/ui/components/ai';
```

## Exports

| Export                        | Purpose                                  |
| ----------------------------- | ---------------------------------------- |
| `ChainOfThought`              | Exported Vue component from this module. |
| `ChainOfThoughtHeader`        | Structures the header region.            |
| `ChainOfThoughtContent`       | Contains the visible content.            |
| `ChainOfThoughtStep`          | Exported Vue component from this module. |
| `ChainOfThoughtSearchResults` | Exported Vue component from this module. |
| `ChainOfThoughtSearchResult`  | Exported Vue component from this module. |
| `ChainOfThoughtImage`         | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/chain-of-thought)


# Checkpoint
Source: https://docs.pharen.app/ui/ai/checkpoint

Import and use the Checkpoint components from @pharen/ui/components/ai.

Use **Checkpoint** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="checkpoint" title="Checkpoint preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Checkpoint class="w-full max-w-lg">
      <CheckpointTrigger tooltip="Restore this checkpoint" class="flex items-center gap-2 rounded-md px-2 py-1 text-sm hover:bg-muted">
        <CheckpointIcon /> Saved before publishing
      </CheckpointTrigger>
    </Checkpoint>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Checkpoint, CheckpointIcon, CheckpointTrigger } from '@pharen/ui/components/ai';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `Checkpoint`        | Exported Vue component from this module. |
| `CheckpointIcon`    | Exported Vue component from this module. |
| `CheckpointTrigger` | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/checkpoint)


# Code block
Source: https://docs.pharen.app/ui/ai/code-block

Import and use the Code block components from @pharen/ui/components/ai.

Use **Code block** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="code-block" title="Code block preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { CodeBlock } from '@pharen/ui/components/ai';

  const code = `import { Button } from '@pharen/ui';\n\n<Button>Save changes</Button>`;
  </script>

  <template><CodeBlock :code="code" language="vue" show-line-numbers /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { CodeBlock, CodeBlockContainer, CodeBlockHeader, CodeBlockCopyButton } from '@pharen/ui/components/ai';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `CodeBlock`           | Exported Vue component from this module. |
| `CodeBlockContainer`  | Exported Vue component from this module. |
| `CodeBlockHeader`     | Structures the header region.            |
| `CodeBlockCopyButton` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/code-block)


# Context
Source: https://docs.pharen.app/ui/ai/context

Import and use the Context components from @pharen/ui/components/ai.

Use **Context** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="context" title="Context preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Context, ContextContent, ContextContentBody, ContextContentFooter, ContextContentHeader, ContextInputUsage, ContextOutputUsage, ContextTrigger } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Context
      :used-tokens="18420"
      :max-tokens="128000"
      :default-open="true"
      model-id="GPT-5.4"
      :usage="{ inputTokens: 14200, outputTokens: 4220, costEur: 0.084, currency: 'EUR' }"
    >
      <ContextTrigger />
      <ContextContent>
        <ContextContentHeader />
        <ContextContentBody class="space-y-2"><ContextInputUsage /><ContextOutputUsage /></ContextContentBody>
        <ContextContentFooter />
      </ContextContent>
    </Context>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Context, ContextTrigger, ContextContent, ContextContentHeader, ContextContentBody, ContextContentFooter, ContextInputUsage, ContextOutputUsage } from '@pharen/ui/components/ai';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `Context`              | Exported Vue component from this module. |
| `ContextTrigger`       | Opens or activates the component.        |
| `ContextContent`       | Contains the visible content.            |
| `ContextContentHeader` | Structures the header region.            |
| `ContextContentBody`   | Exported Vue component from this module. |
| `ContextContentFooter` | Structures the footer region.            |
| `ContextInputUsage`    | Exported Vue component from this module. |
| `ContextOutputUsage`   | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/context)


# AI Components
Source: https://docs.pharen.app/ui/ai/index

Build AI messages, tool calls, thinking states, and conversation interfaces.

Import these components from the dedicated `@pharen/ui/components/ai` path.

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

<CardGroup>
  <Card title="Approval" icon="box" href="/ui/ai/approval">
    1 exported component
  </Card>

  <Card title="Chain of thought" icon="box" href="/ui/ai/chain-of-thought">
    7 exported components
  </Card>

  <Card title="Checkpoint" icon="box" href="/ui/ai/checkpoint">
    3 exported components
  </Card>

  <Card title="Code block" icon="box" href="/ui/ai/code-block">
    4 exported components
  </Card>

  <Card title="Context" icon="box" href="/ui/ai/context">
    8 exported components
  </Card>

  <Card title="Conversation" icon="box" href="/ui/ai/conversation">
    3 exported components
  </Card>

  <Card title="Message" icon="box" href="/ui/ai/message">
    11 exported components
  </Card>

  <Card title="Pharen thinking" icon="box" href="/ui/ai/pharen-thinking">
    1 exported component
  </Card>

  <Card title="Plan" icon="box" href="/ui/ai/plan">
    2 exported components
  </Card>

  <Card title="Reasoning" icon="box" href="/ui/ai/reasoning">
    1 exported component
  </Card>

  <Card title="Shimmer" icon="box" href="/ui/ai/shimmer">
    1 exported component
  </Card>

  <Card title="Suggestion" icon="box" href="/ui/ai/suggestion">
    2 exported components
  </Card>

  <Card title="Thinking label" icon="box" href="/ui/ai/thinking-label">
    1 exported component
  </Card>

  <Card title="Tool" icon="box" href="/ui/ai/tool">
    3 exported components
  </Card>
</CardGroup>


# Accordion
Source: https://docs.pharen.app/ui/components/accordion

Import and use the Accordion components from @pharen/ui.

Use **Accordion** to show contextual content or user feedback. This page covers every Vue component exported by the public module.

<PharenUiPreview name="accordion" title="Accordion preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@pharen/ui';
  </script>

  <template>
    <Accordion type="single" collapsible>
      <AccordionItem value="billing">
        <AccordionTrigger>How does billing work?</AccordionTrigger>
        <AccordionContent>Plans are billed per workspace.</AccordionContent>
      </AccordionItem>
    </Accordion>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Accordion`        | Exported Vue component from this module. |
| `AccordionContent` | Contains the visible content.            |
| `AccordionItem`    | Represents one item.                     |
| `AccordionTrigger` | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/accordion)


# AI model select
Source: https://docs.pharen.app/ui/components/ai-model-select

Import and use the AI model select components from @pharen/ui.

Use **AI model select** to choose an AI model with model-specific metadata. This page covers every Vue component exported by the public module.

<PharenUiPreview name="ai-model-select" title="AI model select preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { AiModelSelect } from '@pharen/ui';

  const model = ref('gpt-5.4');
  const models = [
    { id: 'gpt-5.4', name: 'GPT-5.4', provider: 'OpenAI', icon: 'simple-icons:openai', supportsThinking: true },
    { id: 'claude-opus', name: 'Claude Opus', provider: 'Anthropic', icon: 'simple-icons:anthropic', supportsThinking: true },
    { id: 'gemini-pro', name: 'Gemini Pro', provider: 'Google', icon: 'simple-icons:googlegemini' },
  ];
  </script>

  <template>
    <AiModelSelect v-model="model" :models="models" class="w-full max-w-sm" show-thinking-toggle />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { AiModelSelect, AiModelIcon, AiModelSelectItem } from '@pharen/ui';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `AiModelSelect`     | Exported Vue component from this module. |
| `AiModelIcon`       | Exported Vue component from this module. |
| `AiModelSelectItem` | Represents one item.                     |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai-model-select)


# Alert
Source: https://docs.pharen.app/ui/components/alert

Import and use the Alert components from @pharen/ui.

Use **Alert** to communicate an important inline message. This page covers every Vue component exported by the public module.

<PharenUiPreview name="alert" title="Alert preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Alert, AlertDescription, AlertTitle } from '@pharen/ui';
  </script>

  <template>
    <Alert>
      <AlertTitle>Changes saved</AlertTitle>
      <AlertDescription>Your workspace settings are up to date.</AlertDescription>
    </Alert>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Alert, AlertAction, AlertContent, AlertDescription, AlertIcon, AlertTitle, AlertToolbar } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Alert`            | Exported Vue component from this module. |
| `AlertAction`      | Exported Vue component from this module. |
| `AlertContent`     | Contains the visible content.            |
| `AlertDescription` | Renders supporting description.          |
| `AlertIcon`        | Exported Vue component from this module. |
| `AlertTitle`       | Renders the accessible title.            |
| `AlertToolbar`     | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/alert)


# Alert dialog
Source: https://docs.pharen.app/ui/components/alert-dialog

Import and use the Alert dialog components from @pharen/ui.

Use **Alert dialog** to confirm a consequential action. This page covers every Vue component exported by the public module.

<PharenUiPreview name="alert-dialog" title="Alert dialog preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, Button } from '@pharen/ui';
  </script>

  <template>
    <AlertDialog>
      <AlertDialogTrigger as-child><Button variant="outline">Delete workflow</Button></AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this workflow?</AlertDialogTitle>
          <AlertDialogDescription>This action cannot be undone. Existing run history will be removed.</AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Delete workflow</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger } from '@pharen/ui';
```

## Exports

| Export                   | Purpose                                  |
| ------------------------ | ---------------------------------------- |
| `AlertDialog`            | Exported Vue component from this module. |
| `AlertDialogAction`      | Exported Vue component from this module. |
| `AlertDialogCancel`      | Exported Vue component from this module. |
| `AlertDialogContent`     | Contains the visible content.            |
| `AlertDialogDescription` | Renders supporting description.          |
| `AlertDialogFooter`      | Structures the footer region.            |
| `AlertDialogHeader`      | Structures the header region.            |
| `AlertDialogMedia`       | Exported Vue component from this module. |
| `AlertDialogOverlay`     | Exported Vue component from this module. |
| `AlertDialogPortal`      | Exported Vue component from this module. |
| `AlertDialogTitle`       | Renders the accessible title.            |
| `AlertDialogTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/alert-dialog)


# Aspect ratio
Source: https://docs.pharen.app/ui/components/aspect-ratio

Import and use the Aspect ratio components from @pharen/ui.

Use **Aspect ratio** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="aspect-ratio" title="Aspect ratio preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { AspectRatio } from '@pharen/ui';
  </script>

  <template>
    <AspectRatio :ratio="16 / 9" class="w-full max-w-md overflow-hidden rounded-xl bg-muted">
      <div class="grid size-full place-items-center bg-primary/10 text-sm font-medium text-primary">
        16:9 preview
      </div>
    </AspectRatio>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { AspectRatio } from '@pharen/ui';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `AspectRatio` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/aspect-ratio)


# Autocomplete
Source: https://docs.pharen.app/ui/components/autocomplete

Import and use the Autocomplete components from @pharen/ui.

Use **Autocomplete** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="autocomplete" title="Autocomplete preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { Autocomplete, AutocompleteContent, AutocompleteEmpty, AutocompleteInput, AutocompleteItem, AutocompleteList } from '@pharen/ui';

  const people = ['Ada Lovelace', 'Grace Hopper', 'Linus Torvalds', 'Margaret Hamilton'];
  const person = ref('');
  </script>

  <template>
    <Autocomplete v-model="person" :default-open="true">
      <AutocompleteInput placeholder="Search people…" show-clear show-trigger />
      <AutocompleteContent :portal="false">
        <AutocompleteList>
          <AutocompleteEmpty>No people found.</AutocompleteEmpty>
          <AutocompleteItem v-for="item in people" :key="item" :value="item">{{ item }}</AutocompleteItem>
        </AutocompleteList>
      </AutocompleteContent>
    </Autocomplete>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Autocomplete, AutocompleteClear, AutocompleteContent, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompleteSeparator, AutocompleteTrigger, AutocompleteArrow, AutocompleteBackdrop, AutocompleteCollection, AutocompleteItemIndicator, AutocompletePortal, AutocompletePositioner, AutocompleteRow, AutocompleteStatus, AutocompleteValue } from '@pharen/ui';
```

## Exports

| Export                      | Purpose                                  |
| --------------------------- | ---------------------------------------- |
| `Autocomplete`              | Exported Vue component from this module. |
| `AutocompleteClear`         | Exported Vue component from this module. |
| `AutocompleteContent`       | Contains the visible content.            |
| `AutocompleteEmpty`         | Exported Vue component from this module. |
| `AutocompleteGroup`         | Groups related items.                    |
| `AutocompleteGroupLabel`    | Labels a value or region.                |
| `AutocompleteInput`         | Exported Vue component from this module. |
| `AutocompleteItem`          | Represents one item.                     |
| `AutocompleteList`          | Exported Vue component from this module. |
| `AutocompleteSeparator`     | Separates adjacent regions.              |
| `AutocompleteTrigger`       | Opens or activates the component.        |
| `AutocompleteArrow`         | Exported Vue component from this module. |
| `AutocompleteBackdrop`      | Exported Vue component from this module. |
| `AutocompleteCollection`    | Exported Vue component from this module. |
| `AutocompleteItemIndicator` | Exported Vue component from this module. |
| `AutocompletePortal`        | Exported Vue component from this module. |
| `AutocompletePositioner`    | Exported Vue component from this module. |
| `AutocompleteRow`           | Exported Vue component from this module. |
| `AutocompleteStatus`        | Exported Vue component from this module. |
| `AutocompleteValue`         | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/autocomplete)


# Avatar
Source: https://docs.pharen.app/ui/components/avatar

Import and use the Avatar components from @pharen/ui.

Use **Avatar** to represent a person, team, or agent. This page covers every Vue component exported by the public module.

<PharenUiPreview name="avatar" title="Avatar preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Avatar, AvatarFallback, AvatarImage } from '@pharen/ui';
  </script>

  <template>
    <Avatar>
      <AvatarImage src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='32' fill='%2318181B'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial' font-size='22' fill='white'%3EJK%3C/text%3E%3C/svg%3E" alt="Johannes Kanthak" />
      <AvatarFallback>JK</AvatarFallback>
    </Avatar>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Avatar, AvatarBadge, AvatarFallback, AvatarImage, AvatarUser } from '@pharen/ui';
```

## Exports

| Export           | Purpose                                  |
| ---------------- | ---------------------------------------- |
| `Avatar`         | Exported Vue component from this module. |
| `AvatarBadge`    | Exported Vue component from this module. |
| `AvatarFallback` | Exported Vue component from this module. |
| `AvatarImage`    | Exported Vue component from this module. |
| `AvatarUser`     | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/avatar)


# Avatar group
Source: https://docs.pharen.app/ui/components/avatar-group

Import and use the Avatar group components from @pharen/ui.

Use **Avatar group** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="avatar-group" title="Avatar group preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { AvatarGroup } from '@pharen/ui';

  const people = [
    { fallback: 'JK', alt: 'Johannes Kanthak' },
    { fallback: 'AM', alt: 'Alex Morgan' },
    { fallback: 'SL', alt: 'Sam Lee' },
    { fallback: 'RK', alt: 'Robin Kim' },
    { fallback: 'TN', alt: 'Taylor Nguyen' },
  ];
  </script>

  <template>
    <AvatarGroup :items="people" :max="4" size="base" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { AvatarGroup, AvatarGroupCount } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `AvatarGroup`      | Groups related items.                    |
| `AvatarGroupCount` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/avatar-group)


# Badge
Source: https://docs.pharen.app/ui/components/badge

Import and use the Badge components from @pharen/ui.

Use **Badge** to show compact status or category metadata. This page covers every Vue component exported by the public module.

<PharenUiPreview name="badge" title="Badge preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Badge } from '@pharen/ui';
  </script>

  <template>
    <Badge variant="secondary">Active</Badge>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Badge, BadgeButton, BadgeDot } from '@pharen/ui';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `Badge`       | Exported Vue component from this module. |
| `BadgeButton` | Exported Vue component from this module. |
| `BadgeDot`    | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/badge)


# Border beam
Source: https://docs.pharen.app/ui/components/border-beam

Import and use the Border beam components from @pharen/ui.

Use **Border beam** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="border-beam" title="Border beam preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { BorderBeam } from '@pharen/ui';
  </script>

  <template>
    <div class="relative w-full max-w-sm overflow-hidden rounded-xl border bg-card p-6 shadow-sm">
      <BorderBeam :duration="7" />
      <p class="text-sm font-semibold">Live workflow</p>
      <p class="mt-1 text-sm text-muted-foreground">The animated beam follows the surface border.</p>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { BorderBeam } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `BorderBeam` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/BorderBeam.vue)


# Breadcrumb
Source: https://docs.pharen.app/ui/components/breadcrumb

Import and use the Breadcrumb components from @pharen/ui.

Use **Breadcrumb** to show the current location in a hierarchy. This page covers every Vue component exported by the public module.

<PharenUiPreview name="breadcrumb" title="Breadcrumb preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@pharen/ui';
  </script>

  <template>
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem><BreadcrumbLink href="/">Home</BreadcrumbLink></BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem><BreadcrumbPage>Settings</BreadcrumbPage></BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `Breadcrumb`          | Exported Vue component from this module. |
| `BreadcrumbEllipsis`  | Exported Vue component from this module. |
| `BreadcrumbItem`      | Represents one item.                     |
| `BreadcrumbLink`      | Exported Vue component from this module. |
| `BreadcrumbList`      | Exported Vue component from this module. |
| `BreadcrumbPage`      | Exported Vue component from this module. |
| `BreadcrumbSeparator` | Separates adjacent regions.              |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/breadcrumb)


# Button
Source: https://docs.pharen.app/ui/components/button

Import and use the Button components from @pharen/ui.

Use **Button** to trigger a user action. This page covers every Vue component exported by the public module.

<PharenUiPreview name="button" title="Button preview" />

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

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

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Button } from '@pharen/ui';
```

## Exports

| Export   | Purpose                                  |
| -------- | ---------------------------------------- |
| `Button` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/button)


# Button group
Source: https://docs.pharen.app/ui/components/button-group

Import and use the Button group components from @pharen/ui.

Use **Button group** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="button-group" title="Button group preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, ButtonGroup, ButtonGroupText } from '@pharen/ui';
  </script>

  <template>
    <ButtonGroup>
      <Button variant="outline">Back</Button>
      <ButtonGroupText>Step 2 of 3</ButtonGroupText>
      <Button>Continue</Button>
    </ButtonGroup>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from '@pharen/ui';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `ButtonGroup`          | Groups related items.                    |
| `ButtonGroupSeparator` | Separates adjacent regions.              |
| `ButtonGroupText`      | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/button-group)


# Calendar
Source: https://docs.pharen.app/ui/components/calendar

Import and use the Calendar components from @pharen/ui.

Use **Calendar** to browse and select calendar dates. This page covers every Vue component exported by the public module.

<PharenUiPreview name="calendar" title="Calendar preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Calendar } from '@pharen/ui';
  </script>

  <template>
    <Calendar />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Calendar, RangeCalendar } from '@pharen/ui';
```

## Exports

| Export          | Purpose                                  |
| --------------- | ---------------------------------------- |
| `Calendar`      | Exported Vue component from this module. |
| `RangeCalendar` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/calendar)


# Card
Source: https://docs.pharen.app/ui/components/card

Import and use the Card components from @pharen/ui.

Use **Card** to group related content and actions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="card" title="Card preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@pharen/ui';
  </script>

  <template>
    <Card>
      <CardHeader>
        <CardTitle>Workspace usage</CardTitle>
        <CardDescription>Usage for the current billing period.</CardDescription>
      </CardHeader>
      <CardContent>42 workflow runs</CardContent>
    </Card>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Card, CardAction, CardHeader, CardContent, CardTable, CardFooter, CardHeading, CardToolbar, CardTitle, CardDescription } from '@pharen/ui';
```

## Exports

| Export            | Purpose                                  |
| ----------------- | ---------------------------------------- |
| `Card`            | Exported Vue component from this module. |
| `CardAction`      | Exported Vue component from this module. |
| `CardHeader`      | Structures the header region.            |
| `CardContent`     | Contains the visible content.            |
| `CardTable`       | Exported Vue component from this module. |
| `CardFooter`      | Structures the footer region.            |
| `CardHeading`     | Exported Vue component from this module. |
| `CardToolbar`     | Exported Vue component from this module. |
| `CardTitle`       | Renders the accessible title.            |
| `CardDescription` | Renders supporting description.          |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/card)


# Carousel
Source: https://docs.pharen.app/ui/components/carousel

Import and use the Carousel components from @pharen/ui.

Use **Carousel** to organize content and responsive regions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="carousel" title="Carousel preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@pharen/ui';
  </script>

  <template>
    <Carousel class="w-full max-w-md px-10">
      <CarouselContent>
        <CarouselItem v-for="item in ['Workflows', 'Agents', 'Knowledge']" :key="item">
          <div class="grid h-32 place-items-center rounded-xl border bg-card text-lg font-semibold shadow-sm">{{ item }}</div>
        </CarouselItem>
      </CarouselContent>
      <CarouselPrevious class="left-0" />
      <CarouselNext class="right-0" />
    </Carousel>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Carousel`         | Exported Vue component from this module. |
| `CarouselContent`  | Contains the visible content.            |
| `CarouselItem`     | Represents one item.                     |
| `CarouselNext`     | Exported Vue component from this module. |
| `CarouselPrevious` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/carousel)


# Chart
Source: https://docs.pharen.app/ui/components/chart

Import and use the Chart components from @pharen/ui.

Use **Chart** to visualize quantitative data. This page covers every Vue component exported by the public module.

<PharenUiPreview name="chart" title="Chart preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ChartDonutBreakdown, type ChartConfig } from '@pharen/ui';

  const data = [
    { key: 'completed', label: 'Completed', value: 68, chartValue: 68, fill: 'var(--primary)', meta: '68 runs' },
    { key: 'running', label: 'Running', value: 21, chartValue: 21, fill: 'var(--info)', meta: '21 runs' },
    { key: 'failed', label: 'Failed', value: 11, chartValue: 11, fill: 'var(--destructive)', meta: '11 runs' },
  ];
  const config: ChartConfig = {
    completed: { label: 'Completed', color: 'var(--primary)' },
    running: { label: 'Running', color: 'var(--info)' },
    failed: { label: 'Failed', color: 'var(--destructive)' },
  };
  </script>

  <template>
    <ChartDonutBreakdown
      title="Workflow runs"
      description="Status distribution for the last 100 runs."
      :data="data"
      :config="config"
      center-eyebrow="Total"
      center-label="Runs"
      center-value="100"
      empty-text="No runs yet"
      :tooltip-template="item => `${item.label}: ${item.value}%`"
      class="w-full max-w-lg"
    />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ChartContainer, ChartDonutBreakdown, ChartLegendContent, ChartStyle, ChartTooltipContent, ChartCrosshair, ChartTooltip, VisDonut, VisAnnotations, VisSingleContainer, VisXYContainer, VisXYLabels, VisLine, VisArea, VisAxis, VisStackedBar, VisGroupedBar, Donut, Line, Area, StackedBar, GroupedBar } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `ChartContainer`      | Exported Vue component from this module. |
| `ChartDonutBreakdown` | Exported Vue component from this module. |
| `ChartLegendContent`  | Contains the visible content.            |
| `ChartStyle`          | Exported Vue component from this module. |
| `ChartTooltipContent` | Contains the visible content.            |
| `ChartCrosshair`      | Exported Vue component from this module. |
| `ChartTooltip`        | Exported Vue component from this module. |
| `VisDonut`            | Exported Vue component from this module. |
| `VisAnnotations`      | Exported Vue component from this module. |
| `VisSingleContainer`  | Exported Vue component from this module. |
| `VisXYContainer`      | Exported Vue component from this module. |
| `VisXYLabels`         | Exported Vue component from this module. |
| `VisLine`             | Exported Vue component from this module. |
| `VisArea`             | Exported Vue component from this module. |
| `VisAxis`             | Exported Vue component from this module. |
| `VisStackedBar`       | Exported Vue component from this module. |
| `VisGroupedBar`       | Exported Vue component from this module. |
| `Donut`               | Exported Vue component from this module. |
| `Line`                | Exported Vue component from this module. |
| `Area`                | Exported Vue component from this module. |
| `StackedBar`          | Exported Vue component from this module. |
| `GroupedBar`          | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/chart)


# Checkbox
Source: https://docs.pharen.app/ui/components/checkbox

Import and use the Checkbox components from @pharen/ui.

Use **Checkbox** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="checkbox" title="Checkbox preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Checkbox, Label } from '@pharen/ui';
  </script>

  <template>
    <div class="flex items-center gap-2">
      <Checkbox id="updates" />
      <Label for="updates">Email me product updates</Label>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Checkbox } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Checkbox` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/checkbox)


# Collapsible
Source: https://docs.pharen.app/ui/components/collapsible

Import and use the Collapsible components from @pharen/ui.

Use **Collapsible** to organize content and responsive regions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="collapsible" title="Collapsible preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '@pharen/ui';
  </script>

  <template>
    <Collapsible :default-open="true" class="w-full max-w-md rounded-xl border bg-card p-4 shadow-sm">
      <CollapsibleTrigger class="flex w-full items-center justify-between text-left text-sm font-semibold">
        Advanced settings <span class="text-muted-foreground">⌄</span>
      </CollapsibleTrigger>
      <CollapsibleContent class="pt-3 text-sm text-muted-foreground">
        Configure retries, execution timeout, and failure notifications.
      </CollapsibleContent>
    </Collapsible>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `Collapsible`        | Exported Vue component from this module. |
| `CollapsibleContent` | Contains the visible content.            |
| `CollapsibleTrigger` | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/collapsible)


# Color picker
Source: https://docs.pharen.app/ui/components/color-picker

Import and use the Color picker components from @pharen/ui.

Use **Color picker** to choose and edit a color value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="color-picker" title="Color picker preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ColorPicker } from '@pharen/ui';
  </script>

  <template>
    <ColorPicker model-value="#18181B" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ColorPicker } from '@pharen/ui';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `ColorPicker` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/color-picker)


# Combobox
Source: https://docs.pharen.app/ui/components/combobox

Import and use the Combobox components from @pharen/ui.

Use **Combobox** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="combobox" title="Combobox preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxViewport } from '@pharen/ui';

  const frameworks = ['Vue', 'Nuxt', 'React', 'Svelte'];
  const framework = ref('');
  </script>

  <template>
    <Combobox v-model="framework" :default-open="true">
      <ComboboxAnchor class="w-full rounded-lg border bg-background">
        <ComboboxInput placeholder="Select framework…" />
      </ComboboxAnchor>
      <ComboboxList class="w-[var(--reka-combobox-trigger-width)]">
        <ComboboxViewport class="p-1">
          <ComboboxEmpty class="p-3 text-center text-sm text-muted-foreground">No framework found.</ComboboxEmpty>
          <ComboboxItem v-for="item in frameworks" :key="item" :value="item">{{ item }}</ComboboxItem>
        </ComboboxViewport>
      </ComboboxList>
    </Combobox>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxSeparator, ComboboxViewport, ComboboxCancel, ComboboxTrigger } from '@pharen/ui';
```

## Exports

| Export                  | Purpose                                  |
| ----------------------- | ---------------------------------------- |
| `Combobox`              | Exported Vue component from this module. |
| `ComboboxAnchor`        | Exported Vue component from this module. |
| `ComboboxEmpty`         | Exported Vue component from this module. |
| `ComboboxGroup`         | Groups related items.                    |
| `ComboboxInput`         | Exported Vue component from this module. |
| `ComboboxItem`          | Represents one item.                     |
| `ComboboxItemIndicator` | Exported Vue component from this module. |
| `ComboboxList`          | Exported Vue component from this module. |
| `ComboboxSeparator`     | Separates adjacent regions.              |
| `ComboboxViewport`      | Exported Vue component from this module. |
| `ComboboxCancel`        | Exported Vue component from this module. |
| `ComboboxTrigger`       | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/combobox)


# Command
Source: https://docs.pharen.app/ui/components/command

Import and use the Command components from @pharen/ui.

Use **Command** to show contextual content or user feedback. This page covers every Vue component exported by the public module.

<PharenUiPreview name="command" title="Command preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandShortcut } from '@pharen/ui';
  </script>

  <template>
    <Command class="w-full max-w-md rounded-xl border shadow-sm">
      <CommandInput placeholder="Search actions..." />
      <CommandList>
        <CommandEmpty>No actions found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem value="workflow">Create workflow<CommandShortcut>⌘N</CommandShortcut></CommandItem>
          <CommandItem value="agent">Open agents<CommandShortcut>⌘A</CommandShortcut></CommandItem>
          <CommandItem value="settings">Workspace settings<CommandShortcut>⌘,</CommandShortcut></CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Command`          | Exported Vue component from this module. |
| `CommandDialog`    | Exported Vue component from this module. |
| `CommandEmpty`     | Exported Vue component from this module. |
| `CommandGroup`     | Groups related items.                    |
| `CommandInput`     | Exported Vue component from this module. |
| `CommandItem`      | Represents one item.                     |
| `CommandList`      | Exported Vue component from this module. |
| `CommandSeparator` | Separates adjacent regions.              |
| `CommandShortcut`  | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/command)


# Context menu
Source: https://docs.pharen.app/ui/components/context-menu

Import and use the Context menu components from @pharen/ui.

Use **Context menu** to show contextual content or user feedback. This page covers every Vue component exported by the public module.

<PharenUiPreview name="context-menu" title="Context menu preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger } from '@pharen/ui';
  </script>

  <template>
    <ContextMenu>
      <ContextMenuTrigger class="grid h-36 w-72 place-items-center rounded-xl border border-dashed bg-muted/30 text-sm text-muted-foreground">
        Right-click this workspace
      </ContextMenuTrigger>
      <ContextMenuContent class="w-52">
        <ContextMenuLabel>Workspace</ContextMenuLabel>
        <ContextMenuSeparator />
        <ContextMenuItem>Rename<ContextMenuShortcut>F2</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuItem>Duplicate<ContextMenuShortcut>⌘D</ContextMenuShortcut></ContextMenuItem>
        <ContextMenuItem class="text-destructive">Delete</ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '@pharen/ui';
```

## Exports

| Export                    | Purpose                                  |
| ------------------------- | ---------------------------------------- |
| `ContextMenu`             | Exported Vue component from this module. |
| `ContextMenuCheckboxItem` | Represents one item.                     |
| `ContextMenuContent`      | Contains the visible content.            |
| `ContextMenuGroup`        | Groups related items.                    |
| `ContextMenuItem`         | Represents one item.                     |
| `ContextMenuLabel`        | Labels a value or region.                |
| `ContextMenuPortal`       | Exported Vue component from this module. |
| `ContextMenuRadioGroup`   | Groups related items.                    |
| `ContextMenuRadioItem`    | Represents one item.                     |
| `ContextMenuSeparator`    | Separates adjacent regions.              |
| `ContextMenuShortcut`     | Exported Vue component from this module. |
| `ContextMenuSub`          | Exported Vue component from this module. |
| `ContextMenuSubContent`   | Contains the visible content.            |
| `ContextMenuSubTrigger`   | Opens or activates the component.        |
| `ContextMenuTrigger`      | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/context-menu)


# Data grid
Source: https://docs.pharen.app/ui/components/data-grid

Import and use the Data grid components from @pharen/ui.

Use **Data grid** to build sortable, filterable, and paginated data tables. This page covers every Vue component exported by the public module.

<PharenUiPreview name="data-grid" title="Data grid preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { DataGrid, DataGridContainer, DataGridTable } from '@pharen/ui';
  import { getCoreRowModel, useVueTable, type ColumnDef } from '@tanstack/vue-table';

  type Member = { name: string; role: string };
  const data: Member[] = [{ name: 'Johannes', role: 'Owner' }];
  const columns: ColumnDef<Member>[] = [
    { accessorKey: 'name', header: 'Member' },
    { accessorKey: 'role', header: 'Role' },
  ];
  const table = useVueTable({ data, columns, getCoreRowModel: getCoreRowModel() });
  </script>

  <template>
    <DataGrid :table="table" :record-count="data.length">
      <DataGridContainer>
        <DataGridTable />
      </DataGridContainer>
    </DataGrid>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DataGrid, DataGridColumnFilter, DataGridColumnHeader, DataGridColumnVisibility, DataGridContainer, DataGridPagination, DataGridScrollArea, DataGridTable, DataGridTableDnd, DataGridTableDndRowHandle, DataGridTableDndRows, DataGridTableVirtual } from '@pharen/ui';
```

## Exports

| Export                      | Purpose                                  |
| --------------------------- | ---------------------------------------- |
| `DataGrid`                  | Exported Vue component from this module. |
| `DataGridColumnFilter`      | Exported Vue component from this module. |
| `DataGridColumnHeader`      | Structures the header region.            |
| `DataGridColumnVisibility`  | Exported Vue component from this module. |
| `DataGridContainer`         | Exported Vue component from this module. |
| `DataGridPagination`        | Exported Vue component from this module. |
| `DataGridScrollArea`        | Exported Vue component from this module. |
| `DataGridTable`             | Exported Vue component from this module. |
| `DataGridTableDnd`          | Exported Vue component from this module. |
| `DataGridTableDndRowHandle` | Exported Vue component from this module. |
| `DataGridTableDndRows`      | Exported Vue component from this module. |
| `DataGridTableVirtual`      | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/data-grid)


# Date picker
Source: https://docs.pharen.app/ui/components/date-picker

Import and use the Date picker components from @pharen/ui.

Use **Date picker** to select a date from a popover calendar. This page covers every Vue component exported by the public module.

<PharenUiPreview name="date-picker" title="Date picker preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { DatePicker } from '@pharen/ui';
  </script>

  <template>
    <DatePicker />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DatePicker } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `DatePicker` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/date-picker)


# Date selector
Source: https://docs.pharen.app/ui/components/date-selector

Import and use the Date selector components from @pharen/ui.

Use **Date selector** to compose structured date selection controls. This page covers every Vue component exported by the public module.

<PharenUiPreview name="date-selector" title="Date selector preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { DateSelector } from '@pharen/ui';
  </script>

  <template>
    <DateSelector />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DateSelector } from '@pharen/ui';
```

## Exports

| Export         | Purpose                                  |
| -------------- | ---------------------------------------- |
| `DateSelector` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/date-selector)


# Detail icon nav
Source: https://docs.pharen.app/ui/components/detail-icon-nav

Import and use the Detail icon nav components from @pharen/ui.

Use **Detail icon nav** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="detail-icon-nav" title="Detail icon nav preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { DetailIconNav } from '@pharen/ui';

  const active = ref('overview');
  const items = [
    { id: 'overview', label: 'Overview', icon: 'lucide:layout-dashboard' },
    { id: 'activity', label: 'Activity', icon: 'lucide:activity', badge: '3' },
    { id: 'settings', label: 'Settings', icon: 'lucide:settings' },
  ];
  </script>

  <template>
    <DetailIconNav :items="items" :active-id="active" @select="active = $event" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DetailIconNav } from '@pharen/ui';
```

## Exports

| Export          | Purpose                                  |
| --------------- | ---------------------------------------- |
| `DetailIconNav` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/detail-icon-nav)


# Dialog
Source: https://docs.pharen.app/ui/components/dialog

Import and use the Dialog components from @pharen/ui.

Use **Dialog** to focus a task in a modal surface. This page covers every Vue component exported by the public module.

<PharenUiPreview name="dialog" title="Dialog preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@pharen/ui';
  </script>

  <template>
    <Dialog>
      <DialogTrigger as-child><Button variant="outline">Open dialog</Button></DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Edit workspace</DialogTitle>
          <DialogDescription>Update the workspace name and details.</DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogScrollContent, DialogTitle, DialogTrigger } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `Dialog`              | Exported Vue component from this module. |
| `DialogClose`         | Exported Vue component from this module. |
| `DialogContent`       | Contains the visible content.            |
| `DialogDescription`   | Renders supporting description.          |
| `DialogFooter`        | Structures the footer region.            |
| `DialogHeader`        | Structures the header region.            |
| `DialogOverlay`       | Exported Vue component from this module. |
| `DialogPortal`        | Exported Vue component from this module. |
| `DialogScrollContent` | Contains the visible content.            |
| `DialogTitle`         | Renders the accessible title.            |
| `DialogTrigger`       | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/dialog)


# Drawer
Source: https://docs.pharen.app/ui/components/drawer

Import and use the Drawer components from @pharen/ui.

Use **Drawer** to present a task in an edge-attached panel. This page covers every Vue component exported by the public module.

<PharenUiPreview name="drawer" title="Drawer preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from '@pharen/ui';
  </script>

  <template>
    <Drawer>
      <DrawerTrigger as-child><Button variant="outline">Open run details</Button></DrawerTrigger>
      <DrawerContent>
        <div class="mx-auto w-full max-w-lg">
          <DrawerHeader>
            <DrawerTitle>Workflow run completed</DrawerTitle>
            <DrawerDescription>12 steps finished successfully in 42 seconds.</DrawerDescription>
          </DrawerHeader>
          <DrawerFooter>
            <Button>View run</Button>
            <DrawerClose as-child><Button variant="outline">Close</Button></DrawerClose>
          </DrawerFooter>
        </div>
      </DrawerContent>
    </Drawer>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from '@pharen/ui';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `Drawer`            | Exported Vue component from this module. |
| `DrawerClose`       | Exported Vue component from this module. |
| `DrawerContent`     | Contains the visible content.            |
| `DrawerDescription` | Renders supporting description.          |
| `DrawerFooter`      | Structures the footer region.            |
| `DrawerHeader`      | Structures the header region.            |
| `DrawerOverlay`     | Exported Vue component from this module. |
| `DrawerPortal`      | Exported Vue component from this module. |
| `DrawerTitle`       | Renders the accessible title.            |
| `DrawerTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/drawer)


# Dropdown menu
Source: https://docs.pharen.app/ui/components/dropdown-menu

Import and use the Dropdown menu components from @pharen/ui.

Use **Dropdown menu** to show contextual content or user feedback. This page covers every Vue component exported by the public module.

<PharenUiPreview name="dropdown-menu" title="Dropdown menu preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from '@pharen/ui';
  </script>

  <template>
    <DropdownMenu>
      <DropdownMenuTrigger as-child><Button variant="outline">Workspace actions</Button></DropdownMenuTrigger>
      <DropdownMenuContent class="w-56">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem>Open settings<DropdownMenuShortcut>⌘,</DropdownMenuShortcut></DropdownMenuItem>
        <DropdownMenuItem>Invite members<DropdownMenuShortcut>⌘I</DropdownMenuShortcut></DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem class="text-destructive">Leave workspace</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DropdownMenuPortal } from '@pharen/ui';
```

## Exports

| Export                     | Purpose                                  |
| -------------------------- | ---------------------------------------- |
| `DropdownMenu`             | Exported Vue component from this module. |
| `DropdownMenuCheckboxItem` | Represents one item.                     |
| `DropdownMenuContent`      | Contains the visible content.            |
| `DropdownMenuGroup`        | Groups related items.                    |
| `DropdownMenuItem`         | Represents one item.                     |
| `DropdownMenuLabel`        | Labels a value or region.                |
| `DropdownMenuRadioGroup`   | Groups related items.                    |
| `DropdownMenuRadioItem`    | Represents one item.                     |
| `DropdownMenuSeparator`    | Separates adjacent regions.              |
| `DropdownMenuShortcut`     | Exported Vue component from this module. |
| `DropdownMenuSub`          | Exported Vue component from this module. |
| `DropdownMenuSubContent`   | Contains the visible content.            |
| `DropdownMenuSubTrigger`   | Opens or activates the component.        |
| `DropdownMenuTrigger`      | Opens or activates the component.        |
| `DropdownMenuPortal`       | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/dropdown-menu)


# Dropfile
Source: https://docs.pharen.app/ui/components/dropfile

Import and use the Dropfile components from @pharen/ui.

Use **Dropfile** to accept files through a drag-and-drop surface. This page covers every Vue component exported by the public module.

<PharenUiPreview name="dropfile" title="Dropfile preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { DropFile } from '@pharen/ui';
  </script>

  <template>
    <DropFile
      accept="image/png,image/jpeg"
      :max-size="5 * 1024 * 1024"
      label="Drop screenshots here or choose files"
      description="PNG or JPG up to 5 MB"
    />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { DropFile } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `DropFile` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/dropfile)


# Empty
Source: https://docs.pharen.app/ui/components/empty

Import and use the Empty components from @pharen/ui.

Use **Empty** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="empty" title="Empty preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyTitle } from '@pharen/ui';
  </script>

  <template>
    <Empty class="w-full max-w-md border">
      <EmptyHeader>
        <EmptyTitle>No workflows yet</EmptyTitle>
        <EmptyDescription>Create a workflow to automate your first process.</EmptyDescription>
      </EmptyHeader>
      <EmptyContent><Button size="sm">Create workflow</Button></EmptyContent>
    </Empty>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Empty`            | Exported Vue component from this module. |
| `EmptyContent`     | Contains the visible content.            |
| `EmptyDescription` | Renders supporting description.          |
| `EmptyHeader`      | Structures the header region.            |
| `EmptyMedia`       | Exported Vue component from this module. |
| `EmptyTitle`       | Renders the accessible title.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/empty)


# Empty state
Source: https://docs.pharen.app/ui/components/empty-state

Import and use the Empty state components from @pharen/ui.

Use **Empty state** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="empty-state" title="Empty state preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { EmptyState } from '@pharen/ui';
  </script>

  <template>
    <EmptyState
      title="No results found"
      description="Try another search term or clear the filters."
      :icons="['lucide:search', 'lucide:filter', 'lucide:files']"
    />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { EmptyState } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `EmptyState` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/EmptyState.vue)


# Event calendar
Source: https://docs.pharen.app/ui/components/event-calendar

Import and use the Event calendar components from @pharen/ui.

Use **Event calendar** to display and manage scheduled events. This page covers every Vue component exported by the public module.

<PharenUiPreview name="event-calendar" title="Event calendar preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { EventCalendar, EventCalendarContent, EventCalendarNav } from '@pharen/ui';
  const events = [{
    id: 'kickoff',
    title: 'Project kickoff',
    start: new Date(2026, 7, 12, 10),
    end: new Date(2026, 7, 12, 11),
  }];
  </script>

  <template>
    <EventCalendar :events="events" default-view="month">
      <EventCalendarNav />
      <EventCalendarContent />
    </EventCalendar>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { EventCalendar, EventCalendarAgendaView, EventCalendarContent, EventCalendarDatePicker, EventCalendarDayView, EventCalendarDaysView, EventCalendarEvent, EventCalendarMonthView, EventCalendarMoreIndicator, EventCalendarNav, EventCalendarNavNext, EventCalendarNavPrev, EventCalendarNavToday, EventCalendarNowIndicator, EventCalendarResourceView, EventCalendarTimeGrid, EventCalendarTimeGutter, EventCalendarTitle, EventCalendarToolbar, EventCalendarViewSwitcher, EventCalendarWeekView, EventCalendarContext, EventCalendarViewConfigContext, EventCalendarViewContext, EventCalendarRecurrenceError } from '@pharen/ui';
```

## Exports

| Export                           | Purpose                                  |
| -------------------------------- | ---------------------------------------- |
| `EventCalendar`                  | Exported Vue component from this module. |
| `EventCalendarAgendaView`        | Exported Vue component from this module. |
| `EventCalendarContent`           | Contains the visible content.            |
| `EventCalendarDatePicker`        | Exported Vue component from this module. |
| `EventCalendarDayView`           | Exported Vue component from this module. |
| `EventCalendarDaysView`          | Exported Vue component from this module. |
| `EventCalendarEvent`             | Exported Vue component from this module. |
| `EventCalendarMonthView`         | Exported Vue component from this module. |
| `EventCalendarMoreIndicator`     | Exported Vue component from this module. |
| `EventCalendarNav`               | Exported Vue component from this module. |
| `EventCalendarNavNext`           | Exported Vue component from this module. |
| `EventCalendarNavPrev`           | Exported Vue component from this module. |
| `EventCalendarNavToday`          | Exported Vue component from this module. |
| `EventCalendarNowIndicator`      | Exported Vue component from this module. |
| `EventCalendarResourceView`      | Exported Vue component from this module. |
| `EventCalendarTimeGrid`          | Exported Vue component from this module. |
| `EventCalendarTimeGutter`        | Exported Vue component from this module. |
| `EventCalendarTitle`             | Renders the accessible title.            |
| `EventCalendarToolbar`           | Exported Vue component from this module. |
| `EventCalendarViewSwitcher`      | Exported Vue component from this module. |
| `EventCalendarWeekView`          | Exported Vue component from this module. |
| `EventCalendarContext`           | Exported Vue component from this module. |
| `EventCalendarViewConfigContext` | Exported Vue component from this module. |
| `EventCalendarViewContext`       | Exported Vue component from this module. |
| `EventCalendarRecurrenceError`   | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/event-calendar)


# Field
Source: https://docs.pharen.app/ui/components/field

Import and use the Field components from @pharen/ui.

Use **Field** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="field" title="Field preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Field, FieldDescription, FieldLabel, Input } from '@pharen/ui';
  </script>

  <template>
    <Field class="w-full max-w-sm">
      <FieldLabel for="workspace-name">Workspace name</FieldLabel>
      <Input id="workspace-name" value="Pharen" />
      <FieldDescription>This name is visible to every workspace member.</FieldDescription>
    </Field>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Field`            | Exported Vue component from this module. |
| `FieldContent`     | Contains the visible content.            |
| `FieldDescription` | Renders supporting description.          |
| `FieldError`       | Exported Vue component from this module. |
| `FieldGroup`       | Groups related items.                    |
| `FieldLabel`       | Labels a value or region.                |
| `FieldLegend`      | Exported Vue component from this module. |
| `FieldSeparator`   | Separates adjacent regions.              |
| `FieldSet`         | Exported Vue component from this module. |
| `FieldTitle`       | Renders the accessible title.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/field)


# File upload
Source: https://docs.pharen.app/ui/components/file-upload

Import and use the File upload components from @pharen/ui.

Use **File upload** to select files through an accessible upload control. This page covers every Vue component exported by the public module.

<PharenUiPreview name="file-upload" title="File upload preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { FileUpload } from '@pharen/ui';
  </script>

  <template>
    <FileUpload />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { FileUpload } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `FileUpload` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/file-upload)


# Filters
Source: https://docs.pharen.app/ui/components/filters

Import and use the Filters components from @pharen/ui.

Use **Filters** to build composable filtering controls. This page covers every Vue component exported by the public module.

<PharenUiPreview name="filters" title="Filters preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Filters } from '@pharen/ui';
  import { ref } from 'vue';
  import type { Filter, FilterFieldConfig } from '@pharen/ui';

  const filters = ref<Filter[]>([]);
  const fields: FilterFieldConfig[] = [
    { id: 'status', label: 'Status', type: 'select', options: [
      { label: 'Active', value: 'active' },
      { label: 'Paused', value: 'paused' },
    ] },
  ];
  </script>

  <template>
    <Filters v-model="filters" :fields="fields" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Filters, FilterInput, FilterValueSelector } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `Filters`             | Exported Vue component from this module. |
| `FilterInput`         | Exported Vue component from this module. |
| `FilterValueSelector` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/filters)


# Form
Source: https://docs.pharen.app/ui/components/form

Import and use the Form components from @pharen/ui.

Use **Form** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="form" title="Form preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Input } from '@pharen/ui';
  </script>

  <template>
    <Form class="w-full max-w-sm">
      <FormField v-slot="{ componentField }" name="email">
        <FormItem>
          <FormLabel>Email address</FormLabel>
          <FormControl><Input type="email" placeholder="you@company.com" v-bind="componentField" /></FormControl>
          <FormDescription>We use this address for account notifications.</FormDescription>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { FormControl, FormDescription, FormItem, FormLabel, FormMessage, Form, FormField } from '@pharen/ui';
```

## Exports

| Export            | Purpose                                  |
| ----------------- | ---------------------------------------- |
| `FormControl`     | Exported Vue component from this module. |
| `FormDescription` | Renders supporting description.          |
| `FormItem`        | Represents one item.                     |
| `FormLabel`       | Labels a value or region.                |
| `FormMessage`     | Exported Vue component from this module. |
| `Form`            | Exported Vue component from this module. |
| `FormField`       | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/form)


# Frame
Source: https://docs.pharen.app/ui/components/frame

Import and use the Frame components from @pharen/ui.

Use **Frame** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="frame" title="Frame preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from '@pharen/ui';
  </script>

  <template>
    <Frame class="w-full max-w-md">
      <FrameHeader>
        <FrameTitle>Agent activity</FrameTitle>
        <FrameDescription>Latest run for the research agent.</FrameDescription>
      </FrameHeader>
      <FramePanel>
        <div class="flex items-center justify-between text-sm">
          <span>Processed documents</span><strong>24</strong>
        </div>
      </FramePanel>
      <FrameFooter><span class="text-xs text-muted-foreground">Updated just now</span></FrameFooter>
    </Frame>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Frame`            | Exported Vue component from this module. |
| `FrameDescription` | Renders supporting description.          |
| `FrameFooter`      | Structures the footer region.            |
| `FrameHeader`      | Structures the header region.            |
| `FramePanel`       | Exported Vue component from this module. |
| `FrameTitle`       | Renders the accessible title.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/frame)


# Gantt
Source: https://docs.pharen.app/ui/components/gantt

Import and use the Gantt components from @pharen/ui.

Use **Gantt** to visualize work across a project timeline. This page covers every Vue component exported by the public module.

<PharenUiPreview name="gantt" title="Gantt preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { GanttFeatureItem, GanttFeatureList, GanttFeatureListGroup, GanttHeader, GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarItem, GanttTimeline, GanttToday } from '@pharen/ui';

  const group = { id: 'launch', name: 'Product launch' };
  const status = { id: 'active', name: 'Active', color: 'var(--primary)' };
  const features = [
    { id: 'research', name: 'Research', startAt: new Date(2026, 7, 4), endAt: new Date(2026, 7, 11), status, group, progress: 100 },
    { id: 'design', name: 'Design', startAt: new Date(2026, 7, 9), endAt: new Date(2026, 7, 19), status: { ...status, id: 'design', color: 'var(--info)' }, group, progress: 62 },
    { id: 'release', name: 'Release', startAt: new Date(2026, 7, 20), endAt: new Date(2026, 7, 25), status: { ...status, id: 'release', color: 'var(--warning)' }, group, progress: 15 },
  ];
  </script>

  <template>
    <div class="h-72 w-full overflow-hidden rounded-xl border">
      <GanttProvider range="daily" :zoom="80">
        <GanttSidebar>
          <GanttSidebarGroup name="Product launch">
            <GanttSidebarItem v-for="feature in features" :key="feature.id" :feature="feature" />
          </GanttSidebarGroup>
        </GanttSidebar>
        <GanttTimeline>
          <GanttHeader />
          <GanttFeatureList>
            <GanttFeatureListGroup>
              <GanttFeatureItem v-for="feature in features" :key="feature.id" :feature="feature" />
            </GanttFeatureListGroup>
          </GanttFeatureList>
          <GanttToday />
        </GanttTimeline>
      </GanttProvider>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { GanttProvider, GanttSidebar, GanttSidebarGroup, GanttSidebarItem, GanttTimeline, GanttHeader, GanttFeatureList, GanttFeatureListGroup, GanttFeatureItem, GanttMarker, GanttToday } from '@pharen/ui';
```

## Exports

| Export                  | Purpose                                  |
| ----------------------- | ---------------------------------------- |
| `GanttProvider`         | Exported Vue component from this module. |
| `GanttSidebar`          | Exported Vue component from this module. |
| `GanttSidebarGroup`     | Groups related items.                    |
| `GanttSidebarItem`      | Represents one item.                     |
| `GanttTimeline`         | Exported Vue component from this module. |
| `GanttHeader`           | Structures the header region.            |
| `GanttFeatureList`      | Exported Vue component from this module. |
| `GanttFeatureListGroup` | Groups related items.                    |
| `GanttFeatureItem`      | Represents one item.                     |
| `GanttMarker`           | Exported Vue component from this module. |
| `GanttToday`            | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/gantt)


# Hover card
Source: https://docs.pharen.app/ui/components/hover-card

Import and use the Hover card components from @pharen/ui.

Use **Hover card** to show contextual content or user feedback. This page covers every Vue component exported by the public module.

<PharenUiPreview name="hover-card" title="Hover card preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Avatar, AvatarFallback, Button, HoverCard, HoverCardContent, HoverCardTrigger } from '@pharen/ui';
  </script>

  <template>
    <HoverCard>
      <HoverCardTrigger as-child><Button variant="link">@pharen</Button></HoverCardTrigger>
      <HoverCardContent class="w-72">
        <div class="flex gap-3">
          <Avatar><AvatarFallback>PH</AvatarFallback></Avatar>
          <div class="space-y-1"><p class="text-sm font-semibold">Pharen</p><p class="text-sm text-muted-foreground">AI-native workspace for workflows and agents.</p></div>
        </div>
      </HoverCardContent>
    </HoverCard>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { HoverCard, HoverCardTrigger, HoverCardContent } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `HoverCard`        | Exported Vue component from this module. |
| `HoverCardTrigger` | Opens or activates the component.        |
| `HoverCardContent` | Contains the visible content.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/hover-card)


# Icon stack
Source: https://docs.pharen.app/ui/components/icon-stack

Import and use the Icon stack components from @pharen/ui.

Use **Icon stack** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="icon-stack" title="Icon stack preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Icon } from '@iconify/vue';
  import { IconStack } from '@pharen/ui';
  </script>

  <template>
    <IconStack><Icon icon="lucide:layers-3" class="size-5" /></IconStack>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { IconStack } from '@pharen/ui';
```

## Exports

| Export      | Purpose                                  |
| ----------- | ---------------------------------------- |
| `IconStack` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/icon-stack)


# Icon tile
Source: https://docs.pharen.app/ui/components/icon-tile

Import and use the Icon tile components from @pharen/ui.

Use **Icon tile** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="icon-tile" title="Icon tile preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Icon } from '@iconify/vue';
  import { IconTile } from '@pharen/ui';
  </script>

  <template>
    <div class="flex items-center gap-3">
      <IconTile variant="primary" size="lg"><Icon icon="lucide:sparkles" /></IconTile>
      <div><p class="text-sm font-medium">AI automation</p><p class="text-xs text-muted-foreground">Ready to run</p></div>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { IconTile } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `IconTile` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/icon-tile)


# Components
Source: https://docs.pharen.app/ui/components/index

Browse every publicly exported component module from @pharen/ui.

This reference is generated from the public exports in `@pharen/ui` 0.0.18. Every page includes the import, an example, and all building blocks in the module.

## Forms and input

<CardGroup>
  <Card title="AI model select" icon="box" href="/ui/components/ai-model-select">
    3 exported components
  </Card>

  <Card title="Autocomplete" icon="box" href="/ui/components/autocomplete">
    20 exported components
  </Card>

  <Card title="Calendar" icon="box" href="/ui/components/calendar">
    2 exported components
  </Card>

  <Card title="Checkbox" icon="box" href="/ui/components/checkbox">
    1 exported component
  </Card>

  <Card title="Color picker" icon="box" href="/ui/components/color-picker">
    1 exported component
  </Card>

  <Card title="Combobox" icon="box" href="/ui/components/combobox">
    12 exported components
  </Card>

  <Card title="Date picker" icon="box" href="/ui/components/date-picker">
    1 exported component
  </Card>

  <Card title="Date selector" icon="box" href="/ui/components/date-selector">
    1 exported component
  </Card>

  <Card title="Dropfile" icon="box" href="/ui/components/dropfile">
    1 exported component
  </Card>

  <Card title="Field" icon="box" href="/ui/components/field">
    10 exported components
  </Card>

  <Card title="File upload" icon="box" href="/ui/components/file-upload">
    1 exported component
  </Card>

  <Card title="Form" icon="box" href="/ui/components/form">
    7 exported components
  </Card>

  <Card title="Input" icon="box" href="/ui/components/input">
    1 exported component
  </Card>

  <Card title="Input group" icon="box" href="/ui/components/input-group">
    6 exported components
  </Card>

  <Card title="Input OTP" icon="box" href="/ui/components/input-otp">
    4 exported components
  </Card>

  <Card title="Label" icon="box" href="/ui/components/label">
    1 exported component
  </Card>

  <Card title="Multi select" icon="box" href="/ui/components/multi-select">
    1 exported component
  </Card>

  <Card title="Native select" icon="box" href="/ui/components/native-select">
    3 exported components
  </Card>

  <Card title="Number field" icon="box" href="/ui/components/number-field">
    6 exported components
  </Card>

  <Card title="Phone input" icon="box" href="/ui/components/phone-input">
    1 exported component
  </Card>

  <Card title="Pin input" icon="box" href="/ui/components/pin-input">
    4 exported components
  </Card>

  <Card title="Radio group" icon="box" href="/ui/components/radio-group">
    2 exported components
  </Card>

  <Card title="Rating" icon="box" href="/ui/components/rating">
    1 exported component
  </Card>

  <Card title="Remote select" icon="box" href="/ui/components/remote-select">
    1 exported component
  </Card>

  <Card title="Search input" icon="box" href="/ui/components/search-input">
    1 exported component
  </Card>

  <Card title="Segmented control" icon="box" href="/ui/components/segmented-control">
    1 exported component
  </Card>

  <Card title="Select" icon="box" href="/ui/components/select">
    11 exported components
  </Card>

  <Card title="Slider" icon="box" href="/ui/components/slider">
    1 exported component
  </Card>

  <Card title="Switch" icon="box" href="/ui/components/switch">
    1 exported component
  </Card>

  <Card title="Textarea" icon="box" href="/ui/components/textarea">
    1 exported component
  </Card>

  <Card title="Toggle" icon="box" href="/ui/components/toggle">
    1 exported component
  </Card>

  <Card title="Toggle group" icon="box" href="/ui/components/toggle-group">
    2 exported components
  </Card>
</CardGroup>

## Actions and navigation

<CardGroup>
  <Card title="Breadcrumb" icon="box" href="/ui/components/breadcrumb">
    7 exported components
  </Card>

  <Card title="Button" icon="box" href="/ui/components/button">
    1 exported component
  </Card>

  <Card title="Button group" icon="box" href="/ui/components/button-group">
    3 exported components
  </Card>

  <Card title="Detail icon nav" icon="box" href="/ui/components/detail-icon-nav">
    1 exported component
  </Card>

  <Card title="Menubar" icon="box" href="/ui/components/menubar">
    16 exported components
  </Card>

  <Card title="Navigation menu" icon="box" href="/ui/components/navigation-menu">
    8 exported components
  </Card>

  <Card title="Pagination" icon="box" href="/ui/components/pagination">
    9 exported components
  </Card>

  <Card title="Scrollspy" icon="box" href="/ui/components/scrollspy">
    1 exported component
  </Card>

  <Card title="Sidebar" icon="box" href="/ui/components/sidebar">
    23 exported components
  </Card>

  <Card title="Stepper" icon="box" href="/ui/components/stepper">
    10 exported components
  </Card>

  <Card title="Tabs" icon="box" href="/ui/components/tabs">
    4 exported components
  </Card>

  <Card title="Tree" icon="box" href="/ui/components/tree">
    4 exported components
  </Card>
</CardGroup>

## Data display

<CardGroup>
  <Card title="Aspect ratio" icon="box" href="/ui/components/aspect-ratio">
    1 exported component
  </Card>

  <Card title="Avatar" icon="box" href="/ui/components/avatar">
    5 exported components
  </Card>

  <Card title="Avatar group" icon="box" href="/ui/components/avatar-group">
    2 exported components
  </Card>

  <Card title="Badge" icon="box" href="/ui/components/badge">
    3 exported components
  </Card>

  <Card title="Border beam" icon="box" href="/ui/components/border-beam">
    1 exported component
  </Card>

  <Card title="Card" icon="box" href="/ui/components/card">
    10 exported components
  </Card>

  <Card title="Chart" icon="box" href="/ui/components/chart">
    22 exported components
  </Card>

  <Card title="Empty" icon="box" href="/ui/components/empty">
    6 exported components
  </Card>

  <Card title="Empty state" icon="box" href="/ui/components/empty-state">
    1 exported component
  </Card>

  <Card title="Frame" icon="box" href="/ui/components/frame">
    6 exported components
  </Card>

  <Card title="Icon stack" icon="box" href="/ui/components/icon-stack">
    1 exported component
  </Card>

  <Card title="Icon tile" icon="box" href="/ui/components/icon-tile">
    1 exported component
  </Card>

  <Card title="Item" icon="box" href="/ui/components/item">
    10 exported components
  </Card>

  <Card title="Kbd" icon="box" href="/ui/components/kbd">
    2 exported components
  </Card>

  <Card title="Live waveform" icon="box" href="/ui/components/live-waveform">
    1 exported component
  </Card>

  <Card title="Plan" icon="box" href="/ui/components/plan">
    8 exported components
  </Card>

  <Card title="Progress" icon="box" href="/ui/components/progress">
    1 exported component
  </Card>

  <Card title="Separator" icon="box" href="/ui/components/separator">
    1 exported component
  </Card>

  <Card title="Skeleton" icon="box" href="/ui/components/skeleton">
    1 exported component
  </Card>

  <Card title="Spinner" icon="box" href="/ui/components/spinner">
    1 exported component
  </Card>

  <Card title="Stat card" icon="box" href="/ui/components/stat-card">
    1 exported component
  </Card>

  <Card title="Table" icon="box" href="/ui/components/table">
    8 exported components
  </Card>

  <Card title="Timeline" icon="box" href="/ui/components/timeline">
    8 exported components
  </Card>
</CardGroup>

## Layout

<CardGroup>
  <Card title="Carousel" icon="box" href="/ui/components/carousel">
    5 exported components
  </Card>

  <Card title="Collapsible" icon="box" href="/ui/components/collapsible">
    3 exported components
  </Card>

  <Card title="Resizable" icon="box" href="/ui/components/resizable">
    3 exported components
  </Card>

  <Card title="Scroll area" icon="box" href="/ui/components/scroll-area">
    2 exported components
  </Card>
</CardGroup>

## Overlays and feedback

<CardGroup>
  <Card title="Accordion" icon="box" href="/ui/components/accordion">
    4 exported components
  </Card>

  <Card title="Alert" icon="box" href="/ui/components/alert">
    7 exported components
  </Card>

  <Card title="Alert dialog" icon="box" href="/ui/components/alert-dialog">
    12 exported components
  </Card>

  <Card title="Command" icon="box" href="/ui/components/command">
    9 exported components
  </Card>

  <Card title="Context menu" icon="box" href="/ui/components/context-menu">
    15 exported components
  </Card>

  <Card title="Dialog" icon="box" href="/ui/components/dialog">
    11 exported components
  </Card>

  <Card title="Drawer" icon="box" href="/ui/components/drawer">
    10 exported components
  </Card>

  <Card title="Dropdown menu" icon="box" href="/ui/components/dropdown-menu">
    15 exported components
  </Card>

  <Card title="Hover card" icon="box" href="/ui/components/hover-card">
    3 exported components
  </Card>

  <Card title="Popover" icon="box" href="/ui/components/popover">
    7 exported components
  </Card>

  <Card title="Sheet" icon="box" href="/ui/components/sheet">
    8 exported components
  </Card>

  <Card title="Sonner" icon="box" href="/ui/components/sonner">
    2 exported components
  </Card>

  <Card title="Tooltip" icon="box" href="/ui/components/tooltip">
    4 exported components
  </Card>
</CardGroup>

## Data and planning

<CardGroup>
  <Card title="Data grid" icon="box" href="/ui/components/data-grid">
    12 exported components
  </Card>

  <Card title="Event calendar" icon="box" href="/ui/components/event-calendar">
    25 exported components
  </Card>

  <Card title="Filters" icon="box" href="/ui/components/filters">
    3 exported components
  </Card>

  <Card title="Gantt" icon="box" href="/ui/components/gantt">
    11 exported components
  </Card>

  <Card title="Kanban" icon="box" href="/ui/components/kanban">
    12 exported components
  </Card>

  <Card title="Sortable" icon="box" href="/ui/components/sortable">
    4 exported components
  </Card>
</CardGroup>


# Input
Source: https://docs.pharen.app/ui/components/input

Import and use the Input components from @pharen/ui.

Use **Input** to collect a short text value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="input" title="Input preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Input } from '@pharen/ui';
  </script>

  <template>
    <Input type="email" placeholder="you@company.com" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Input } from '@pharen/ui';
```

## Exports

| Export  | Purpose                                  |
| ------- | ---------------------------------------- |
| `Input` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/input)


# Input group
Source: https://docs.pharen.app/ui/components/input-group

Import and use the Input group components from @pharen/ui.

Use **Input group** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="input-group" title="Input group preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText } from '@pharen/ui';
  </script>

  <template>
    <InputGroup class="w-full max-w-md">
      <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
      <InputGroupInput value="pharen.app/workflows" aria-label="Workspace URL" />
      <InputGroupAddon align="inline-end"><InputGroupButton>Copy</InputGroupButton></InputGroupAddon>
    </InputGroup>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `InputGroup`         | Groups related items.                    |
| `InputGroupAddon`    | Exported Vue component from this module. |
| `InputGroupButton`   | Exported Vue component from this module. |
| `InputGroupInput`    | Exported Vue component from this module. |
| `InputGroupText`     | Exported Vue component from this module. |
| `InputGroupTextarea` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/input-group)


# Input OTP
Source: https://docs.pharen.app/ui/components/input-otp

Import and use the Input OTP components from @pharen/ui.

Use **Input OTP** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="input-otp" title="Input OTP preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { InputOTP, InputOTPGroup, InputOTPSlot } from '@pharen/ui';

  const code = ref(['4', '2']);
  </script>

  <template>
    <InputOTP v-model="code" :maxlength="6">
      <InputOTPGroup><InputOTPSlot v-for="index in 6" :key="index" :index="index - 1" /></InputOTPGroup>
    </InputOTP>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from '@pharen/ui';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `InputOTP`          | Exported Vue component from this module. |
| `InputOTPGroup`     | Groups related items.                    |
| `InputOTPSeparator` | Separates adjacent regions.              |
| `InputOTPSlot`      | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/input-otp)


# Item
Source: https://docs.pharen.app/ui/components/item

Import and use the Item components from @pharen/ui.

Use **Item** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="item" title="Item preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Badge, Button, Item, ItemActions, ItemContent, ItemDescription, ItemTitle } from '@pharen/ui';
  </script>

  <template>
    <Item variant="outline" class="w-full max-w-md">
      <ItemContent>
        <ItemTitle>Customer onboarding</ItemTitle>
        <ItemDescription>Runs when a new account is created.</ItemDescription>
      </ItemContent>
      <ItemActions><Badge variant="success">Active</Badge><Button size="sm" variant="ghost">Open</Button></ItemActions>
    </Item>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Item, ItemActions, ItemContent, ItemDescription, ItemFooter, ItemGroup, ItemHeader, ItemMedia, ItemSeparator, ItemTitle } from '@pharen/ui';
```

## Exports

| Export            | Purpose                                  |
| ----------------- | ---------------------------------------- |
| `Item`            | Represents one item.                     |
| `ItemActions`     | Exported Vue component from this module. |
| `ItemContent`     | Contains the visible content.            |
| `ItemDescription` | Renders supporting description.          |
| `ItemFooter`      | Structures the footer region.            |
| `ItemGroup`       | Groups related items.                    |
| `ItemHeader`      | Structures the header region.            |
| `ItemMedia`       | Exported Vue component from this module. |
| `ItemSeparator`   | Separates adjacent regions.              |
| `ItemTitle`       | Renders the accessible title.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/item)


# Kanban
Source: https://docs.pharen.app/ui/components/kanban

Import and use the Kanban components from @pharen/ui.

Use **Kanban** to organize cards across workflow columns. This page covers every Vue component exported by the public module.

<PharenUiPreview name="kanban" title="Kanban preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Kanban, KanbanBoard, KanbanCard, KanbanColumn, KanbanColumnContent, KanbanHeader, KanbanItem } from '@pharen/ui';

  const columns = {
    todo: [{ id: 'brief', title: 'Write project brief' }, { id: 'research', title: 'Research competitors' }],
    done: [{ id: 'scope', title: 'Confirm scope' }],
  };
  </script>

  <template>
    <Kanban :default-value="columns" :get-item-value="item => item.id" class="w-full">
      <KanbanBoard class="sm:grid-cols-2">
        <KanbanColumn v-for="(_, key) in columns" :key="key" :value="key">
          <KanbanHeader class="capitalize">{{ key }}</KanbanHeader>
          <KanbanColumnContent :value="key" class="rounded-lg bg-muted/50 p-2">
            <template #default="{ item }"><KanbanItem :value="item.id"><KanbanCard>{{ item.title }}</KanbanCard></KanbanItem></template>
          </KanbanColumnContent>
        </KanbanColumn>
      </KanbanBoard>
    </Kanban>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Kanban, KanbanBoard, KanbanCard, KanbanCards, KanbanHeader, KanbanProvider, KanbanColumn, KanbanColumnContent, KanbanColumnHandle, KanbanItem, KanbanItemHandle, KanbanOverlay } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `Kanban`              | Exported Vue component from this module. |
| `KanbanBoard`         | Exported Vue component from this module. |
| `KanbanCard`          | Exported Vue component from this module. |
| `KanbanCards`         | Exported Vue component from this module. |
| `KanbanHeader`        | Structures the header region.            |
| `KanbanProvider`      | Exported Vue component from this module. |
| `KanbanColumn`        | Exported Vue component from this module. |
| `KanbanColumnContent` | Contains the visible content.            |
| `KanbanColumnHandle`  | Exported Vue component from this module. |
| `KanbanItem`          | Represents one item.                     |
| `KanbanItemHandle`    | Exported Vue component from this module. |
| `KanbanOverlay`       | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/kanban)


# Kbd
Source: https://docs.pharen.app/ui/components/kbd

Import and use the Kbd components from @pharen/ui.

Use **Kbd** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="kbd" title="Kbd preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Kbd } from '@pharen/ui';
  </script>

  <template>
    <div class="flex items-center gap-2 text-sm text-muted-foreground">
      Open search <span class="flex gap-1"><Kbd>⌘</Kbd><Kbd>K</Kbd></span>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Kbd, KbdGroup } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Kbd`      | Exported Vue component from this module. |
| `KbdGroup` | Groups related items.                    |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/kbd)


# Label
Source: https://docs.pharen.app/ui/components/label

Import and use the Label components from @pharen/ui.

Use **Label** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="label" title="Label preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Input, Label } from '@pharen/ui';
  </script>

  <template>
    <div class="grid gap-2">
      <Label for="name">Name</Label>
      <Input id="name" />
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Label } from '@pharen/ui';
```

## Exports

| Export  | Purpose                   |
| ------- | ------------------------- |
| `Label` | Labels a value or region. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/Label.vue)


# Live waveform
Source: https://docs.pharen.app/ui/components/live-waveform

Import and use the Live waveform components from @pharen/ui.

Use **Live waveform** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="live-waveform" title="Live waveform preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { LiveWaveform } from '@pharen/ui';
  </script>

  <template>
    <div class="w-full max-w-md rounded-lg border p-4">
      <div class="mb-3 flex items-center justify-between text-sm"><span class="font-medium">Microphone input</span><span class="text-muted-foreground">Waiting</span></div>
      <LiveWaveform label="Microphone input" class="text-primary" />
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { LiveWaveform } from '@pharen/ui';
```

## Exports

| Export         | Purpose                                  |
| -------------- | ---------------------------------------- |
| `LiveWaveform` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/live-waveform)


# Menubar
Source: https://docs.pharen.app/ui/components/menubar

Import and use the Menubar components from @pharen/ui.

Use **Menubar** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="menubar" title="Menubar preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger } from '@pharen/ui';
  </script>

  <template>
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New workflow<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
          <MenubarItem>Duplicate<MenubarShortcut>⇧⌘D</MenubarShortcut></MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Archive</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu><MenubarTrigger>Edit</MenubarTrigger><MenubarContent><MenubarItem>Undo</MenubarItem><MenubarItem>Redo</MenubarItem></MenubarContent></MenubarMenu>
    </Menubar>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `Menubar`             | Exported Vue component from this module. |
| `MenubarCheckboxItem` | Represents one item.                     |
| `MenubarContent`      | Contains the visible content.            |
| `MenubarGroup`        | Groups related items.                    |
| `MenubarItem`         | Represents one item.                     |
| `MenubarLabel`        | Labels a value or region.                |
| `MenubarMenu`         | Exported Vue component from this module. |
| `MenubarPortal`       | Exported Vue component from this module. |
| `MenubarRadioGroup`   | Groups related items.                    |
| `MenubarRadioItem`    | Represents one item.                     |
| `MenubarSeparator`    | Separates adjacent regions.              |
| `MenubarShortcut`     | Exported Vue component from this module. |
| `MenubarSub`          | Exported Vue component from this module. |
| `MenubarSubContent`   | Contains the visible content.            |
| `MenubarSubTrigger`   | Opens or activates the component.        |
| `MenubarTrigger`      | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/menubar)


# Multi select
Source: https://docs.pharen.app/ui/components/multi-select

Import and use the Multi select components from @pharen/ui.

Use **Multi select** to choose several values from one option set. This page covers every Vue component exported by the public module.

<PharenUiPreview name="multi-select" title="Multi select preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { MultiSelect } from '@pharen/ui';

  const selected = ref(['marketing', 'sales']);
  const options = [
    { label: 'Marketing', value: 'marketing' },
    { label: 'Sales', value: 'sales' },
    { label: 'Support', value: 'support' },
  ];
  </script>

  <template><MultiSelect v-model="selected" :options="options" class="w-full max-w-sm" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { MultiSelect } from '@pharen/ui';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `MultiSelect` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/multi-select)


# Native select
Source: https://docs.pharen.app/ui/components/native-select

Import and use the Native select components from @pharen/ui.

Use **Native select** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="native-select" title="Native select preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { NativeSelect, NativeSelectOption } from '@pharen/ui';

  const role = ref('member');
  </script>

  <template>
    <NativeSelect v-model="role" aria-label="Role">
      <NativeSelectOption value="admin">Admin</NativeSelectOption>
      <NativeSelectOption value="member">Member</NativeSelectOption>
      <NativeSelectOption value="viewer">Viewer</NativeSelectOption>
    </NativeSelect>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { NativeSelect, NativeSelectOptGroup, NativeSelectOption } from '@pharen/ui';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `NativeSelect`         | Exported Vue component from this module. |
| `NativeSelectOptGroup` | Groups related items.                    |
| `NativeSelectOption`   | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/native-select)


# Navigation menu
Source: https://docs.pharen.app/ui/components/navigation-menu

Import and use the Navigation menu components from @pharen/ui.

Use **Navigation menu** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="navigation-menu" title="Navigation menu preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger } from '@pharen/ui';
  </script>

  <template>
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent class="p-3">
            <div class="grid w-72 gap-2">
              <NavigationMenuLink href="#hub" class="rounded-md p-2 hover:bg-accent"><strong class="block text-sm">Pharen Hub</strong><span class="text-xs text-muted-foreground">Workflows and agents in one place.</span></NavigationMenuLink>
              <NavigationMenuLink href="#ui" class="rounded-md p-2 hover:bg-accent"><strong class="block text-sm">Pharen UI</strong><span class="text-xs text-muted-foreground">Reusable Vue components.</span></NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem><NavigationMenuLink href="#docs" class="px-4 py-2 text-sm">Docs</NavigationMenuLink></NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport } from '@pharen/ui';
```

## Exports

| Export                    | Purpose                                  |
| ------------------------- | ---------------------------------------- |
| `NavigationMenu`          | Exported Vue component from this module. |
| `NavigationMenuContent`   | Contains the visible content.            |
| `NavigationMenuIndicator` | Exported Vue component from this module. |
| `NavigationMenuItem`      | Represents one item.                     |
| `NavigationMenuLink`      | Exported Vue component from this module. |
| `NavigationMenuList`      | Exported Vue component from this module. |
| `NavigationMenuTrigger`   | Opens or activates the component.        |
| `NavigationMenuViewport`  | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/navigation-menu)


# Number field
Source: https://docs.pharen.app/ui/components/number-field

Import and use the Number field components from @pharen/ui.

Use **Number field** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="number-field" title="Number field preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea } from '@pharen/ui';
  </script>

  <template>
    <NumberField :default-value="12" :min="0" :max="100" class="w-56">
      <NumberFieldScrubArea label="Retry limit" />
      <NumberFieldGroup>
        <NumberFieldDecrement />
        <NumberFieldInput />
        <NumberFieldIncrement />
      </NumberFieldGroup>
    </NumberField>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea } from '@pharen/ui';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `NumberField`          | Exported Vue component from this module. |
| `NumberFieldDecrement` | Exported Vue component from this module. |
| `NumberFieldGroup`     | Groups related items.                    |
| `NumberFieldIncrement` | Exported Vue component from this module. |
| `NumberFieldInput`     | Exported Vue component from this module. |
| `NumberFieldScrubArea` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/number-field)


# Pagination
Source: https://docs.pharen.app/ui/components/pagination

Import and use the Pagination components from @pharen/ui.

Use **Pagination** to navigate through paginated results. This page covers every Vue component exported by the public module.

<PharenUiPreview name="pagination" title="Pagination preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious } from '@pharen/ui';
  </script>

  <template>
    <Pagination v-slot="{ page }" :items-per-page="10" :total="100" :default-page="3">
      <PaginationContent v-slot="{ items }">
        <PaginationPrevious />
        <template v-for="(item, index) in items" :key="index">
          <PaginationItem v-if="item.type === 'page'" :value="item.value" :is-active="item.value === page">{{ item.value }}</PaginationItem>
          <PaginationEllipsis v-else :index="index" />
        </template>
        <PaginationNext />
      </PaginationContent>
    </Pagination>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `Pagination`         | Exported Vue component from this module. |
| `PaginationContent`  | Contains the visible content.            |
| `PaginationEllipsis` | Exported Vue component from this module. |
| `PaginationFirst`    | Exported Vue component from this module. |
| `PaginationItem`     | Represents one item.                     |
| `PaginationLast`     | Exported Vue component from this module. |
| `PaginationLink`     | Exported Vue component from this module. |
| `PaginationNext`     | Exported Vue component from this module. |
| `PaginationPrevious` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/pagination)


# Phone input
Source: https://docs.pharen.app/ui/components/phone-input

Import and use the Phone input components from @pharen/ui.

Use **Phone input** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="phone-input" title="Phone input preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { PhoneInput } from '@pharen/ui';
  </script>

  <template>
    <PhoneInput />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { PhoneInput } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `PhoneInput` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/phone-input)


# Pin input
Source: https://docs.pharen.app/ui/components/pin-input

Import and use the Pin input components from @pharen/ui.

Use **Pin input** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="pin-input" title="Pin input preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { PinInput, PinInputGroup, PinInputSeparator, PinInputSlot } from '@pharen/ui';

  const pin = ref(['1', '5', '8']);
  </script>

  <template>
    <PinInput v-model="pin" :maxlength="6">
      <PinInputGroup><PinInputSlot v-for="index in 3" :key="index" :index="index - 1" /></PinInputGroup>
      <PinInputSeparator />
      <PinInputGroup><PinInputSlot v-for="index in [3, 4, 5]" :key="index" :index="index" /></PinInputGroup>
    </PinInput>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { PinInput, PinInputGroup, PinInputSeparator, PinInputSlot } from '@pharen/ui';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `PinInput`          | Exported Vue component from this module. |
| `PinInputGroup`     | Groups related items.                    |
| `PinInputSeparator` | Separates adjacent regions.              |
| `PinInputSlot`      | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/pin-input)


# Plan
Source: https://docs.pharen.app/ui/components/plan

Import and use the Plan components from @pharen/ui.

Use **Plan** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="plan" title="Plan preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Badge, Plan, PlanAction, PlanContent, PlanDescription, PlanFooter, PlanHeader, PlanTitle, PlanTrigger } from '@pharen/ui';
  </script>

  <template>
    <Plan default-open class="w-full max-w-lg">
      <PlanHeader>
        <div><PlanTitle>Launch workflow</PlanTitle><PlanDescription>Review the execution plan before starting.</PlanDescription></div>
        <PlanAction><Badge variant="secondary">3 steps</Badge><PlanTrigger /></PlanAction>
      </PlanHeader>
      <PlanContent>
        <ol class="grid gap-2 text-sm"><li>1. Load workspace records</li><li>2. Generate the weekly summary</li><li>3. Send the result to Slack</li></ol>
      </PlanContent>
      <PlanFooter>Estimated duration: 45 seconds</PlanFooter>
    </Plan>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Plan, PlanHeader, PlanTitle, PlanDescription, PlanAction, PlanContent, PlanFooter, PlanTrigger } from '@pharen/ui';
```

## Exports

| Export            | Purpose                                  |
| ----------------- | ---------------------------------------- |
| `Plan`            | Exported Vue component from this module. |
| `PlanHeader`      | Structures the header region.            |
| `PlanTitle`       | Renders the accessible title.            |
| `PlanDescription` | Renders supporting description.          |
| `PlanAction`      | Exported Vue component from this module. |
| `PlanContent`     | Contains the visible content.            |
| `PlanFooter`      | Structures the footer region.            |
| `PlanTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/plan)


# Popover
Source: https://docs.pharen.app/ui/components/popover

Import and use the Popover components from @pharen/ui.

Use **Popover** to show contextual interactive content. This page covers every Vue component exported by the public module.

<PharenUiPreview name="popover" title="Popover preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Popover, PopoverContent, PopoverTrigger } from '@pharen/ui';
  </script>

  <template>
    <Popover>
      <PopoverTrigger as-child><Button variant="outline">Open</Button></PopoverTrigger>
      <PopoverContent>Choose a workspace action.</PopoverContent>
    </Popover>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `Popover`            | Exported Vue component from this module. |
| `PopoverAnchor`      | Exported Vue component from this module. |
| `PopoverContent`     | Contains the visible content.            |
| `PopoverDescription` | Renders supporting description.          |
| `PopoverHeader`      | Structures the header region.            |
| `PopoverTitle`       | Renders the accessible title.            |
| `PopoverTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/popover)


# Progress
Source: https://docs.pharen.app/ui/components/progress

Import and use the Progress components from @pharen/ui.

Use **Progress** to communicate completion against a known total. This page covers every Vue component exported by the public module.

<PharenUiPreview name="progress" title="Progress preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Progress } from '@pharen/ui';
  </script>

  <template>
    <div class="w-full max-w-sm space-y-2">
      <div class="flex justify-between text-sm"><span>Workspace setup</span><span class="font-medium">64%</span></div>
      <Progress :model-value="64" />
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Progress } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Progress` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/progress)


# Radio group
Source: https://docs.pharen.app/ui/components/radio-group

Import and use the Radio group components from @pharen/ui.

Use **Radio group** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="radio-group" title="Radio group preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { Label, RadioGroup, RadioGroupItem } from '@pharen/ui';

  const plan = ref('pro');
  </script>

  <template>
    <RadioGroup v-model="plan" class="grid gap-3">
      <div class="flex items-center gap-2"><RadioGroupItem id="starter" value="starter" /><Label for="starter">Starter</Label></div>
      <div class="flex items-center gap-2"><RadioGroupItem id="pro" value="pro" /><Label for="pro">Pro</Label></div>
    </RadioGroup>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { RadioGroup, RadioGroupItem } from '@pharen/ui';
```

## Exports

| Export           | Purpose               |
| ---------------- | --------------------- |
| `RadioGroup`     | Groups related items. |
| `RadioGroupItem` | Represents one item.  |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/radio-group)


# Rating
Source: https://docs.pharen.app/ui/components/rating

Import and use the Rating components from @pharen/ui.

Use **Rating** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="rating" title="Rating preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { Rating } from '@pharen/ui';

  const value = ref(4);
  </script>

  <template><Rating v-model="value" size="lg" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Rating } from '@pharen/ui';
```

## Exports

| Export   | Purpose                                  |
| -------- | ---------------------------------------- |
| `Rating` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/rating)


# Remote select
Source: https://docs.pharen.app/ui/components/remote-select

Import and use the Remote select components from @pharen/ui.

Use **Remote select** to search and choose options loaded from a remote source. This page covers every Vue component exported by the public module.

<PharenUiPreview name="remote-select" title="Remote select preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { RemoteSelect } from '@pharen/ui';

  const value = ref('berlin');
  const fetchOptions = async () => [
    { label: 'Berlin', value: 'berlin' },
    { label: 'Hamburg', value: 'hamburg' },
    { label: 'Munich', value: 'munich' },
  ];
  </script>

  <template><RemoteSelect v-model="value" :fetch-fn="fetchOptions" class="w-full max-w-sm" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { RemoteSelect } from '@pharen/ui';
```

## Exports

| Export         | Purpose                                  |
| -------------- | ---------------------------------------- |
| `RemoteSelect` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/remote-select)


# Resizable
Source: https://docs.pharen.app/ui/components/resizable

Import and use the Resizable components from @pharen/ui.

Use **Resizable** to organize content and responsive regions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="resizable" title="Resizable preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@pharen/ui';
  </script>

  <template>
    <ResizablePanelGroup direction="horizontal" class="h-56 w-full max-w-lg overflow-hidden rounded-xl border">
      <ResizablePanel :default-size="35"><div class="grid size-full place-items-center bg-muted/40 text-sm font-medium">Sidebar</div></ResizablePanel>
      <ResizableHandle with-handle />
      <ResizablePanel :default-size="65"><div class="grid size-full place-items-center text-sm font-medium">Content</div></ResizablePanel>
    </ResizablePanelGroup>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@pharen/ui';
```

## Exports

| Export                | Purpose                                  |
| --------------------- | ---------------------------------------- |
| `ResizableHandle`     | Exported Vue component from this module. |
| `ResizablePanel`      | Exported Vue component from this module. |
| `ResizablePanelGroup` | Groups related items.                    |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/resizable)


# Scroll area
Source: https://docs.pharen.app/ui/components/scroll-area

Import and use the Scroll area components from @pharen/ui.

Use **Scroll area** to organize content and responsive regions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="scroll-area" title="Scroll area preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ScrollArea } from '@pharen/ui';

  const events = ['Workflow created', 'Trigger configured', 'Agent assigned', 'Test run completed', 'Workflow published', 'First run succeeded'];
  </script>

  <template>
    <ScrollArea class="h-40 w-full max-w-sm rounded-lg border">
      <div class="divide-y p-3">
        <div v-for="event in events" :key="event" class="py-2 text-sm">{{ event }}</div>
      </div>
    </ScrollArea>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ScrollArea, ScrollBar } from '@pharen/ui';
```

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `ScrollArea` | Exported Vue component from this module. |
| `ScrollBar`  | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/scroll-area)


# Scrollspy
Source: https://docs.pharen.app/ui/components/scrollspy

Import and use the Scrollspy components from @pharen/ui.

Use **Scrollspy** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="scrollspy" title="Scrollspy preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Scrollspy } from '@pharen/ui';
  </script>

  <template>
    <Scrollspy :history="false" class="flex items-center gap-2 rounded-lg border p-1">
      <a href="#overview" data-scrollspy-anchor="overview" class="rounded-md px-3 py-1.5 text-sm data-[active]:bg-primary data-[active]:text-primary-foreground">Overview</a>
      <a href="#usage" data-scrollspy-anchor="usage" class="rounded-md px-3 py-1.5 text-sm data-[active]:bg-primary data-[active]:text-primary-foreground">Usage</a>
      <a href="#api" data-scrollspy-anchor="api" class="rounded-md px-3 py-1.5 text-sm data-[active]:bg-primary data-[active]:text-primary-foreground">API</a>
    </Scrollspy>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Scrollspy } from '@pharen/ui';
```

## Exports

| Export      | Purpose                                  |
| ----------- | ---------------------------------------- |
| `Scrollspy` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/scrollspy)


# Search input
Source: https://docs.pharen.app/ui/components/search-input

Import and use the Search input components from @pharen/ui.

Use **Search input** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="search-input" title="Search input preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { UiSearchInput } from '@pharen/ui';
  </script>

  <template>
    <UiSearchInput />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { UiSearchInput } from '@pharen/ui';
```

## Exports

| Export          | Purpose                                  |
| --------------- | ---------------------------------------- |
| `UiSearchInput` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/SearchBar.vue)


# Segmented control
Source: https://docs.pharen.app/ui/components/segmented-control

Import and use the Segmented control components from @pharen/ui.

Use **Segmented control** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="segmented-control" title="Segmented control preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { SegmentedControl } from '@pharen/ui';

  const period = ref('month');
  const options = [
    { label: 'Week', value: 'week' },
    { label: 'Month', value: 'month' },
    { label: 'Year', value: 'year' },
  ];
  </script>

  <template><SegmentedControl v-model="period" :options="options" size="md" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { SegmentedControl } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `SegmentedControl` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/segmented-control)


# Select
Source: https://docs.pharen.app/ui/components/select

Import and use the Select components from @pharen/ui.

Use **Select** to let users choose one value from a list. This page covers every Vue component exported by the public module.

<PharenUiPreview name="select" title="Select preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@pharen/ui';
  </script>

  <template>
    <Select>
      <SelectTrigger><SelectValue placeholder="Choose a role" /></SelectTrigger>
      <SelectContent>
        <SelectItem value="admin">Admin</SelectItem>
        <SelectItem value="member">Member</SelectItem>
      </SelectContent>
    </Select>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Select, SelectContent, SelectGroup, SelectItem, SelectItemText, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue } from '@pharen/ui';
```

## Exports

| Export                   | Purpose                                  |
| ------------------------ | ---------------------------------------- |
| `Select`                 | Exported Vue component from this module. |
| `SelectContent`          | Contains the visible content.            |
| `SelectGroup`            | Groups related items.                    |
| `SelectItem`             | Represents one item.                     |
| `SelectItemText`         | Exported Vue component from this module. |
| `SelectLabel`            | Labels a value or region.                |
| `SelectScrollDownButton` | Exported Vue component from this module. |
| `SelectScrollUpButton`   | Exported Vue component from this module. |
| `SelectSeparator`        | Separates adjacent regions.              |
| `SelectTrigger`          | Opens or activates the component.        |
| `SelectValue`            | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/select)


# Separator
Source: https://docs.pharen.app/ui/components/separator

Import and use the Separator components from @pharen/ui.

Use **Separator** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="separator" title="Separator preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Separator } from '@pharen/ui';
  </script>

  <template>
    <Separator />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Separator } from '@pharen/ui';
```

## Exports

| Export      | Purpose                     |
| ----------- | --------------------------- |
| `Separator` | Separates adjacent regions. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/separator)


# Sheet
Source: https://docs.pharen.app/ui/components/sheet

Import and use the Sheet components from @pharen/ui.

Use **Sheet** to present supporting content beside the current view. This page covers every Vue component exported by the public module.

<PharenUiPreview name="sheet" title="Sheet preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from '@pharen/ui';
  </script>

  <template>
    <Sheet>
      <SheetTrigger as-child><Button variant="outline">Open workspace settings</Button></SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Workspace settings</SheetTitle>
          <SheetDescription>Manage the name, visibility, and default permissions.</SheetDescription>
        </SheetHeader>
        <div class="mt-6 rounded-lg border bg-muted/30 p-4 text-sm text-muted-foreground">Settings form content</div>
      </SheetContent>
    </Sheet>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from '@pharen/ui';
```

## Exports

| Export             | Purpose                                  |
| ------------------ | ---------------------------------------- |
| `Sheet`            | Exported Vue component from this module. |
| `SheetClose`       | Exported Vue component from this module. |
| `SheetContent`     | Contains the visible content.            |
| `SheetDescription` | Renders supporting description.          |
| `SheetFooter`      | Structures the footer region.            |
| `SheetHeader`      | Structures the header region.            |
| `SheetTitle`       | Renders the accessible title.            |
| `SheetTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/sheet)


# Sidebar
Source: https://docs.pharen.app/ui/components/sidebar

Import and use the Sidebar components from @pharen/ui.

Use **Sidebar** to build an application sidebar with responsive behavior. This page covers every Vue component exported by the public module.

<PharenUiPreview name="sidebar" title="Sidebar preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInset, SidebarMenu, SidebarMenuButton, SidebarMenuItem, SidebarProvider, SidebarTrigger } from '@pharen/ui';
  </script>

  <template>
    <SidebarProvider class="h-80 min-h-0 overflow-hidden rounded-xl border bg-sidebar">
      <Sidebar collapsible="none" class="w-56 border-r border-sidebar-border">
        <SidebarHeader><span class="px-2 text-sm font-semibold">Pharen</span></SidebarHeader>
        <SidebarContent>
          <SidebarGroup>
            <SidebarGroupLabel>Workspace</SidebarGroupLabel>
            <SidebarGroupContent>
              <SidebarMenu>
                <SidebarMenuItem v-for="item in ['Overview', 'Workflows', 'Agents']" :key="item">
                  <SidebarMenuButton :is-active="item === 'Overview'">{{ item }}</SidebarMenuButton>
                </SidebarMenuItem>
              </SidebarMenu>
            </SidebarGroupContent>
          </SidebarGroup>
        </SidebarContent>
      </Sidebar>
      <SidebarInset class="min-w-0">
        <header class="flex h-12 items-center gap-2 border-b px-4"><SidebarTrigger /><span class="text-sm font-medium">Overview</span></header>
        <main class="grid flex-1 place-items-center p-6 text-sm text-muted-foreground">Workspace content</main>
      </SidebarInset>
    </SidebarProvider>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from '@pharen/ui';
```

## Exports

| Export                 | Purpose                                  |
| ---------------------- | ---------------------------------------- |
| `Sidebar`              | Exported Vue component from this module. |
| `SidebarContent`       | Contains the visible content.            |
| `SidebarFooter`        | Structures the footer region.            |
| `SidebarGroup`         | Groups related items.                    |
| `SidebarGroupAction`   | Exported Vue component from this module. |
| `SidebarGroupContent`  | Contains the visible content.            |
| `SidebarGroupLabel`    | Labels a value or region.                |
| `SidebarHeader`        | Structures the header region.            |
| `SidebarInput`         | Exported Vue component from this module. |
| `SidebarInset`         | Exported Vue component from this module. |
| `SidebarMenu`          | Exported Vue component from this module. |
| `SidebarMenuAction`    | Exported Vue component from this module. |
| `SidebarMenuBadge`     | Exported Vue component from this module. |
| `SidebarMenuButton`    | Exported Vue component from this module. |
| `SidebarMenuItem`      | Represents one item.                     |
| `SidebarMenuSkeleton`  | Exported Vue component from this module. |
| `SidebarMenuSub`       | Exported Vue component from this module. |
| `SidebarMenuSubButton` | Exported Vue component from this module. |
| `SidebarMenuSubItem`   | Represents one item.                     |
| `SidebarProvider`      | Exported Vue component from this module. |
| `SidebarRail`          | Exported Vue component from this module. |
| `SidebarSeparator`     | Separates adjacent regions.              |
| `SidebarTrigger`       | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/sidebar)


# Skeleton
Source: https://docs.pharen.app/ui/components/skeleton

Import and use the Skeleton components from @pharen/ui.

Use **Skeleton** to reserve layout while content loads. This page covers every Vue component exported by the public module.

<PharenUiPreview name="skeleton" title="Skeleton preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Skeleton } from '@pharen/ui';
  </script>

  <template>
    <div class="grid gap-2">
      <Skeleton class="h-4 w-48" />
      <Skeleton class="h-4 w-32" />
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Skeleton } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Skeleton` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/skeleton)


# Slider
Source: https://docs.pharen.app/ui/components/slider

Import and use the Slider components from @pharen/ui.

Use **Slider** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="slider" title="Slider preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Slider } from '@pharen/ui';
  </script>

  <template>
    <Slider :default-value="[40]" :max="100" :step="1" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Slider } from '@pharen/ui';
```

## Exports

| Export   | Purpose                                  |
| -------- | ---------------------------------------- |
| `Slider` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/slider)


# Sonner
Source: https://docs.pharen.app/ui/components/sonner

Import and use the Sonner components from @pharen/ui.

Use **Sonner** to show transient toast notifications. This page covers every Vue component exported by the public module.

<PharenUiPreview name="sonner" title="Sonner preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { onMounted } from 'vue';
  import { Button, Sonner, toast } from '@pharen/ui';

  const showToast = () => toast.success('Workflow published', { description: 'The automation is now active.', duration: Infinity });
  onMounted(showToast);
  </script>

  <template>
    <div><Button variant="outline" @click="showToast">Show notification</Button><Sonner position="top-center" /></div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Sonner, Toaster } from '@pharen/ui';
```

## Exports

| Export    | Purpose                                  |
| --------- | ---------------------------------------- |
| `Sonner`  | Exported Vue component from this module. |
| `Toaster` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/sonner)


# Sortable
Source: https://docs.pharen.app/ui/components/sortable

Import and use the Sortable components from @pharen/ui.

Use **Sortable** to reorder items with drag-and-drop interactions. This page covers every Vue component exported by the public module.

<PharenUiPreview name="sortable" title="Sortable preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { Sortable, SortableItem, SortableItemHandle } from '@pharen/ui';

  const tasks = ref([
    { id: 'research', label: 'Research competitors' },
    { id: 'draft', label: 'Draft campaign' },
    { id: 'review', label: 'Review copy' },
  ]);
  </script>

  <template>
    <Sortable v-model="tasks" :get-item-value="item => item.id" class="grid w-full max-w-sm gap-2">
      <SortableItem v-for="task in tasks" :key="task.id" :value="task.id" class="flex items-center gap-2 rounded-lg border bg-card p-3">
        <SortableItemHandle :label="`Move ${task.label}`" />
        <span class="text-sm">{{ task.label }}</span>
      </SortableItem>
    </Sortable>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Sortable, SortableItem, SortableItemHandle, SortableOverlay } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `Sortable`           | Exported Vue component from this module. |
| `SortableItem`       | Represents one item.                     |
| `SortableItemHandle` | Exported Vue component from this module. |
| `SortableOverlay`    | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/sortable)


# Spinner
Source: https://docs.pharen.app/ui/components/spinner

Import and use the Spinner components from @pharen/ui.

Use **Spinner** to communicate indeterminate progress. This page covers every Vue component exported by the public module.

<PharenUiPreview name="spinner" title="Spinner preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Spinner } from '@pharen/ui';
  </script>

  <template>
    <Spinner />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Spinner } from '@pharen/ui';
```

## Exports

| Export    | Purpose                                  |
| --------- | ---------------------------------------- |
| `Spinner` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/spinner)


# Stat card
Source: https://docs.pharen.app/ui/components/stat-card

Import and use the Stat card components from @pharen/ui.

Use **Stat card** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="stat-card" title="Stat card preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { StatCard } from '@pharen/ui';
  </script>

  <template>
    <StatCard label="Workflow runs" :value="128" delta="12%" trend="up" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { StatCard } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `StatCard` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/stat-card)


# Stepper
Source: https://docs.pharen.app/ui/components/stepper

Import and use the Stepper components from @pharen/ui.

Use **Stepper** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="stepper" title="Stepper preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Stepper, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperSeparator, StepperTitle, StepperTrigger } from '@pharen/ui';

  const steps = [
    { step: 1, title: 'Account', description: 'Your details' },
    { step: 2, title: 'Workspace', description: 'Team setup' },
    { step: 3, title: 'Finish', description: 'Review' },
  ];
  </script>

  <template>
    <Stepper :default-value="2" class="w-full max-w-2xl">
      <StepperNav>
        <StepperItem v-for="item in steps" :key="item.step" :step="item.step">
          <StepperTrigger>
            <StepperIndicator>{{ item.step }}</StepperIndicator>
            <span class="hidden text-left sm:block"><StepperTitle>{{ item.title }}</StepperTitle><StepperDescription>{{ item.description }}</StepperDescription></span>
          </StepperTrigger>
          <StepperSeparator v-if="item.step < steps.length" />
        </StepperItem>
      </StepperNav>
    </Stepper>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Stepper, StepperContent, StepperDescription, StepperIndicator, StepperItem, StepperNav, StepperPanel, StepperSeparator, StepperTitle, StepperTrigger } from '@pharen/ui';
```

## Exports

| Export               | Purpose                                  |
| -------------------- | ---------------------------------------- |
| `Stepper`            | Exported Vue component from this module. |
| `StepperContent`     | Contains the visible content.            |
| `StepperDescription` | Renders supporting description.          |
| `StepperIndicator`   | Exported Vue component from this module. |
| `StepperItem`        | Represents one item.                     |
| `StepperNav`         | Exported Vue component from this module. |
| `StepperPanel`       | Exported Vue component from this module. |
| `StepperSeparator`   | Separates adjacent regions.              |
| `StepperTitle`       | Renders the accessible title.            |
| `StepperTrigger`     | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/stepper)


# Switch
Source: https://docs.pharen.app/ui/components/switch

Import and use the Switch components from @pharen/ui.

Use **Switch** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="switch" title="Switch preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Label, Switch } from '@pharen/ui';
  </script>

  <template>
    <div class="flex items-center gap-2">
      <Switch id="notifications" />
      <Label for="notifications">Notifications</Label>
    </div>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Switch } from '@pharen/ui';
```

## Exports

| Export   | Purpose                                  |
| -------- | ---------------------------------------- |
| `Switch` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/switch)


# Table
Source: https://docs.pharen.app/ui/components/table

Import and use the Table components from @pharen/ui.

Use **Table** to present structured rows and columns. This page covers every Vue component exported by the public module.

<PharenUiPreview name="table" title="Table preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@pharen/ui';
  </script>

  <template>
    <Table>
      <TableHeader><TableRow><TableHead>Member</TableHead><TableHead>Role</TableHead></TableRow></TableHeader>
      <TableBody><TableRow><TableCell>Johannes</TableCell><TableCell>Owner</TableCell></TableRow></TableBody>
    </Table>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Table, TableHeader, TableBody, TableFooter, TableRow, TableHead, TableCell, TableCaption } from '@pharen/ui';
```

## Exports

| Export         | Purpose                                  |
| -------------- | ---------------------------------------- |
| `Table`        | Exported Vue component from this module. |
| `TableHeader`  | Structures the header region.            |
| `TableBody`    | Exported Vue component from this module. |
| `TableFooter`  | Structures the footer region.            |
| `TableRow`     | Exported Vue component from this module. |
| `TableHead`    | Exported Vue component from this module. |
| `TableCell`    | Exported Vue component from this module. |
| `TableCaption` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/table)


# Tabs
Source: https://docs.pharen.app/ui/components/tabs

Import and use the Tabs components from @pharen/ui.

Use **Tabs** to switch between related content panels. This page covers every Vue component exported by the public module.

<PharenUiPreview name="tabs" title="Tabs preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Tabs, TabsContent, TabsList, TabsTrigger } from '@pharen/ui';
  </script>

  <template>
    <Tabs default-value="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
      </TabsList>
      <TabsContent value="overview">Workspace overview</TabsContent>
      <TabsContent value="activity">Recent activity</TabsContent>
    </Tabs>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@pharen/ui';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `Tabs`        | Exported Vue component from this module. |
| `TabsContent` | Contains the visible content.            |
| `TabsList`    | Exported Vue component from this module. |
| `TabsTrigger` | Opens or activates the component.        |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/tabs)


# Textarea
Source: https://docs.pharen.app/ui/components/textarea

Import and use the Textarea components from @pharen/ui.

Use **Textarea** to collect multi-line text. This page covers every Vue component exported by the public module.

<PharenUiPreview name="textarea" title="Textarea preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Textarea } from '@pharen/ui';
  </script>

  <template>
    <Textarea placeholder="Add a description" />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Textarea } from '@pharen/ui';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Textarea` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/textarea)


# Timeline
Source: https://docs.pharen.app/ui/components/timeline

Import and use the Timeline components from @pharen/ui.

Use **Timeline** to present structured product information. This page covers every Vue component exported by the public module.

<PharenUiPreview name="timeline" title="Timeline preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from '@pharen/ui';

  const events = [
    { title: 'Workflow created', date: '09:30', text: 'Johannes created the workflow.' },
    { title: 'Test completed', date: '10:05', text: 'All five steps finished successfully.' },
  ];
  </script>

  <template>
    <Timeline class="w-full max-w-md">
      <TimelineItem v-for="event in events" :key="event.title">
        <TimelineIndicator /><TimelineSeparator />
        <TimelineHeader><TimelineTitle>{{ event.title }}</TimelineTitle><TimelineDate>{{ event.date }}</TimelineDate></TimelineHeader>
        <TimelineContent>{{ event.text }}</TimelineContent>
      </TimelineItem>
    </Timeline>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Timeline, TimelineContent, TimelineDate, TimelineHeader, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from '@pharen/ui';
```

## Exports

| Export              | Purpose                                  |
| ------------------- | ---------------------------------------- |
| `Timeline`          | Exported Vue component from this module. |
| `TimelineContent`   | Contains the visible content.            |
| `TimelineDate`      | Exported Vue component from this module. |
| `TimelineHeader`    | Structures the header region.            |
| `TimelineIndicator` | Exported Vue component from this module. |
| `TimelineItem`      | Represents one item.                     |
| `TimelineSeparator` | Separates adjacent regions.              |
| `TimelineTitle`     | Renders the accessible title.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/timeline)


# Toggle
Source: https://docs.pharen.app/ui/components/toggle

Import and use the Toggle components from @pharen/ui.

Use **Toggle** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="toggle" title="Toggle preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Toggle } from '@pharen/ui';
  </script>

  <template>
    <Toggle aria-label="Toggle bold">Bold</Toggle>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Toggle } from '@pharen/ui';
```

## Exports

| Export   | Purpose                                  |
| -------- | ---------------------------------------- |
| `Toggle` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/toggle)


# Toggle group
Source: https://docs.pharen.app/ui/components/toggle-group

Import and use the Toggle group components from @pharen/ui.

Use **Toggle group** to collect and edit a value. This page covers every Vue component exported by the public module.

<PharenUiPreview name="toggle-group" title="Toggle group preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ref } from 'vue';
  import { ToggleGroup, ToggleGroupItem } from '@pharen/ui';

  const alignment = ref('left');
  </script>

  <template>
    <ToggleGroup v-model="alignment" type="single" variant="outline" :spacing="0">
      <ToggleGroupItem value="left" aria-label="Align left">Left</ToggleGroupItem>
      <ToggleGroupItem value="center" aria-label="Align center">Center</ToggleGroupItem>
      <ToggleGroupItem value="right" aria-label="Align right">Right</ToggleGroupItem>
    </ToggleGroup>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ToggleGroup, ToggleGroupItem } from '@pharen/ui';
```

## Exports

| Export            | Purpose               |
| ----------------- | --------------------- |
| `ToggleGroup`     | Groups related items. |
| `ToggleGroupItem` | Represents one item.  |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/toggle-group)


# Tooltip
Source: https://docs.pharen.app/ui/components/tooltip

Import and use the Tooltip components from @pharen/ui.

Use **Tooltip** to explain an action or value on hover and keyboard focus. This page covers every Vue component exported by the public module.

<PharenUiPreview name="tooltip" title="Tooltip preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@pharen/ui';
  </script>

  <template>
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger as-child><Button variant="outline">Hover or focus</Button></TooltipTrigger>
        <TooltipContent>Open workspace settings</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Tooltip, TooltipProvider, TooltipTrigger, TooltipContent } from '@pharen/ui';
```

## Exports

| Export            | Purpose                                  |
| ----------------- | ---------------------------------------- |
| `Tooltip`         | Exported Vue component from this module. |
| `TooltipProvider` | Exported Vue component from this module. |
| `TooltipTrigger`  | Opens or activates the component.        |
| `TooltipContent`  | Contains the visible content.            |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/tooltip)


# Tree
Source: https://docs.pharen.app/ui/components/tree

Import and use the Tree components from @pharen/ui.

Use **Tree** to build an action or navigation pattern. This page covers every Vue component exported by the public module.

<PharenUiPreview name="tree" title="Tree preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Tree, TreeItem, TreeItemLabel } from '@pharen/ui';

  type Node = { id: string; label: string; children?: Node[] };
  const items: Node[] = [
    { id: 'workspace', label: 'Workspace', children: [
      { id: 'documents', label: 'Documents' },
      { id: 'workflows', label: 'Workflows', children: [{ id: 'published', label: 'Published' }] },
    ] },
  ];
  </script>

  <template>
    <Tree :items="items" :get-key="node => node.id" :get-children="node => node.children" :default-expanded="['workspace', 'workflows']" class="w-full max-w-sm">
      <template #default="{ flattenItems }">
        <TreeItem v-for="item in flattenItems" :key="item.value.id" v-bind="item.bind" :value="item.value" :level="item.level">
          <TreeItemLabel>{{ item.value.label }}</TreeItemLabel>
        </TreeItem>
      </template>
    </Tree>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Tree, TreeDragLine, TreeItem, TreeItemLabel } from '@pharen/ui';
```

## Exports

| Export          | Purpose                                  |
| --------------- | ---------------------------------------- |
| `Tree`          | Exported Vue component from this module. |
| `TreeDragLine`  | Exported Vue component from this module. |
| `TreeItem`      | Represents one item.                     |
| `TreeItemLabel` | Labels a value or region.                |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/tree)


# Install Pharen UI
Source: https://docs.pharen.app/ui/installation

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>


# Pharen UI component library
Source: https://docs.pharen.app/ui/overview

Install Pharen UI and use the shared Vue 3 components in your applications.

Pharen UI is the shared component library for Pharen products. It exposes accessible Vue 3 building blocks, Tailwind CSS tokens, and complex product patterns through `@pharen/ui`.

<Info>
  These docs reflect package version `0.0.18`.
</Info>

<CardGroup>
  <Card title="Installation" icon="package-plus" href="/ui/installation">
    Install the package and load its styles once.
  </Card>

  <Card title="Components" icon="blocks" href="/ui/components">
    Browse every publicly exported UI component.
  </Card>

  <Card title="Styles and theming" icon="palette" href="/ui/theming">
    Customize colors, radius, and dark mode through tokens.
  </Card>

  <Card title="AI Components" icon="sparkles" href="/ui/ai">
    Build messages, tool calls, and agent states.
  </Card>
</CardGroup>

## Quick start

<Steps>
  <Step title="Install the package">
    `npm install @pharen/ui`
  </Step>

  <Step title="Load the styles">
    Import `@pharen/ui/styles.css` once in your app entrypoint.
  </Step>

  <Step title="Use a component">
    `import { Button } from '@pharen/ui'`
  </Step>
</Steps>


# Styles and theming
Source: https://docs.pharen.app/ui/theming

Customize Pharen UI with CSS variables and class-based dark mode.

Pharen UI uses semantic CSS variables. Override tokens in your global stylesheet after importing the package styles.

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

:root {
  --primary: #18181b;
  --primary-foreground: #ffffff;
  --background: #ffffff;
  --foreground: #111111;
  --border: #e5e5e5;
  --radius: 0.625rem;
}
```

## Dark mode

The library enables dark mode through the `dark` class. Apply it to `html` or a containing region.

```html theme={null}
<html class="dark">
  <!-- Your app -->
</html>
```

## Important token groups

| Group      | Examples                                                           |
| ---------- | ------------------------------------------------------------------ |
| Surfaces   | `--background`, `--card`, `--popover`                              |
| Text       | `--foreground`, `--muted-foreground`                               |
| Actions    | `--primary`, `--secondary`, `--destructive`                        |
| Boundaries | `--border`, `--input`, `--ring`                                    |
| Shape      | `--radius`                                                         |
| Sidebar    | `--sidebar-background`, `--sidebar-foreground`, `--sidebar-border` |

<Warning>
  Override semantic tokens instead of internal component classes so variants and dark mode stay consistent.
</Warning>


# Control AI Model Policies and Providers in Pharen Hub
Source: https://docs.pharen.app/admin/ai-model-policies

Control which AI models and providers your workspace can use, enforce approved infrastructure across all teams, and prevent unauthorized model usage.

When your team uses AI, the models and providers behind those interactions matter — for security, compliance, cost predictability, and consistency. Pharen Hub's AI model policies let you define exactly which models and providers are permitted in your workspace. Once a policy is in place, team members can only work with the AI infrastructure you've approved. This eliminates shadow AI usage and gives you a clear, auditable record of what's running in your environment.

## Why Model Governance Matters

Not all AI models carry the same data handling guarantees, pricing structures, or output quality. Without a policy layer, individual team members may use models that:

* **Route data to unapproved third parties** — a compliance and data residency risk
* **Incur unpredictable costs** — some models charge significantly more per token than approved alternatives
* **Produce inconsistent results** — mixing models across teams makes it hard to benchmark or audit outputs
* **Violate contractual obligations** — certain enterprise agreements require you to use specific approved providers

A model policy in Pharen Hub prevents these scenarios by making the approved list the only option available to your workspace.

<Note>
  Model policies apply to AI features used directly in Pharen Hub. If your team connects external tools or integrations that call their own AI providers, those connections are governed by your integration settings, not model policies.
</Note>

## Understanding the Policy Structure

Pharen Hub's model policies work at two levels:

<CardGroup>
  <Card title="Provider Policies" icon="building-columns">
    Allow or block entire AI providers (for example, permit only providers with SOC 2 Type II certification, or restrict usage to a single approved vendor). Blocking a provider automatically blocks all models from that provider.
  </Card>

  <Card title="Model Policies" icon="microchip-ai">
    Fine-grained control within an allowed provider. You can permit a provider but restrict it to specific models — for example, allowing a provider's standard model but blocking access to experimental or preview versions.
  </Card>
</CardGroup>

## Configuring Your Model Policy

<Steps>
  <Step title="Open AI Model Policies">
    Navigate to **Workspace Settings → Security & Admin → AI Model Policies**. The page shows a list of all available providers and their associated models, with their current status (allowed or blocked) for your workspace.
  </Step>

  <Step title="Review available providers">
    Pharen Hub lists every provider currently integrated with the platform. Each provider card shows:

    * The provider name and a brief description
    * The number of models available from that provider
    * Current policy status: **Allowed**, **Restricted**, or **Blocked**
  </Step>

  <Step title="Set provider-level access">
    Click a provider to expand its settings. At the top of the provider panel, set the overall access level:

    * **Allowed** — all models from this provider are available unless specifically blocked at the model level
    * **Restricted** — only models you explicitly allow are available; all others from this provider are blocked
    * **Blocked** — no models from this provider can be used anywhere in the workspace
  </Step>

  <Step title="Configure individual model access">
    Within an allowed or restricted provider, toggle individual models on or off. This lets you, for example, allow a provider's production-grade models while blocking their experimental or beta releases.
  </Step>

  <Step title="Set team-level overrides (optional)">
    If specific teams need access to models that aren't available workspace-wide, you can create team-level overrides. Select **Add Team Override**, choose the team, and configure a modified policy that applies only to that team. Team overrides can expand or further restrict what the workspace policy allows.
  </Step>

  <Step title="Review and save the policy">
    Before saving, Pharen Hub shows you a **Policy Impact Summary**: how many teams and members are affected, which models they'll lose access to, and which they'll gain. Review this carefully, then click **Save Policy**. Changes take effect within a few minutes for all active sessions.
  </Step>
</Steps>

<Warning>
  When you block a model or provider that teams are actively using, their in-progress work using that model will not be interrupted — but they won't be able to start new requests with it. Communicate policy changes to affected teams before saving to avoid confusion.
</Warning>

## Setting a Default Model

Beyond controlling which models are available, you can set a default model that Pharen Hub uses when a team member doesn't explicitly choose one. This encourages consistency and ensures that the most cost-effective or compliance-appropriate model is used by default.

<Steps>
  <Step title="Open Default Model Settings">
    From the **AI Model Policies** page, click the **Default Model** tab.
  </Step>

  <Step title="Choose a default model">
    Select from the models currently in your allowed list. The default must be an allowed model — blocked or restricted models don't appear in this list.
  </Step>

  <Step title="Set team-specific defaults (optional)">
    You can override the workspace default for specific teams. For example, your engineering team might default to a more capable model, while other teams use the standard default. Click **Add Team Default** and configure the model for each team separately.
  </Step>

  <Step title="Save">
    Click **Save**. New AI interactions that don't specify a model will use the default you've set.
  </Step>
</Steps>

## Updating Policies Over Time

AI providers regularly release new models, retire old ones, and update their terms of service. You should review your model policies periodically to keep them accurate and effective.

<Accordion title="When a provider releases a new model">
  Pharen Hub adds new models to the provider's model list automatically. New models default to **Blocked** until you explicitly allow them, so they won't be available to your team until you review and approve them. You'll receive a notification in **Workspace Settings** when new models are added to a provider you've allowed.
</Accordion>

<Accordion title="When a provider retires a model">
  Retired models are marked as **Deprecated** in the model list. Pharen Hub will notify admins before the model is removed. If the deprecated model is currently set as a team's default, you'll be prompted to choose a replacement before the retirement date.
</Accordion>

<Accordion title="When your compliance requirements change">
  If your organization changes AI vendors, updates its data handling policies, or adds new regulatory requirements, revisit your provider and model policies. Use the **Policy History** tab to see a full log of all policy changes, who made them, and when — useful for compliance audits and change management reviews.
</Accordion>

<Accordion title="When onboarding a new team with different needs">
  New teams may have different AI use cases than existing ones. Rather than changing the workspace-wide policy, add a team-level override that grants the new team access to the models they need. This keeps the global policy conservative while giving the new team what they need to be productive.
</Accordion>

## Reviewing Model Usage

The **Model Usage** report shows you which models are being used across your workspace, broken down by team, member, and time period.

<Steps>
  <Step title="Open the Model Usage report">
    Go to **Workspace Settings → Security & Admin → AI Model Policies → Usage Report**.
  </Step>

  <Step title="Filter by time period and team">
    Use the filters to focus on a specific date range, team, or provider. The report shows request counts, estimated token usage, and relative cost by model.
  </Step>

  <Step title="Identify high-usage models">
    Use the report to spot which models are driving the most usage and cost. If an expensive model is being used heavily for tasks where a lower-cost model would work just as well, you can update the default model setting or refine the allowed list to guide teams toward more efficient options.
  </Step>

  <Step title="Export the report">
    Click **Export** to download a CSV for use in internal reporting, vendor reviews, or compliance documentation.
  </Step>
</Steps>

<Tip>
  Combine model usage data with budget controls to get a complete picture of AI spend. If you know which models cost the most, you can set lower team-level budget limits for teams that have access to high-cost models, or require approval for requests that use them.
</Tip>

## Policy Enforcement Details

<Info>
  Model policies are enforced server-side in Pharen Hub. A team member cannot bypass a policy by using a different client, integration, or browser. If a request specifies a blocked model, Pharen Hub returns an error and logs the attempt — it does not silently fall back to an allowed model, which ensures that teams are always aware of policy boundaries rather than unknowingly using a different model than intended.
</Info>


# Configure Budget Controls for AI Usage in Pharen Hub
Source: https://docs.pharen.app/admin/budget-controls

Set spending limits, configure approval rules for AI usage, and monitor costs across teams and workspace areas before they become a problem.

AI usage in a collaborative workspace can scale quickly, and without guardrails, costs can drift far beyond what you planned. Pharen Hub's budget controls let you set hard limits and approval thresholds before usage begins — not after an unexpected invoice arrives. You can define limits at the workspace level, per team, or for specific AI-heavy processes, and configure approval rules that require sign-off before high-cost actions run.

## How Budget Controls Work

Pharen Hub tracks AI usage in real time and compares it against the limits you configure. When usage approaches or hits a threshold, Pharen Hub takes the action you defined — sending an alert, pausing usage, or routing a request through an approval flow. Budget controls are additive: a team-level limit stacks on top of the workspace-level limit, so the stricter limit always wins.

<CardGroup>
  <Card title="Workspace Limits" icon="building">
    A ceiling on total AI spending across your entire workspace. Useful for enforcing an organization-wide monthly budget.
  </Card>

  <Card title="Team Limits" icon="users">
    Per-team spending caps that let different teams operate within their own allocated budgets independently of each other.
  </Card>

  <Card title="Process Limits" icon="gears">
    Limits tied to specific AI-intensive processes or automations, so a single runaway workflow can't exhaust shared resources.
  </Card>
</CardGroup>

## Setting a Workspace-Level Spending Limit

<Steps>
  <Step title="Open Budget Controls">
    Go to **Workspace Settings → Security & Admin → Budget Controls**. The overview page shows your current spending for the billing period alongside any active limits.
  </Step>

  <Step title="Create a workspace limit">
    Click **Add Limit → Workspace Limit**. Enter the maximum dollar amount you want to allow for the current billing period. Pharen Hub resets this counter automatically at the start of each new billing period.
  </Step>

  <Step title="Set alert thresholds">
    Configure one or more alert thresholds — expressed as a percentage of the limit — at which Pharen Hub will notify admins. For example, set alerts at **75%** and **90%** so you have time to react before hitting the ceiling.
  </Step>

  <Step title="Choose the limit action">
    Decide what happens when the workspace limit is reached:

    * **Alert only** — notify admins but allow usage to continue
    * **Pause AI features** — suspend all AI usage until an admin raises the limit or the billing period resets
    * **Require approval** — route any additional AI requests through an approval flow
  </Step>

  <Step title="Save the limit">
    Click **Save Limit**. The limit is active immediately and applies to all AI usage in the workspace from this point forward.
  </Step>
</Steps>

<Note>
  Workspace-level limits apply to all teams collectively. If your teams have widely different usage needs, consider setting individual team limits instead of (or in addition to) a workspace limit.
</Note>

## Setting a Team-Level Spending Limit

<Steps>
  <Step title="Navigate to team budget settings">
    From **Budget Controls**, click **Add Limit → Team Limit**. Alternatively, go to **Workspace Settings → Teams**, select a team, and open the **Budget** tab within that team's settings.
  </Step>

  <Step title="Select the team">
    Use the dropdown to choose which team this limit applies to. You can create separate limits for as many teams as needed.
  </Step>

  <Step title="Enter the limit amount">
    Enter the maximum spend allowed for this team per billing period. This is an independent cap — the team will be subject to both this limit and the workspace-level limit if both are configured.
  </Step>

  <Step title="Configure notifications">
    Choose who receives alerts when this team's usage approaches its limit:

    * **Workspace Admins** — always notified
    * **Team Admins** — add the team's own admins to the notification list so they can manage their own budget
    * **Custom email** — send alerts to a budget owner, finance contact, or distribution list outside of Pharen Hub
  </Step>

  <Step title="Save and repeat as needed">
    Save the team limit. Repeat this process for any other teams that need their own caps.
  </Step>
</Steps>

<Tip>
  Give team leads visibility into their own team's spending by navigating to **Team Settings → Budget** and enabling **Show spending dashboard to Team Admins**. They'll be able to monitor usage without needing full workspace Admin access.
</Tip>

## Configuring Approval Rules

Approval rules add a human checkpoint before a high-cost AI action runs. This is especially useful for batch processing, large document analysis, or any automated workflow that could consume significant credits in a single run.

<Steps>
  <Step title="Open Approval Rules">
    From **Budget Controls**, select the **Approval Rules** tab.
  </Step>

  <Step title="Create a new rule">
    Click **New Approval Rule**. Each rule has three parts: a trigger, a scope, and an approver.
  </Step>

  <Step title="Define the trigger">
    Set the condition that triggers the approval requirement. Options include:

    * **Estimated cost threshold** — require approval when a single request is estimated to cost more than a set dollar amount
    * **Usage milestone** — require approval when a team or user has consumed more than X% of their allocated budget
    * **Specific action types** — require approval for certain action types, such as bulk document processing or large context requests
  </Step>

  <Step title="Set the scope">
    Define whether this rule applies to the entire workspace, a specific team, or individual members. Narrower scopes let you apply stricter rules only where needed.
  </Step>

  <Step title="Assign approvers">
    Choose who must approve requests that match this rule:

    * A specific admin or manager
    * Anyone with the Admin role
    * A custom approval group you've defined

    You can also set a **fallback approver** in case the primary approver is unavailable.
  </Step>

  <Step title="Set an approval timeout">
    Decide what happens if no one approves within your configured window (for example, 24 hours):

    * **Deny automatically** — the request is cancelled
    * **Escalate** — forward to a secondary approver
    * **Allow automatically** — the request proceeds (use with caution)
  </Step>

  <Step title="Save the rule">
    Click **Save Rule**. The rule is active immediately. Members who trigger it will see an in-app notification that their request is pending approval, and approvers will receive an alert to review it.
  </Step>
</Steps>

<Warning>
  If you set a very low approval threshold — for example, requiring approval for any request over \$0.01 — frequent approval requests may slow down your team significantly. Start with higher thresholds and tune downward once you have a baseline understanding of normal usage.
</Warning>

## Monitoring Costs

The **Spending Dashboard** gives you a real-time view of AI usage across your workspace. You don't need to wait for an invoice to understand where costs are going.

<Steps>
  <Step title="Open the Spending Dashboard">
    Go to **Workspace Settings → Security & Admin → Budget Controls → Spending Dashboard**.
  </Step>

  <Step title="Review workspace-level spend">
    The top section shows total spend for the current billing period, your configured limit, and the percentage consumed. A color-coded indicator turns yellow at 75% and red at 90% of any active limit.
  </Step>

  <Step title="Drill down by team">
    Scroll to the **By Team** breakdown to see how much each team has spent in the current period, their individual limits (if set), and the percentage consumed. Click any team row to see a more detailed view of which members or processes drove that team's usage.
  </Step>

  <Step title="Review historical trends">
    Switch to the **Trends** tab to see spending over the past 3, 6, or 12 months. Use this view to spot anomalies, forecast future budgets, and understand seasonal usage patterns.
  </Step>

  <Step title="Export spending data">
    Click **Export** to download a CSV of spending data filtered by date range, team, or member. This is useful for internal chargebacks, budget reviews, or sharing data with your finance team.
  </Step>
</Steps>

<Info>
  Spending data in the dashboard reflects usage as of the previous hour. For real-time tracking of a specific operation in progress, check the activity feed within that team or project.
</Info>

## Budget Control Best Practices

<Accordion title="Start with alerts before setting hard limits">
  When first enabling budget controls, set alert thresholds at 75% and 90% of your expected spend but leave the limit action as **Alert only**. This gives you a billing period's worth of real usage data before you decide where to set hard limits, preventing you from accidentally blocking legitimate work.
</Accordion>

<Accordion title="Align team limits with allocated headcount budgets">
  If your organization allocates AI spend per team or per seat, use team limits to enforce those allocations directly in Pharen Hub. Set the limit to match the team's quarterly or monthly allocation, and enable the Team Admin spending dashboard so leads manage their own budgets.
</Accordion>

<Accordion title="Use process limits for scheduled automations">
  Automated workflows — like nightly document summaries or scheduled data processing — are a common source of unexpected costs. Assign a process-level limit to each scheduled automation so a misconfiguration can't exhaust the workspace budget overnight.
</Accordion>

<Accordion title="Review and adjust limits each billing period">
  Budgets should reflect how your team actually works. At the start of each billing period, review the previous period's spending trends and adjust limits accordingly. What was sufficient three months ago may be too low as your team grows.
</Accordion>


# Configure Custom Roles and Permissions in Pharen Hub
Source: https://docs.pharen.app/admin/roles-and-permissions

Configure custom roles, assign granular permissions per team and workspace area, and maintain an audit-ready access history in Pharen Hub.

Pharen Hub gives workspace administrators precise control over who can see and do what across your entire workspace. Instead of relying on broad access levels, you can define custom roles tailored to your team's structure — from read-only reviewers to full workspace managers — and assign those roles per team, project area, or responsibility. Every access change is logged automatically, so you're always audit-ready without extra work.

## Roles Overview

Roles in Pharen Hub are collections of permissions. Each member of your workspace is assigned one or more roles, and those roles determine what they can access and modify. Pharen Hub ships with a set of built-in roles to get you started, and you can create unlimited custom roles to match your organization's needs.

<CardGroup>
  <Card title="Built-in Roles" icon="shield">
    Pharen Hub includes **Owner**, **Admin**, **Member**, and **Viewer** roles out of the box. These cover common access patterns and cannot be deleted, though Admins can restrict what built-in roles can do in custom policy sets.
  </Card>

  <Card title="Custom Roles" icon="sliders">
    Create roles like **Billing Manager**, **AI Reviewer**, or **Team Lead** with exactly the permissions each responsibility requires. Custom roles can be scoped globally or to specific workspace areas.
  </Card>
</CardGroup>

## Built-in Permission Levels

The table below shows what each built-in role can do across key workspace areas. Use this as a baseline when designing your custom roles.

| Capability                  | Owner | Admin | Member | Viewer |
| --------------------------- | ----- | ----- | ------ | ------ |
| Manage workspace settings   | ✅     | ✅     | ❌      | ❌      |
| Create and delete teams     | ✅     | ✅     | ❌      | ❌      |
| Invite and remove members   | ✅     | ✅     | ❌      | ❌      |
| Assign roles                | ✅     | ✅     | ❌      | ❌      |
| Configure AI model policies | ✅     | ✅     | ❌      | ❌      |
| Set budget controls         | ✅     | ✅     | ❌      | ❌      |
| Create and edit content     | ✅     | ✅     | ✅      | ❌      |
| Use AI features             | ✅     | ✅     | ✅      | ❌      |
| View workspace content      | ✅     | ✅     | ✅      | ✅      |
| Export reports              | ✅     | ✅     | ✅      | ❌      |

<Note>
  Only the workspace **Owner** can transfer ownership or permanently delete the workspace. Admins can perform all other administrative tasks.
</Note>

## Creating a Custom Role

<Steps>
  <Step title="Open the Roles settings page">
    Navigate to **Workspace Settings → Security & Admin → Roles & Permissions**. You'll see a list of all existing roles — both built-in and any custom roles already created.
  </Step>

  <Step title="Create a new role">
    Click **Create Role** in the top-right corner. Give your role a clear, descriptive name (for example, `Billing Manager` or `Content Reviewer`) and add an optional description so other admins understand its purpose.
  </Step>

  <Step title="Select permissions">
    Work through the permissions checklist, organized by workspace area:

    * **Workspace Administration** — settings, billing, integrations
    * **Team Management** — create teams, manage membership
    * **AI & Models** — configure model policies, view usage
    * **Content & Projects** — create, edit, view, delete
    * **Reports & Exports** — access analytics and audit logs

    Toggle each permission on or off. Permissions are additive — a member with multiple roles gets the union of all permissions those roles grant.
  </Step>

  <Step title="Set the role scope">
    Choose whether this role applies **globally** (across the entire workspace) or is **scoped to specific teams or areas**. A scoped role only takes effect within the teams or workspace areas you select.
  </Step>

  <Step title="Save and assign">
    Click **Save Role**. The role is now available to assign to workspace members. You can assign it immediately or do so later from the Members page.
  </Step>
</Steps>

## Assigning Roles to Members

<Steps>
  <Step title="Go to the Members page">
    Navigate to **Workspace Settings → Members**. You'll see every member currently in your workspace along with their current roles.
  </Step>

  <Step title="Select a member">
    Click the member's name or the **Manage** button next to their row to open their member profile.
  </Step>

  <Step title="Assign or change roles">
    Under **Roles**, click **Add Role** and select from the list. You can assign multiple roles to a single member. To remove a role, click the **×** next to the role name.
  </Step>

  <Step title="Apply team-scoped roles">
    If the member belongs to specific teams, you can assign roles that apply only within those teams. Switch to the **Team Memberships** tab in their profile, select a team, and set their role within it.
  </Step>
</Steps>

<Tip>
  When onboarding a new team at once, use **Bulk Assign** from the Members list. Select multiple members using the checkboxes, then choose **Assign Role** from the bulk actions menu to apply a role to all of them in one step.
</Tip>

## Managing Permissions Per Workspace Area

Beyond role-level permissions, you can lock down individual workspace areas for more granular control. This is useful when certain projects or channels should be restricted to a specific team regardless of a member's global role.

<Steps>
  <Step title="Navigate to the workspace area">
    Open the team, project, or channel you want to restrict. Click the **Settings** icon (⚙️) next to its name in the sidebar.
  </Step>

  <Step title="Open Access Controls">
    Select **Access Controls** from the settings menu. By default, access inherits from the member's workspace role.
  </Step>

  <Step title="Override access for this area">
    Toggle **Custom Access** on to override inherited permissions. You can then:

    * Specify which roles can access this area
    * Grant access to individual members directly
    * Set a minimum role requirement (for example, require at least `Member` to view)
  </Step>

  <Step title="Save changes">
    Click **Save**. Members who no longer meet the access requirements will be redirected away from the area immediately.
  </Step>
</Steps>

## Reviewing Access History

Pharen Hub automatically logs every access-related event in your workspace. You don't need to configure anything — the audit log is always on.

<Steps>
  <Step title="Open the Audit Log">
    Go to **Workspace Settings → Security & Admin → Audit Log**.
  </Step>

  <Step title="Filter the log">
    Use the filters at the top of the page to narrow down events by:

    * **Date range** — select a preset (last 7 days, last 30 days) or a custom range
    * **Event type** — role changes, member invitations, permission updates, sign-in events
    * **Member** — filter by a specific user's activity
    * **Workspace area** — see all changes within a particular team or project
  </Step>

  <Step title="Export for compliance">
    Click **Export** to download the filtered log as a CSV file. Exported logs include the timestamp, actor (who made the change), target (who or what was affected), and the full details of the change.
  </Step>
</Steps>

<Info>
  Audit logs are retained for **12 months** on all paid plans. If your organization requires longer retention, contact Pharen Hub support to discuss extended log archiving options.
</Info>

## Common Role Patterns

<Accordion title="Separating billing access from workspace administration">
  By default, only Owners and Admins can view billing. If you want your finance team to manage invoices without giving them full Admin access, create a **Billing Manager** custom role with only the **Workspace Administration → Billing** permission enabled. Assign it to finance team members alongside their regular Member role.
</Accordion>

<Accordion title="Read-only access for external stakeholders">
  When sharing progress with clients or external reviewers, create a **Stakeholder** role with Viewer-level permissions scoped to specific project areas. This prevents them from seeing other teams' work or modifying anything.
</Accordion>

<Accordion title="Elevated access for team leads">
  Team leads often need to invite members and manage their team's settings without being full workspace Admins. Create a **Team Lead** role with permissions for team management (invite members, edit team settings) scoped to the specific teams they own.
</Accordion>

<Accordion title="Temporary elevated access">
  If a member needs temporary elevated permissions — for example, during an audit or a project handover — assign the additional role, note the end date in the role description field of their member profile, and remove the role when the period ends. Pharen Hub logs both the assignment and the removal in the audit log.
</Accordion>

<Warning>
  Removing a role from a member takes effect immediately. If you're removing access from someone who is currently active in the workspace, their session will reflect the new permissions on their next page load without requiring them to sign out.
</Warning>


# Enable and Enforce Two-Factor Authentication in Pharen Hub
Source: https://docs.pharen.app/admin/two-factor-auth

Set up two-factor authentication for your workspace, enforce it across all members, and apply stronger sign-in policies for internal and external users.

Two-factor authentication (2FA) is one of the most effective steps you can take to protect your workspace from unauthorized access. Even if a team member's password is compromised, 2FA requires a second verification step — such as a code from an authenticator app — before granting entry. Pharen Hub lets you enable 2FA for your entire workspace and enforce it as a requirement, so no member can skip it. You can also apply differentiated sign-in policies for internal staff versus external collaborators.

## How 2FA Works in Pharen Hub

When 2FA is enabled, members complete their normal sign-in (email and password, or SSO) and are then prompted for a second factor. Pharen Hub supports two types of second factors:

<CardGroup>
  <Card title="Authenticator App (TOTP)" icon="mobile-screen">
    Members link an authenticator app — such as Google Authenticator, Authy, or 1Password — to their Pharen Hub account. The app generates a time-based six-digit code that refreshes every 30 seconds.
  </Card>

  <Card title="Email OTP" icon="envelope">
    A one-time passcode is sent to the member's verified email address at each sign-in. This is a convenient fallback option and the default second factor when members first enroll.
  </Card>
</CardGroup>

<Note>
  Authenticator app (TOTP) is the stronger option. Email OTP is convenient but depends on the security of the member's email account. For high-security workspaces, consider requiring TOTP for all members using the policy settings described below.
</Note>

## Enabling 2FA for Your Workspace

<Steps>
  <Step title="Open Security Settings">
    Go to **Workspace Settings → Security & Admin → Two-Factor Authentication**. The page shows your current 2FA policy status and a list of members who have (or haven't) enrolled.
  </Step>

  <Step title="Enable 2FA at the workspace level">
    Toggle **Enable Two-Factor Authentication** to on. At this point, 2FA is available to all members — they can set it up voluntarily — but it isn't enforced yet. This gives members a window to enroll before enforcement begins.
  </Step>

  <Step title="Set the enrollment period">
    Choose how long members have to enroll before 2FA becomes mandatory. Options range from **Immediate** (enforce now) to **7 days**, **14 days**, or **30 days**. During this window, members who haven't enrolled see a persistent banner prompting them to set up 2FA, but can still access the workspace.
  </Step>

  <Step title="Enable enforcement">
    Toggle **Require 2FA for all members** to on and confirm your choice. Once the enrollment window closes, any member who has not enrolled in 2FA will be redirected to the 2FA setup flow at their next sign-in and must complete it before accessing the workspace.
  </Step>
</Steps>

<Warning>
  Before enabling enforcement, verify that **your own account** has 2FA set up. If you lock yourself out by enforcing 2FA before enrolling, you'll need to contact Pharen Hub support to regain access.
</Warning>

## Setting Up Your Own 2FA (Admin Guide)

As the administrator enabling this policy, you should enroll first so you can guide your team through the process.

<Steps>
  <Step title="Go to your Account Security settings">
    Click your avatar in the top-right corner and select **Account Settings → Security**.
  </Step>

  <Step title="Click Set Up Two-Factor Authentication">
    Under the **Two-Factor Authentication** section, click **Set Up**. You'll be prompted to choose your preferred second factor.
  </Step>

  <Step title="Choose Authenticator App or Email OTP">
    * **Authenticator App**: Open your authenticator app, scan the QR code shown on screen, then enter the six-digit code the app generates to confirm the link.
    * **Email OTP**: Pharen Hub sends a code to your registered email address. Enter it to confirm enrollment.
  </Step>

  <Step title="Save your recovery codes">
    Pharen Hub generates a set of single-use recovery codes. Download or securely store these immediately — they're the only way to access your account if you lose access to your second factor. Each code can only be used once.
  </Step>

  <Step title="Confirm enrollment">
    Click **Finish Setup**. 2FA is now active on your account and will be required at your next sign-in.
  </Step>
</Steps>

<Tip>
  Store recovery codes in a password manager or a secure, offline location — not in the same place as your workspace password. Treat each recovery code like a one-time-use master key to your account.
</Tip>

## Enforcing 2FA for Specific Member Groups

You can apply differentiated 2FA policies to internal team members and external collaborators, giving you stricter control where it matters most.

<Steps>
  <Step title="Open the 2FA Policy settings">
    From **Two-Factor Authentication**, click the **Policies** tab.
  </Step>

  <Step title="Set the internal members policy">
    Under **Internal Members**, choose the required second factor type:

    * **Any method** — members can use either authenticator app or email OTP
    * **Authenticator app only** — requires the stronger TOTP method; email OTP alone is not accepted
  </Step>

  <Step title="Set the external collaborators policy">
    External collaborators (guests and contractors) can have a separate policy. Common configurations:

    * Require the same 2FA standard as internal members for maximum security
    * Require 2FA but allow email OTP, accommodating collaborators who may not use a company-managed device
    * Enforce a shorter session duration so external users must re-authenticate more frequently
  </Step>

  <Step title="Configure session duration">
    Under **Session Settings**, set how long an authenticated session lasts before 2FA is required again:

    * **Per session** — 2FA is required every time the member signs in
    * **Every 24 hours** — 2FA is re-prompted once per day, regardless of session activity
    * **Every 7 days** — a balance between security and convenience for trusted devices
    * **Every 30 days** — suitable for low-risk internal users on managed devices

    You can set different session durations for internal members and external collaborators.
  </Step>

  <Step title="Save the policy">
    Click **Save Policy**. Changes apply to all future sign-in events. Current sessions are not terminated, but the new policy applies at the next re-authentication.
  </Step>
</Steps>

## Managing 2FA Enrollment Across Your Team

The **2FA Status** list on the Two-Factor Authentication page shows every workspace member and their current enrollment state. Use this to monitor adoption and take action where needed.

<Steps>
  <Step title="Identify unenrolled members">
    Members with **Not Enrolled** status haven't yet set up 2FA. If enforcement is approaching, these members will be blocked at sign-in. Sort the list by status to see all unenrolled members at a glance.
  </Step>

  <Step title="Send enrollment reminders">
    Select unenrolled members using the checkboxes and click **Send Reminder**. Pharen Hub sends them an email with instructions for setting up 2FA and a link to their Account Security settings.
  </Step>

  <Step title="Reset 2FA for a member">
    If a member has lost access to their authenticator app or recovery codes, you can reset their 2FA as an admin. Click the member's name, then click **Reset 2FA**. This removes their current second-factor enrollment and sends them a link to set up a new one. Their account is temporarily accessible without 2FA until they complete the new setup — keep this window short.
  </Step>

  <Step title="View sign-in history">
    Click any member's name to see their recent sign-in history, including the timestamp, IP address, and whether 2FA was completed for each session. Use this to identify suspicious activity, such as sign-ins from unusual locations.
  </Step>
</Steps>

<Info>
  When you reset a member's 2FA, the event is logged in the Audit Log with your admin account as the actor, the timestamp, and the affected member. This ensures there's always a record of administrative interventions in sign-in security.
</Info>

## Account Security Best Practices

<Accordion title="Require authenticator apps for admin accounts">
  Admin accounts have the highest level of access in your workspace. Require all admins to use an authenticator app (TOTP) rather than email OTP. Set this in **Policies** by creating a custom policy group for your Admin role and selecting **Authenticator app only**.
</Accordion>

<Accordion title="Set shorter session durations for external collaborators">
  External collaborators typically access your workspace from personal devices that may not be managed by your IT policies. Reducing the session duration — for example, to 24 hours — limits the window of exposure if an external user's device is compromised without invalidating your internal team's longer-lived sessions.
</Accordion>

<Accordion title="Audit sign-in events regularly">
  Periodically review the sign-in history for admin accounts and high-privilege members. Look for sign-ins from unfamiliar IP addresses or geographic locations that don't match your team's normal patterns. You can export sign-in history from the **Audit Log** for offline analysis.
</Accordion>

<Accordion title="Combine 2FA with SSO for maximum protection">
  If your organization uses Single Sign-On (SSO), you can require that SSO authentication also passes through your identity provider's own 2FA policies before Pharen Hub grants access. This means members authenticate through your IdP (which enforces MFA) and Pharen Hub verifies the session, giving you a layered security model.
</Accordion>

<Accordion title="Educate your team on phishing and social engineering">
  2FA significantly raises the bar for account compromise, but it doesn't eliminate phishing risk entirely. Brief your team on recognizing phishing attempts that try to capture both passwords and 2FA codes in real time. Remind members that Pharen Hub support will never ask for their 2FA codes.
</Accordion>

<Accordion title="Keep recovery codes in a safe place">
  Recovery codes are the safety net when a member loses their second factor — but they're also a potential attack vector if stolen. Advise members to store recovery codes in a password manager, not in notes apps, email, or messaging platforms. If a member suspects their recovery codes have been compromised, they should generate new ones immediately from **Account Settings → Security → Recovery Codes → Regenerate**.
</Accordion>


# Chat with agent
Source: https://docs.pharen.app/api-reference/agents/chat-agent

openapi.json POST /api/agents/{agent_uuid}/chat/
Send a message to an agent and receive a response. Requires the `agents:run` scope.

Sends a message to an agent. The endpoint streams the model response. API keys must explicitly allow streaming when a streaming response is requested by the client.

<Note>
  Required API key scope: `agents:run`.
</Note>

## Path parameters

<ParamField type="string">
  UUID of the agent.
</ParamField>

## Body parameters

<ParamField type="string">
  User message for the agent. Maximum length is `32000` characters.
</ParamField>

<ParamField type="string">
  Existing conversation UUID. If omitted, Pharen starts a new conversation.
</ParamField>

<ParamField type="string">
  Optional model override. If omitted, the agent default model is used.
</ParamField>

<ParamField type="boolean">
  Whether to enable model reasoning when supported by the selected model.
</ParamField>

<ParamField type="boolean">
  Whether the agent should produce an artifact-oriented response.
</ParamField>

<ParamField type="string">
  Optional artifact category hint.
</ParamField>

<ParamField type="object">
  Optional JSON context from the caller's current page.
</ParamField>

## Example body

```json theme={null}
{
  "message": "Summarize the open tasks for this workspace.",
  "enable_thinking": true
}
```


# List agents
Source: https://docs.pharen.app/api-reference/agents/list-agents

openapi.json GET /api/agents/
Fetch agents available to the API key. Requires the `agents:read` scope.

Returns agents visible to the key creator. Use this endpoint to discover agent UUIDs before sending chat requests.

<Note>
  Required API key scope: `agents:read`.
</Note>

## Query parameters

<ParamField type="string">
  Team UUID for team-scoped keys.
</ParamField>

## Response

<ResponseField name="id" type="string">
  Agent UUID.
</ResponseField>

<ResponseField name="name" type="string">
  Agent name.
</ResponseField>

<ResponseField name="description" type="string">
  Agent description.
</ResponseField>

<ResponseField name="is_active" type="boolean">
  Whether the agent is active.
</ResponseField>


# Manage Pharen Hub API keys: create, scope, and rotate
Source: https://docs.pharen.app/api-reference/api-keys

Create, scope, store, rotate, and revoke Pharen Hub API keys for programmatic access from scripts, internal tools, and backend services.

API keys let trusted scripts, internal tools, and backend services call Pharen Hub without an interactive login. Create keys for specific automation jobs, give each key only the access it needs, and rotate them when ownership or risk changes.

<Warning>
  Treat API keys like passwords. Do not commit them to source control, paste them into client-side code, or log them in application output.
</Warning>

## Create a key

You create API keys in Pharen Hub.

<Steps>
  <Step title="Open API key settings">
    Go to **Settings → API Keys** in your workspace.
  </Step>

  <Step title="Name the key">
    Choose a short, specific name such as `calendar-sync-production` or `docs-import-worker`.
  </Step>

  <Step title="Choose the access target">
    Select **Entire workspace** for workspace-wide automation, or **Selected teams** when the integration should only work inside specific teams.
  </Step>

  <Step title="Select scopes">
    Choose the minimum permissions the integration needs. You can grant access to lists, docs, calendar, workflows, and agents separately.
  </Step>

  <Step title="Copy the key once">
    Copy the generated key immediately. Pharen only shows the full key once.
  </Step>
</Steps>

## Try API key requests

The endpoint pages in this reference use Mintlify's interactive playground. Add your key as a Bearer token, fill the parameters, and run a request directly from the docs.

In **Try it**, paste the key into **Authorization**. The playground defaults **baseUrl** to `https://pharen.app`. To test a local backend, replace that value with `http://localhost:8000`.

<CardGroup>
  <Card title="List calendar events" icon="calendar" href="/api-reference/calendar/list-events">
    Test a `calendar:read` key against a read-only endpoint.
  </Card>

  <Card title="Run workflow" icon="workflow" href="/api-reference/workflows/run-workflow">
    Test a `workflows:run` key against an execution endpoint.
  </Card>

  <Card title="List documents" icon="file-text" href="/api-reference/docs/list-documents">
    Test a `docs:read` key against Pharen Docs.
  </Card>

  <Card title="Chat with agent" icon="bot" href="/api-reference/agents/chat-agent">
    Test an `agents:run` key against an agent chat endpoint.
  </Card>
</CardGroup>

## Use a key

Send the key with every request. Bearer authentication is recommended:

```bash theme={null}
curl https://pharen.app/api/calendar/events/ \
  --request GET \
  --header "Authorization: Bearer $PHAREN_API_KEY" \
  --header "Content-Type: application/json"
```

You can also use the `X-API-Key` header for server-to-server tools that cannot set an `Authorization` header:

```bash theme={null}
curl https://pharen.app/api/calendar/events/ \
  --request GET \
  --header "X-API-Key: $PHAREN_API_KEY"
```

<Info>
  API keys generated by Pharen start with `phk_`. Store the full value in a secrets manager or an environment variable such as `PHAREN_API_KEY`.
</Info>

## Permission levels

Lists, Docs, and Calendar use four permission levels.

| Level       | Included scopes                                                          | Use this for                                                 |
| ----------- | ------------------------------------------------------------------------ | ------------------------------------------------------------ |
| None        | No scopes                                                                | Keys that should not access the resource.                    |
| Read        | `resource:read`                                                          | Reports, sync jobs, exports, and read-only dashboards.       |
| Write       | `resource:read`, `resource:create`, `resource:update`                    | Importers and two-way sync jobs that should not delete data. |
| Full access | `resource:read`, `resource:create`, `resource:update`, `resource:delete` | Administrative jobs that are allowed to remove data.         |

Workflows and Agents use focused run permissions.

| Resource  | Read             | Run                               |
| --------- | ---------------- | --------------------------------- |
| Workflows | `workflows:read` | `workflows:read`, `workflows:run` |
| Agents    | `agents:read`    | `agents:read`, `agents:run`       |

## Scope reference

| Scope             | Allows                                                                            |
| ----------------- | --------------------------------------------------------------------------------- |
| `lists:read`      | List saved list data, fields, rows, cells, and views.                             |
| `lists:create`    | Create new lists.                                                                 |
| `lists:update`    | Update lists, fields, rows, cells, views, and sharing metadata.                   |
| `lists:delete`    | Delete lists or list records.                                                     |
| `docs:read`       | Read documents, collections, versions, files, and access metadata.                |
| `docs:create`     | Create documents and collections.                                                 |
| `docs:update`     | Update documents, collections, files, shares, versions, and activity links.       |
| `docs:delete`     | Delete or restore deleted documents and collections.                              |
| `calendar:read`   | Read calendar sources, events, and exports.                                       |
| `calendar:create` | Create calendar sources, events, and imports.                                     |
| `calendar:update` | Update calendar sources and events.                                               |
| `calendar:delete` | Delete calendar sources and events.                                               |
| `workflows:read`  | Read workflow definitions, versions, validation results, and execution plans.     |
| `workflows:run`   | Execute workflows. Streaming execution also requires streaming access on the key. |
| `agents:read`     | Read agents, catalog data, tools, conversations, and logs.                        |
| `agents:run`      | Send agent chat requests or cancel active agent runs.                             |

<Note>
  A key can only do what both the key scopes and the creator's account permissions allow. If the creator loses access, their keys lose that access too.
</Note>

## Workspace and team scope

Every key belongs to one workspace. A workspace-wide key can operate anywhere its scopes and creator permissions allow inside that workspace.

Team-scoped keys are stricter. They only match requests that target one of the selected teams. Use team scope for production automations owned by a single team or department.

## Expiration and rotation

An expiration date is optional, but recommended for temporary jobs and vendor integrations. For long-running production jobs, rotate keys periodically.

1. Create a replacement key with the same or narrower scopes.
2. Deploy the new key to your secrets manager.
3. Confirm the integration works with the new key.
4. Revoke the old key in **Settings → API Keys**.

## Common errors

| Status             | Meaning                                                         | What to do                                                                     |
| ------------------ | --------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| `401 Unauthorized` | The key is missing, malformed, expired, revoked, or invalid.    | Check the header, secret value, and key status.                                |
| `403 Forbidden`    | The key is valid but lacks the required scope or target access. | Grant the missing scope, choose the right team target, or use a different key. |
| `404 Not Found`    | The target resource is not visible to the key creator.          | Confirm the resource exists and the creator still has access.                  |

## Best practices

* Create one key per integration or environment.
* Name keys by job and environment, not by person.
* Prefer **Read** or **Write** over **Full access** unless deletion is required.
* Use team scope when an automation belongs to one team.
* Store keys in a secrets manager.
* Revoke unused keys immediately.


# Pharen API Authentication: API Keys and Bearer Tokens
Source: https://docs.pharen.app/api-reference/authentication

Authenticate every Pharen API request with a Bearer token API key or the X-API-Key header, including curl, Python, and Node.js code examples.

Every request you make to the Pharen API must be authenticated. Send a scoped API key as a Bearer token in the `Authorization` header. Without a valid key, the API returns `401 Unauthorized` and does not process the request.

## Generate an API key

You manage your API keys from inside the Pharen Hub dashboard:

1. Sign in to [pharen.app](https://pharen.app).
2. Navigate to **Settings → API Keys** in the left sidebar.
3. Click **New API Key**.
4. Give your key a descriptive name (e.g., `ci-pipeline` or `data-export-script`).
5. Choose an access target and scopes.
6. Copy the key immediately — it is only shown once in full at creation time.

<Warning>
  Treat your API key like a password. Anyone who holds it can make API calls on behalf of your workspace. Do not commit keys to source control, log them, or expose them in client-side code. Use environment variables or a secrets manager instead.
</Warning>

For a full walkthrough of key scopes, team targets, rotation, and storage, see [API keys](/api-reference/api-keys).

## Use your API key

Pass your API key as a Bearer token in the `Authorization` header of every HTTP request:

```bash theme={null}
Authorization: Bearer YOUR_API_KEY
```

The examples below call the calendar events endpoint. You can also use the interactive playground on each endpoint page.

<CodeGroup>
  ```bash curl theme={null}
  curl https://pharen.app/api/calendar/events/ \
    --request GET \
    --header "Authorization: Bearer YOUR_API_KEY" \
    --header "Content-Type: application/json"
  ```

  ```javascript JavaScript (fetch) theme={null}
  const response = await fetch("https://pharen.app/api/calendar/events/", {
    method: "GET",
    headers: {
      "Authorization": `Bearer ${process.env.PHAREN_API_KEY}`,
      "Content-Type": "application/json",
    },
  });

  if (!response.ok) {
    const error = await response.json();
    throw new Error(error.error.message);
  }

  const data = await response.json();
  console.log(data);
  ```

  ```python Python (requests) theme={null}
  import os
  import requests

  headers = {
      "Authorization": f"Bearer {os.environ['PHAREN_API_KEY']}",
      "Content-Type": "application/json",
  }

  response = requests.get(
      "https://pharen.app/api/calendar/events/",
      headers=headers,
  )
  response.raise_for_status()

  data = response.json()
  print(data)
  ```
</CodeGroup>

If your HTTP client cannot set a Bearer token, send the same key through `X-API-Key`:

```bash theme={null}
X-API-Key: YOUR_API_KEY
```

<Info>
  In the examples above, the API key is read from an environment variable (`PHAREN_API_KEY`). This is the recommended approach — it keeps secrets out of your codebase and makes rotating keys straightforward.
</Info>

## Authentication Errors

If your request cannot be authenticated, the API responds with one of the following errors:

| Status             | Code                       | Cause                                                                                 |
| ------------------ | -------------------------- | ------------------------------------------------------------------------------------- |
| `401 Unauthorized` | `missing_token`            | No `Authorization` header was present in the request.                                 |
| `401 Unauthorized` | `invalid_token`            | The token provided is malformed, expired, or does not exist.                          |
| `403 Forbidden`    | `insufficient_permissions` | The key is valid but lacks permission to access this resource or perform this action. |

An error response looks like this:

```json theme={null}
{
  "error": {
    "code": "invalid_token",
    "message": "The API key provided is invalid or has been revoked."
  }
}
```

## Revoking a Key

If a key is compromised or no longer needed, revoke it immediately from **Settings → API Keys** in the dashboard. Revoked keys stop working instantly. You can generate a replacement key at any time without disrupting other keys.

<Note>
  Rotating keys periodically is a good security practice, even if you have no reason to suspect a compromise. Consider setting a reminder to rotate production keys every 90 days.
</Note>

## Key scopes and permissions

API keys combine explicit key scopes with the permissions of the workspace member who created them. If that member's role is changed or their account is deactivated, all keys they created reflect the updated permissions or stop working.

For production integrations, create keys under a dedicated service account with only the scopes your integration requires. See the [API keys scope reference](/api-reference/api-keys#scope-reference) for the full list.


# Create calendar event
Source: https://docs.pharen.app/api-reference/calendar/create-event

openapi.json POST /api/calendar/events/
Create a local calendar event from scheduling automations or import jobs. Requires the `calendar:create` scope.

Creates a new local calendar event. Use this endpoint for scheduling automation and imports that already know the target calendar.

<Note>
  Required API key scope: `calendar:create`.
</Note>

## Body parameters

<ParamField type="string">
  UUID of the calendar where the event should be created.
</ParamField>

<ParamField type="string">
  Event title. Empty titles are allowed.
</ParamField>

<ParamField type="string">
  ISO 8601 datetime for the event start.
</ParamField>

<ParamField type="string">
  ISO 8601 datetime for the event end.
</ParamField>

<ParamField type="boolean">
  Whether this is an all-day event.
</ParamField>

<ParamField type="string">
  Event location.
</ParamField>

<ParamField type="string">
  Meeting or conference URL.
</ParamField>

<ParamField type="string">
  Internal notes for the event.
</ParamField>

<ParamField type="integer">
  Reminder offset in minutes. The maximum value is `10080`.
</ParamField>

<ParamField type="array">
  Attendee objects for the event.
</ParamField>

## Example body

```json theme={null}
{
  "calendar_id": "2de9d72d-9077-4cb6-9836-5fc821cf1b71",
  "title": "Quarterly planning",
  "starts_at": "2026-07-03T09:00:00Z",
  "ends_at": "2026-07-03T10:00:00Z",
  "location": "Berlin",
  "conference_url": "https://meet.example.com/planning"
}
```

## Response

Returns the created calendar event with the same shape as [List events](/api-reference/calendar/list-events).


# List calendar events
Source: https://docs.pharen.app/api-reference/calendar/list-events

openapi.json GET /api/calendar/events/
Fetch calendar events for sync jobs, dashboards, and reporting tools. Requires the `calendar:read` scope.

Returns calendar events for the authenticated key. Use this endpoint for sync jobs, dashboards, and reporting tools that need read-only calendar data.

<Note>
  Required API key scope: `calendar:read`.
</Note>

## Query parameters

<ParamField type="string">
  ISO 8601 datetime for the beginning of the event window. If omitted, Pharen uses a bounded default range.
</ParamField>

<ParamField type="string">
  ISO 8601 datetime for the end of the event window. Must be after `range_start`.
</ParamField>

<ParamField type="string">
  Team UUID for team-scoped keys. Workspace-wide keys can omit this unless the integration is intentionally targeting one team.
</ParamField>

## Response

<ResponseField name="id" type="string">
  Event UUID.
</ResponseField>

<ResponseField name="calendar_id" type="string">
  UUID of the calendar that owns the event.
</ResponseField>

<ResponseField name="title" type="string">
  Event title.
</ResponseField>

<ResponseField name="starts_at" type="string">
  Event start time as an ISO 8601 datetime.
</ResponseField>

<ResponseField name="ends_at" type="string">
  Event end time as an ISO 8601 datetime.
</ResponseField>

<ResponseField name="is_all_day" type="boolean">
  Whether the event spans the full day.
</ResponseField>

<ResponseField name="location" type="string">
  Event location, if set.
</ResponseField>

<ResponseField name="conference_url" type="string">
  Meeting or conference URL, if set.
</ResponseField>

<ResponseField name="attendees" type="array">
  Attendee objects associated with the event.
</ResponseField>


# List documents
Source: https://docs.pharen.app/api-reference/docs/list-documents

openapi.json GET /api/kb/documents/
Fetch document and collection metadata available to the API key. Requires the `docs:read` scope.

Returns Pharen Docs documents visible to the key creator. Use this endpoint for document inventories, search indexing jobs, and export tools.

<Note>
  Required API key scope: `docs:read`.
</Note>

## Query parameters

<ParamField type="string">
  Team UUID for team-scoped keys.
</ParamField>

<ParamField type="string">
  Optional collection UUID to limit results to one collection.
</ParamField>

<ParamField type="string">
  Search term for document names and visible metadata.
</ParamField>

<ParamField type="integer">
  Page number for paginated responses.
</ParamField>

## Response

<ResponseField name="count" type="integer">
  Total number of matching documents.
</ResponseField>

<ResponseField name="results" type="array">
  Document records visible to the key.
</ResponseField>


# Pharen Hub REST API reference: base URL and authentication
Source: https://docs.pharen.app/api-reference/introduction

Get started with the Pharen Hub REST API: base URL, Bearer token authentication, scopes, rate limits, and the interactive Mintlify playground.

The Pharen REST API lets trusted backend services, sync jobs, and internal tools work with your Pharen Hub workspace. The API reference uses Mintlify's interactive playground, so you can inspect request parameters, generate code examples, and try scoped API-key calls from the docs.

## Base URL

All API requests are made to the following base URL:

```bash theme={null}
https://pharen.app/api
```

Every endpoint in this reference is relative to this base. For example, the full URL for listing calendar events is `https://pharen.app/api/calendar/events/`.

Each endpoint page has a **Try it** panel. Set **Authorization** to your Bearer token, then use the **baseUrl** field in the request URL bar to choose the server you want to test.

For local testing, replace the default `https://pharen.app` value with `http://localhost:8000`. Include `http://` or `https://` so the playground can build a valid URL. Playground requests are sent directly from your browser, so your local backend must be running and allow requests from the docs site.

## Authentication

Create a scoped API key in **Settings -> API Keys**, then send it as a Bearer token:

```bash theme={null}
Authorization: Bearer phk_...
```

If your client cannot set an `Authorization` header, send the same key through `X-API-Key`.

<CardGroup>
  <Card title="Create and scope keys" icon="key" href="/api-reference/api-keys">
    Learn how API key scopes, team targets, expiration, and rotation work.
  </Card>

  <Card title="List calendar events" icon="calendar" href="/api-reference/calendar/list-events">
    Try a read-only API-key request in the interactive playground.
  </Card>
</CardGroup>

## Request format

The API accepts JSON-encoded request bodies. For any request that includes a body (`POST`, `PUT`), you must set the `Content-Type` header to `application/json`.

```bash theme={null}
Content-Type: application/json
```

All path and query parameters should be URL-encoded where applicable.

## Response format

Every response from the API is JSON-encoded. Successful responses return the requested resource object or a list of resource objects. The `Content-Type` of all responses is `application/json`.

A typical single-resource response looks like this:

```json theme={null}
{
    "id": "2de9d72d-9077-4cb6-9836-5fc821cf1b71",
    "title": "Quarterly planning",
    "starts_at": "2026-07-03T09:00:00Z",
    "ends_at": "2026-07-03T10:00:00Z"
  }
```

List responses return an array of resource objects alongside pagination metadata:

```json theme={null}
{
  "data": [...],
  "total": 42,
  "page": 1,
  "per_page": 20
}
```

## HTTP status codes

The API uses standard HTTP status codes to communicate the outcome of every request.

| Code                        | Meaning                                                                                        |
| --------------------------- | ---------------------------------------------------------------------------------------------- |
| `200 OK`                    | The request succeeded and the response body contains the result.                               |
| `201 Created`               | A new resource was created successfully. The response body contains the new resource.          |
| `204 No Content`            | The request succeeded and there is no response body (e.g., after a deletion).                  |
| `400 Bad Request`           | The request was malformed or missing required parameters. Check the error message for details. |
| `401 Unauthorized`          | The request did not include valid authentication credentials.                                  |
| `403 Forbidden`             | Your API key is valid but does not have permission to perform this action.                     |
| `404 Not Found`             | The requested resource does not exist or has been deleted.                                     |
| `422 Unprocessable Entity`  | The request was well-formed but contained semantic validation errors.                          |
| `500 Internal Server Error` | Something went wrong on Pharen's servers. If this persists, contact support.                   |

## Error objects

When a request fails (4xx or 5xx), the response body contains a structured error object to help you diagnose the problem:

```json theme={null}
{
  "error": {
    "code": "validation_error",
    "message": "The 'title' field is required.",
    "details": {
      "field": "title"
    }
  }
}
```

| Field           | Description                                                                        |
| --------------- | ---------------------------------------------------------------------------------- |
| `error.code`    | A machine-readable string identifying the error type.                              |
| `error.message` | A human-readable explanation of what went wrong.                                   |
| `error.details` | An optional object with additional context, such as which field failed validation. |

## Rate limiting

To ensure fair usage and platform stability, the API enforces rate limits on all endpoints. By default, your API key is limited to **1,000 requests per minute**.

When you exceed the rate limit, the API returns a `429 Too Many Requests` response. The response includes the following headers to help you manage your request cadence:

| Header                  | Description                                             |
| ----------------------- | ------------------------------------------------------- |
| `X-RateLimit-Limit`     | The maximum number of requests allowed per minute.      |
| `X-RateLimit-Remaining` | The number of requests remaining in the current window. |
| `X-RateLimit-Reset`     | The Unix timestamp at which the current window resets.  |

<Warning>
  Implement exponential backoff in your integration when you receive `429` responses. Continuing to send requests at a high rate after being rate-limited may result in temporary suspension of your API key.
</Warning>

## Make your first request

Here's a minimal example that authenticates and retrieves calendar events:

```bash theme={null}
curl https://pharen.app/api/calendar/events/ \
  --request GET \
  --header "Authorization: Bearer YOUR_API_KEY" \
  --header "Content-Type: application/json"
```

Replace `YOUR_API_KEY` with the key you generate in the [Pharen Hub dashboard](https://pharen.app/settings/api). See [Authentication](/api-reference/authentication) and [API keys](/api-reference/api-keys) for the full setup flow.


# List saved lists
Source: https://docs.pharen.app/api-reference/lists/list-lists

openapi.json GET /api/lists/
Fetch list metadata and saved list data available to the API key. Requires the `lists:read` scope.

Returns saved lists the key creator can access. Use this endpoint before reading list rows, fields, views, or linked automation data.

<Note>
  Required API key scope: `lists:read`.
</Note>

## Query parameters

<ParamField type="string">
  Team UUID. Required for team-scoped keys and useful when you want to list one team's data.
</ParamField>

<ParamField type="string">
  Sort expression. Supported fields include `created_at`, `updated_at`, `name`, `field_count`, and `row_count`. Prefix with `-` for descending order.
</ParamField>

<ParamField type="integer">
  Page number for paginated responses.
</ParamField>

<ParamField type="integer">
  Number of lists per page.
</ParamField>

## Response

<ResponseField name="count" type="integer">
  Total number of matching lists.
</ResponseField>

<ResponseField name="next" type="string">
  URL for the next page, if one exists.
</ResponseField>

<ResponseField name="previous" type="string">
  URL for the previous page, if one exists.
</ResponseField>

<ResponseField name="results" type="array">
  List records visible to the key.
</ResponseField>


# List workflows
Source: https://docs.pharen.app/api-reference/workflows/list-workflows

openapi.json GET /api/flow/workflows/
Fetch workflow definitions available to the API key. Requires the `workflows:read` scope.

Returns workflows in the selected team. Workflow endpoints are team-oriented, so include `team_id` for predictable results.

<Note>
  Required API key scope: `workflows:read`.
</Note>

## Query parameters

<ParamField type="string">
  Team UUID that owns the workflows.
</ParamField>

<ParamField type="string">
  Search workflows by name, description, or owner.
</ParamField>

<ParamField type="string">
  Filter by workflow status.
</ParamField>

<ParamField type="string">
  Sort by `name`, `updated_at`, or `created_at`. Prefix with `-` for descending order.
</ParamField>

<ParamField type="integer">
  Page number for paginated responses.
</ParamField>

<ParamField type="integer">
  Number of workflows per page. Maximum value is `100`.
</ParamField>

## Response

<ResponseField name="count" type="integer">
  Total number of matching workflows.
</ResponseField>

<ResponseField name="results" type="array">
  Workflow records visible to the key.
</ResponseField>


# Run workflow
Source: https://docs.pharen.app/api-reference/workflows/run-workflow

openapi.json POST /api/flow/workflows/{workflow_uuid}/execute/
Execute a workflow with optional JSON input. Requires the `workflows:run` scope.

Executes a published workflow and returns node-level progress information. Streaming responses are available only when the key was created with streaming access.

<Note>
  Required API key scope: `workflows:run`.
</Note>

## Path parameters

<ParamField type="string">
  UUID of the workflow to execute.
</ParamField>

## Query parameters

<ParamField type="string">
  Team UUID that owns the workflow.
</ParamField>

<ParamField type="boolean">
  Set to `true` to request a streaming response. The key must allow streaming.
</ParamField>

## Body parameters

<ParamField type="object">
  Values for workflow input variables.
</ParamField>

<ParamField type="string">
  Trigger label for the run. Defaults to `manual`.
</ParamField>

<ParamField type="string">
  Locale hint used by nodes that produce localized output.
</ParamField>

## Example body

```json theme={null}
{
  "trigger_type": "api",
  "inputs": {
    "company": "Pharen",
    "priority": "high"
  }
}
```


# AI Credits in Pharen Hub: How They Work and How to Add Them
Source: https://docs.pharen.app/billing/ai-credits

Learn how Pharen Hub AI credits are consumed, how to top up with prepaid balance or a monthly subscription, and what happens when credits run out.

AI credits are the currency that powers every AI-driven action in Pharen Hub — from running language model steps inside workflows to generating content, classifying data, and processing documents. Credits are separate from your base workspace plan, which means you pay for AI usage on top of your plan's core features. This design keeps base plan pricing predictable while letting you scale AI usage independently as your needs grow.

## What Are AI Credits?

Every time Pharen Hub calls an AI model on your behalf, it draws from your workspace's credit balance. The exact number of credits consumed depends on the operation: a short text classification step uses fewer credits than generating a long-form document or running a complex reasoning chain. You can monitor your credit consumption in real time from **Workspace Settings → AI Credits**.

<Info>
  AI credits are scoped to a workspace. If you have multiple workspaces, each one maintains its own credit balance and its own top-up or subscription settings.
</Info>

### What Consumes AI Credits?

* **Workflow AI steps** — any step in a workflow that invokes an AI model (text generation, summarization, classification, extraction, etc.)
* **In-workspace AI actions** — using AI features directly in the Pharen Hub interface, such as drafting list record content or asking the AI assistant questions about your data
* **Bulk AI operations** — running AI transformations across large sets of list records

Standard workflow logic — triggers, conditionals, data mapping, and integrations — does **not** consume AI credits.

## Adding AI Credits

You have two ways to maintain a credit balance in your workspace: a one-time prepaid top-up, or an ongoing monthly subscription. Both options are available from **Workspace Settings → AI Credits → Add Credits**.

<CardGroup>
  <Card title="Prepaid Balance" icon="coins">
    Purchase a fixed block of AI credits whenever you need them. Credits are added to your balance immediately after payment and never expire. This option is ideal if your AI usage is irregular or project-based.

    **Good for:**

    * Sporadic or burst AI usage
    * Testing and prototyping
    * Workspaces where AI usage is hard to predict
  </Card>

  <Card title="Monthly Subscription" icon="calendar-check">
    Subscribe to a recurring monthly credit allocation that replenishes automatically on your billing date. You'll always start each month with a fresh top-up, making budgeting straightforward.

    **Good for:**

    * Consistent, predictable AI usage
    * Production workflows that run regularly
    * Teams that want to avoid manual top-ups
  </Card>
</CardGroup>

<Tip>
  You can use both options at once. For example, subscribe to a monthly allocation to cover baseline usage and keep a prepaid balance as a buffer for unexpectedly busy months.
</Tip>

### Plan Availability

| Plan       | Prepaid Credits  | Monthly Subscription |
| ---------- | ---------------- | -------------------- |
| Free       | ✓                | —                    |
| Starter    | ✓                | ✓                    |
| Team       | ✓                | ✓                    |
| Pro        | ✓                | ✓                    |
| Enterprise | Flexible billing | Flexible billing     |

<Note>
  Enterprise workspaces can arrange AI credit billing in any structure that suits them — prepaid blocks, monthly commitments, or usage-based invoicing. Talk to your account manager to configure this.
</Note>

## Monitoring Your Credit Balance

You can check your current balance and usage history at any time:

1. Open **Workspace Settings** from the left sidebar.
2. Navigate to the **AI Credits** tab.
3. View your current balance, this month's consumption, and a breakdown by workflow or feature.

You can also set up **low-balance alerts** to receive an email notification when your credits fall below a threshold you define. This helps you avoid unexpected disruptions to AI-powered workflows.

## What Happens When Credits Run Out?

If your AI credit balance reaches zero, Pharen Hub will pause any workflow steps or actions that require an AI model. The behavior depends on where credits run out:

* **During a workflow run** — the AI step fails, and the workflow is marked as failed. Other non-AI steps in the same workflow are not affected if they appear before the failing step.
* **During a manual AI action** — the action is blocked and you'll see an in-app prompt to top up your balance.
* **Scheduled or automated workflows** — the run is attempted, and if credits are insufficient, the run fails and you receive an email notification.

<Note>
  Workflow runs that fail due to insufficient credits still count against your plan's monthly workflow run allowance, since the run was initiated and partially executed.
</Note>

### Resuming After Running Out

Once you add credits — either via a prepaid top-up or by ensuring your monthly subscription renews — workflows will resume processing on the next trigger or scheduled run. Failed runs are not automatically retried; you'll need to re-trigger them manually or wait for the next scheduled execution.

To avoid disruptions in production:

* Enable **low-balance email alerts** in the AI Credits settings
* Consider pairing a monthly subscription with a prepaid buffer
* Review your AI usage trends monthly in **Workspace Settings → AI Credits → Usage History** to right-size your allocation


# Pharen Hub Billing FAQ: Plans, Credits, and Pricing Answers
Source: https://docs.pharen.app/billing/faq

Answers to the most common billing questions about Pharen Hub — plan selection, AI credits, workflow runs, list limits, and pricing discounts.

Choosing the right plan and understanding what counts toward your limits are decisions that come up for every workspace owner. The questions below cover the most common billing and pricing topics so you can make informed choices without having to dig through settings to find out how things work.

<AccordionGroup>
  <Accordion title="Which plan is right for me?">
    The best starting point is the size of your team and how heavily you plan to use workflows and AI.

    * **Free** is the right choice if you're evaluating Pharen Hub solo, building a prototype, or running a very lightweight personal project. There's no time limit on the free plan.
    * **Starter** fits freelancers or small collaborations — up to three people, one team, and a modest workflow allowance of 100 runs per month.
    * **Team** is a strong fit when you have multiple distinct workstreams that benefit from separate teams, and you need at least 500 workflow runs per month.
    * **Pro** is the recommended plan for organizations running production AI workflows or managing larger teams. At up to 50 members, 10 teams, and 5,000 workflow runs per month, it covers almost every non-enterprise use case.
    * **Enterprise** is for organizations that need unlimited scale, custom infrastructure, or bespoke billing terms.

    If you're uncertain, start on a lower plan and upgrade when you hit limits. Upgrades take effect immediately and your data carries over seamlessly.
  </Accordion>

  <Accordion title="Are there annual prices or discounts?">
    All published pricing is billed monthly, and there are currently no annual billing options listed on the pricing page. If you're on **Enterprise** and interested in a multi-month or annual commitment for a better rate, that's something you can discuss directly with the Pharen Hub team — custom billing terms are part of what makes the Enterprise tier flexible.

    For non-Enterprise plans, keep an eye on the [pricing page](/billing/plans) or the in-app notifications for any promotions or limited-time offers. Consulting services are billed at a flat **€130/hour** rate regardless of your plan tier.
  </Accordion>

  <Accordion title="How do AI credits work?">
    AI credits are a separate balance from your workspace plan. Whenever Pharen Hub calls an AI model — inside a workflow step, through a bulk list operation, or via an in-workspace AI feature — it deducts credits from your balance.

    You can fund your credit balance in two ways:

    * **Prepaid top-up:** Buy a block of credits whenever you need them. They're added immediately and never expire.
    * **Monthly subscription:** Set up a recurring credit allocation that tops up automatically each billing cycle.

    Free plan workspaces can purchase prepaid credits. Starter, Team, and Pro workspaces can use either prepaid or a monthly subscription. Enterprise workspaces can arrange flexible billing directly with the Pharen Hub team.

    If your credits run out, AI-dependent workflow steps will fail until you add more. See the [AI Credits page](/billing/ai-credits) for full details on consumption, monitoring, and low-balance alerts.
  </Accordion>

  <Accordion title="Can I change my plan later?">
    Yes — you can upgrade or downgrade your workspace plan at any time from **Workspace Settings → Billing**.

    **Upgrading** takes effect immediately. The moment your payment is processed, your workspace gains access to the higher plan's limits.

    **Downgrading** takes effect at the end of your current billing period. This gives you time to reduce usage (for example, removing members or archiving list records) if your current usage exceeds the lower plan's limits. If a conflict exists at the time the downgrade would take effect, Pharen Hub will prompt you to resolve it first.

    There are no penalties or fees for changing plans.
  </Accordion>

  <Accordion title="What counts as a workflow run?">
    A workflow run is counted each time a workflow is triggered and begins executing — regardless of whether it completes successfully or fails partway through. Each of the following counts as one run:

    * A scheduled workflow fires on its cron schedule
    * A webhook or external event triggers a workflow
    * You manually trigger a workflow from the interface or via the API
    * A workflow is triggered by another workflow (each child execution counts separately)

    Runs that are **not** counted include:

    * Workflows you disable before they fire
    * Test runs executed in the workflow editor's test mode (these use a separate test quota)

    If a run fails mid-execution — including because AI credits ran out — it still counts against your monthly allowance because the run was initiated and resources were consumed up to the point of failure.

    <Note>
      Your monthly run count resets on your billing date each month, not on the 1st of the calendar month.
    </Note>
  </Accordion>

  <Accordion title="How are list limits counted?">
    List records are counted as the total number of individual records stored across all lists in your workspace, at any given time. This is a **total at-rest count**, not a monthly throughput figure.

    For example, if you have three lists with 200, 150, and 100 records respectively, your workspace is using 450 records toward its limit.

    A few things to keep in mind:

    * **Deleting records frees up space.** If you're approaching your limit, archiving or removing records you no longer need will bring your count back down.
    * **Archived records still count.** Records moved to an archive state within a list remain in storage and count toward your total unless permanently deleted.
    * **Limits are workspace-wide.** There's no per-list cap — you're free to distribute your total allowance across as many lists as you like.

    If you hit your record limit, you won't be able to create new records until you delete existing ones or upgrade your plan. Existing records and workflows are not affected.

    | Plan       | List Record Limit |
    | ---------- | ----------------- |
    | Free       | 100 records       |
    | Starter    | 1,000 records     |
    | Team       | 5,000 records     |
    | Pro        | 50,000 records    |
    | Enterprise | Unlimited         |
  </Accordion>
</AccordionGroup>

<Info>
  Have a question that isn't covered here? Reach out through the [contact page](https://pharen.de/en/contact) or open a support ticket from inside your workspace — we're happy to help you figure out the right setup.
</Info>


# Pharen Hub Plans: Free, Starter, Team, Pro, Enterprise
Source: https://docs.pharen.app/billing/plans

Compare all Pharen Hub workspace plans from Free to Enterprise. Monthly pricing, workflow run limits, and member caps for every tier.

Pharen Hub bills per workspace, so every workspace you create can run on its own plan — mix and match to match the scale of each project. Whether you're a solo builder prototyping an idea or a large organization running production AI workflows, there's a plan sized for you. All plans are billed monthly with no long-term commitment required, and you can upgrade, downgrade, or cancel at any time.

## Plan Overview

<CardGroup>
  <Card title="Free" icon="seedling">
    **€0 / workspace / month**

    Perfect for individuals exploring Pharen Hub. One member, one team, and 10 workflow runs per month give you everything you need to evaluate the platform before committing.

    * 1 member
    * 1 team
    * 10 workflow runs/month
    * 100 list records total
    * AI credits available as add-on
  </Card>

  <Card title="Starter" icon="rocket">
    **€20 / workspace / month**

    Ideal for freelancers and small projects that need a bit more room. Add up to two collaborators, run more workflows, and keep a growing list database.

    * Up to 3 members
    * 1 team
    * 100 workflow runs/month
    * 1,000 list records total
    * Optional monthly AI credit subscription
  </Card>

  <Card title="Team" icon="users">
    **€50 / workspace / month**

    Built for small teams that need structured collaboration across multiple projects. Unlock multiple teams and a substantially larger workflow and record allowance.

    * Up to 5 members
    * Up to 3 teams
    * 500 workflow runs/month
    * 5,000 list records total
    * AI credits as add-on or subscription
  </Card>

  <Card title="Pro" icon="star">
    **€100 / workspace / month** ⭐ Recommended

    The sweet spot for growing organizations. Supports up to 50 members across 10 teams, with generous workflow and record limits purpose-built for serious AI and automation usage.

    * Up to 50 members
    * Up to 10 teams
    * 5,000 workflow runs/month
    * 50,000 list records total
    * Built for advanced AI and workflow usage
  </Card>

  <Card title="Enterprise" icon="building">
    **Custom pricing**

    Designed for organizations that need unlimited scale, dedicated infrastructure, or tailored billing arrangements. Contact us to build a plan around your requirements.

    * Unlimited members
    * Unlimited teams
    * Unlimited workflow runs
    * Unlimited list records
    * Flexible AI credit billing
    * Own infrastructure or custom setup available
  </Card>
</CardGroup>

## Feature Comparison

Use the table below to compare every plan at a glance.

| Feature                   | Free    | Starter                | Team                   | Pro                    | Enterprise       |
| ------------------------- | ------- | ---------------------- | ---------------------- | ---------------------- | ---------------- |
| **Monthly price**         | €0      | €20                    | €50                    | €100                   | Custom           |
| **Members**               | 1       | Up to 3                | Up to 5                | Up to 50               | Unlimited        |
| **Teams**                 | 1       | 1                      | Up to 3                | Up to 10               | Unlimited        |
| **Workflow runs / month** | 10      | 100                    | 500                    | 5,000                  | Unlimited        |
| **List records (total)**  | 100     | 1,000                  | 5,000                  | 50,000                 | Unlimited        |
| **AI credits**            | Add-on  | Add-on or subscription | Add-on or subscription | Add-on or subscription | Flexible billing |
| **Custom infrastructure** | —       | —                      | —                      | —                      | ✓                |
| **Consulting rate**       | €130/hr | €130/hr                | €130/hr                | €130/hr                | €130/hr          |

<Note>
  All limits apply per workspace. If you manage multiple projects, you can run each in its own workspace on whichever plan fits that project's needs.
</Note>

## Which Plan Is Right for You?

### You should choose **Free** if…

You're a solo user who wants to explore Pharen Hub, prototype an automation, or evaluate the platform before purchasing. The free plan has no time limit — it stays free as long as you like.

### You should choose **Starter** if…

You work with one or two collaborators on a contained project and need a reliable monthly workflow allowance without a large spend. It's a great entry point for freelancers managing client work or small side projects.

### You should choose **Team** if…

Your work involves multiple distinct teams or workstreams within one workspace. The jump to three teams and 500 workflow runs per month is meaningful for growing companies running recurring automations.

### You should choose **Pro** if…

You're running production AI workflows, managing a department-sized team, or pushing the limits of automation. Pro is the recommended plan for organizations that want access to the full power of Pharen Hub without negotiating a custom contract.

### You should choose **Enterprise** if…

Your organization needs unlimited scale, wants to run Pharen Hub on its own infrastructure, requires a custom billing model, or has compliance requirements that standard plans don't accommodate. [Contact us](https://pharen.de/en/contact) to start a conversation.

<Tip>
  Not sure which plan to pick? Start on **Free** or **Starter** and upgrade as your usage grows — you'll never lose your data when changing plans.
</Tip>

## Upgrading and Downgrading

You can change your workspace plan at any time from **Workspace Settings → Billing**. Upgrades take effect immediately; the new plan's limits are available as soon as the payment is processed. When you downgrade, your plan changes at the end of the current billing period, giving you time to reduce usage if needed.

If a downgrade would put you over the lower plan's limits (for example, you have 8 members on Pro and want to move to Team), Pharen Hub will prompt you to resolve those conflicts before the change is confirmed.

## Consulting Services

Hands-on implementation help, custom workflow builds, and strategic advice are available on all plans at a flat rate of **€130 per hour**. To request consulting time, reach out through the [contact page](https://pharen.de/en/contact) or speak to your account manager if you're on Enterprise.


# Core concepts of Pharen Hub: workspaces, docs, and agents
Source: https://docs.pharen.app/general/concepts

Understand the core building blocks of Pharen Hub: workspaces, docs, lists, channels, workflows, approvals, permissions, and AI agents in one shared space.

Pharen Hub is easiest to understand as a shared operating space for work.

Your team still has documents, structured data, communication, processes, and decisions. The difference is that those things are not scattered across disconnected tools. They live in one workspace, so humans and AI agents can use the same context.

## Workspace

A workspace is the top-level home for a team, company, department, or client environment.

It contains members, permissions, docs, lists, channels, workflows, AI settings, and agents. Most teams start with one workspace. Larger organizations may use multiple workspaces when they need clear separation between clients, subsidiaries, or sensitive environments.

<Tip>
  Name a workspace after the team or company that owns the work. Avoid temporary names like `Test` or `Demo` once real data enters the system.
</Tip>

## Docs

Docs are where narrative knowledge lives.

Use them for playbooks, briefs, policies, meeting notes, process descriptions, and research. A doc can stand alone, but it becomes more useful when it references lists, decisions, and workflows inside the same workspace.

Good docs answer:

* What are we doing?
* Why does this matter?
* Who owns the next step?
* Which data or workflow is connected to this?

## Lists

Lists store structured work.

Use them for CRM records, assets, invoices, onboarding tasks, content pipelines, support requests, or anything your team tracks repeatedly. A list can have fields, views, statuses, owners, dates, and records that AI agents can read or update.

<CardGroup>
  <Card title="Docs explain the work" icon="file-text">
    Use docs for context, decisions, instructions, and long-form knowledge.
  </Card>

  <Card title="Lists move the work" icon="list-checks">
    Use lists for records, states, ownership, and repeatable operational data.
  </Card>
</CardGroup>

## Channels and mail

Channels keep team communication close to the work. They are useful for project rooms, team updates, and lightweight discussion.

Mail connects external communication to workflows. Instead of treating email as a separate inbox, Pharen can use incoming messages as triggers, context, or audit trail entries.

## Workflows

Workflows turn repeatable processes into visible, controlled steps.

A workflow can start from a manual action, an email, a list change, a schedule, an API call, or an agent. It can route approvals, update records, send messages, call external systems, and keep an audit trail.

Use workflows when the process has rules:

* Something needs approval.
* A record changes state.
* A person or team must be notified.
* A repeated task should not be done manually every time.
* An agent needs a controlled execution path.

## Approvals

Approvals are how Pharen keeps automation accountable.

An agent or workflow can prepare work, but sensitive actions can still require a human decision. This is important for invoices, signatures, customer communication, access changes, and anything with financial or legal impact.

<Note>
  The goal is not to remove humans from the process. The goal is to remove repetitive coordination while keeping responsibility clear.
</Note>

## AI assistants and agents

AI assistants are interactive. You ask, they answer or help you perform a task.

AI agents are configured workers. They have instructions, access, tools, and a job to complete. They can be triggered manually, scheduled, or started from workflows.

The important part is context. A useful agent needs more than a prompt. It needs access to the right docs, list records, permissions, approvals, and previous decisions.

## How the pieces fit together

Here is a common pattern:

<Steps>
  <Step title="A request enters the workspace">
    A customer email, list record, form submission, or manual task starts the process.
  </Step>

  <Step title="Context is gathered">
    A workflow or agent reads the relevant docs, list records, and previous activity.
  </Step>

  <Step title="Work is prepared">
    The agent drafts a response, updates a record, extracts data, or proposes the next action.
  </Step>

  <Step title="A human approves when needed">
    The workflow asks the right person for a decision before anything sensitive happens.
  </Step>

  <Step title="The system leaves a trace">
    The final action, decision, and context remain visible in the workspace.
  </Step>
</Steps>

That is the product idea in one line: shared context, controlled execution, visible work.


# Local setup and contributing
Source: https://docs.pharen.app/general/local-setup

Set up the Pharen monorepo locally, run quality checks, and contribute changes with the same guardrails used by agents and maintainers.

This page is for people working on the Pharen Hub codebase.

The repo is a Django, Celery, PostgreSQL, Nuxt, Vue, TypeScript, Tailwind, and Nx monorepo. That sounds like a lot, so the local workflow is deliberately simple: use Make targets, keep changes scoped, and let Nx handle the frontend task graph.

## Repository layout

The app repo is `PharenIT/ELEV8-Labs`.

```text theme={null}
src/apps/app-server/        Django backend, API, Celery tasks, tests
src/apps/hub/               Nuxt Hub app
src/apps/realtime-service/  Realtime collaboration service
src/packages/               Shared frontend packages
src/nx.json                 Nx workspace configuration
Makefile                    Main developer command surface
.quality-rules.json         File and symbol size limits
scripts/quality-guardrails.mjs
```

## Core rule

Use Make targets from the repo root.

```bash theme={null}
make up
make down
make restart
make logs
make lint
make test
make quality
```

Do not call raw Docker, pnpm, uv, pytest, or Nx commands unless you are debugging the wrapper itself. The Makefile exists because the repo has Docker services, local Node tooling, backend virtual environments, and Nx targets that need to stay aligned.

## First local run

<Steps>
  <Step title="Install prerequisites">
    Use Node 22, pnpm 9, Python 3.12, Docker, and Docker Compose.

    If you use `nvm`, install the version from the repo `.nvmrc` before installing frontend dependencies.
  </Step>

  <Step title="Create the environment file">
    Copy the example environment file if your local checkout does not have one yet.

    ```bash theme={null}
    cp .env.example .env
    ```
  </Step>

  <Step title="Start the stack">
    Start the local services with:

    ```bash theme={null}
    make up
    ```
  </Step>

  <Step title="Run migrations">
    Prepare the database:

    ```bash theme={null}
    make migrate
    ```
  </Step>

  <Step title="Serve the Hub app">
    For local frontend development:

    ```bash theme={null}
    TMPDIR=/tmp make serve
    ```

    The short `TMPDIR` avoids a macOS Nuxt/Vite socket path issue where the dev server can otherwise return HTTP 500.
  </Step>
</Steps>

## Fast development loop

Use the smallest useful check while coding.

For frontend packages:

```bash theme={null}
make nx PKG=@pharen/chat T=test
make nx PKG=@pharen/chat T=lint
make nx PKG=@pharen/chat T=typecheck
```

For backend changes:

```bash theme={null}
make test-backend-file FILE=api/agents/tests/test_run_service.py
make test-backend-paths PATHS="api/agents api/workspace"
```

For a committed branch where Nx can compare against a base:

```bash theme={null}
make affected B=origin/test H=HEAD
```

Use the full selective handoff check before finishing:

```bash theme={null}
make quality
```

## Quality guardrails

Pharen has executable rules for file size and Python symbol size. They exist because agents and humans both tend to make files grow when pressure is high.

Run them with:

```bash theme={null}
make quality-rules
```

This calls the Nx target:

```bash theme={null}
cd src
pnpm exec nx run pharen-hub:quality-rules
```

The target runs `scripts/quality-guardrails.mjs` and reads `.quality-rules.json`.

### How the rule model works

Each rule has two levels:

* `target`: preferred size. Going above it prints a warning.
* `max`: hard ceiling. New code above it fails.

Existing files that already exceed a hard limit can be touched only if they do not get larger. This keeps legacy debt from blocking every change while still stopping files from growing forever.

## Size expectations

Default expectations:

* Backend production files stay near 300 lines and below 500 lines.
* Backend functions stay below 40 lines.
* Backend classes stay below 200 lines.
* Vue files stay below 500 lines.
* Frontend composables and services stay below 300 lines.
* Frontend stores stay below 400 lines.
* Test files may be larger, but should still be split by behavior or contract.

Split by responsibility, not by arbitrary line count.

## Where code belongs

Backend changes should follow this path:

```text theme={null}
model -> serializer -> service -> view -> url -> test -> migrate
```

Use these boundaries:

* Views handle request and response details.
* Services own writes and side effects.
* Selectors own reads and query shaping.
* Tasks own async execution and retry behavior.
* Tests cover permissions, tenant scope, validation, status codes, and response contracts.

Frontend changes should follow this path:

```text theme={null}
types -> mapper/service/composable -> component -> page
```

Use these boundaries:

* Services call APIs and external systems only.
* Mappers convert API shape to frontend shape.
* Composables own state and user actions.
* Components render UI and emit events.
* Pages compose route-level data and layout.

## Contributing checklist

Before opening a pull request or handing work to another maintainer:

<Steps>
  <Step title="Keep the change scoped">
    Avoid unrelated refactors. If a large legacy file needs splitting, do it around a real responsibility boundary.
  </Step>

  <Step title="Run targeted checks">
    Run the smallest frontend or backend checks that match the changed area.
  </Step>

  <Step title="Run quality rules">
    Run `make quality-rules` when you add files, split files, or touch already large modules.
  </Step>

  <Step title="Run handoff checks">
    Run `make quality` before handoff. Use `QUALITY_FORCE_ALL=1 make quality` for wide dependency, package, or config changes.
  </Step>

  <Step title="Document local noise">
    If a recurring local failure is unrelated to the change, document it in `.Agents.md` so the next developer or agent does not debug the same issue again.
  </Step>
</Steps>

<Note>
  Specialized review agents are opt-in. Use quality, security, performance, or pre-push review agents only when the user explicitly asks for that review gate or the work is being pushed or opened as a pull request.
</Note>


# Pharen Hub documentation
Source: https://docs.pharen.app/general/overview

Start here to understand Pharen Hub, the AI workspace that brings team work, knowledge, workflows, communication, and agents into one shared context.

Pharen Hub is an AI workspace for teams that want less tool chaos and more shared context.

It brings docs, lists, communication, workflows, approvals, and AI agents into one place. Not as another tab next to your existing stack, but as a workspace where people and agents can work from the same source of truth.

## What you can do here

This documentation helps you understand the product, set up a workspace, and build with Pharen without guessing where things belong.

<CardGroup>
  <Card title="Understand the workspace" icon="layout-dashboard" href="/general/concepts">
    Learn the core ideas behind workspaces, docs, lists, workflows, approvals, and agents.
  </Card>

  <Card title="Run it locally" icon="terminal" href="/general/local-setup">
    Set up the development repo, run quality checks, and contribute changes without fighting the toolchain.
  </Card>

  <Card title="Explore Hub modules" icon="boxes" href="/hub/overview">
    See how docs, lists, channels, mail, workflows, and AI agents fit together in the product.
  </Card>

  <Card title="Use the API" icon="code-2" href="/api-reference/introduction">
    Authenticate, create pages, update resources, and connect Pharen with your own systems.
  </Card>
</CardGroup>

## The short version

Most teams already have enough software.

They write in docs, plan in tasks, talk in chat, store process data in spreadsheets, approve work in email, and ask AI in a separate window. The work happens between those tools, so the context gets lost.

Pharen Hub is built around a different idea:

<Note>
  AI becomes useful when it can work inside the same context as the team.
</Note>

That means an agent can read the right document, inspect a list record, trigger a workflow, request approval, and leave a clear trace for the team. It also means humans stay in control. Agents prepare, route, summarize, and execute work, but approvals and permissions remain part of the system.

## Where to start

If you are new to Pharen, start with these pages:

<Steps>
  <Step title="Read the core concepts">
    Start with [Core concepts](/general/concepts) to understand the language used across the docs.
  </Step>

  <Step title="Set up a workspace">
    Use the [Quickstart](/quickstart) if you want to try the hosted product with a real workspace.
  </Step>

  <Step title="Set up local development">
    Use [Local setup](/general/local-setup) if you are contributing to the product or working with the monorepo.
  </Step>

  <Step title="Go deeper into a module">
    Jump into [Workflows](/workflows/overview), [Lists](/lists/overview), [Studio](/studio/overview), or [AI Agents](/hub/ai-agents) once you know what you want to build.
  </Step>
</Steps>

## A note on tone

Pharen is not documented as a generic SaaS dashboard. The product is opinionated: context matters, agents need guardrails, and work should not be scattered across five disconnected tools.

The docs follow that same line. They should be practical, clear, and human. If a page does not help someone make a real decision or complete a real task, it needs to be tightened.


# Pharen Hub AI Agents: Chat, Agents, and App Builder
Source: https://docs.pharen.app/hub/ai-agents

Build AI agents with custom skills, automate execution with handoffs, and create custom workflow apps — all inside the Pharen Hub AI layer.

The AI layer of Pharen Hub is where intelligence meets action. It's not a sidebar chatbot — it's a set of agents that share your workspace context, execute multi-step plans, hand work off to specialized peers, and power custom applications built with the App Builder. Every AI capability in Hub is connected to the same docs, lists, workflows, and channels your team uses daily, so the AI always has the context it needs to act — not just advise.

## AI Chat

Hub Chat is the conversational entry point to the AI layer. Open it from the left sidebar or press `Cmd+K` (Mac) / `Ctrl+K` (Windows/Linux).

Chat is workspace-aware. When you ask a question or give an instruction, the AI can see your docs, lists, and workflow state — and act on them — without you pasting in any context manually.

**What you can do in Chat:**

* Ask questions about docs, list records, or workflow statuses
* Instruct the AI to create, update, or move list records
* Draft documents, emails, or workflow messages
* Kick off a workflow or escalate a task to a named agent
* Get an execution plan for a goal and step through it interactively

<Tip>
  Be specific about scope. "Summarize last week's support requests with status 'Resolved'" gets a more useful answer than "summarize support." Hub Chat uses your active workspace context, so field names and list names you use in the product work directly in your prompts.
</Tip>

***

## AI Agents

Agents are autonomous AI workers you configure once and run on demand or on a schedule. Where Chat is interactive, agents are task-oriented: you define what they do, what they can access, and what skills they have — then let them run.

### Creating an Agent

<Steps>
  <Step title="Open Agents">
    Navigate to **AI → Agents** in the left sidebar and click **+ New Agent**.
  </Step>

  <Step title="Name and describe the agent">
    Give the agent a clear, role-based name (e.g., `support-triage`, `invoice-processor`, `doc-reviewer`). Write a brief description of its purpose — this is used by the handoff system when routing context between agents.
  </Step>

  <Step title="Define the agent's context">
    Select which workspace objects the agent has access to: specific docs, lists, workflows, channels, and mail addresses. Limiting context to what's relevant keeps the agent focused and reduces noise.
  </Step>

  <Step title="Add skills">
    Skills are capabilities beyond reading and writing workspace data. Add skills from the library or write custom code. See the Skills section below for details.
  </Step>

  <Step title="Set a trigger">
    Agents can be triggered manually, by a workflow step, by an incoming email, by a new list record, or on a cron schedule. Configure the trigger under the **Trigger** tab.
  </Step>

  <Step title="Test and activate">
    Use the **Run in Sandbox** button to test the agent against real workspace data without making live changes. When it behaves as expected, click **Activate**.
  </Step>
</Steps>

### Custom Skills

Skills extend what an agent can do beyond reading and writing Hub data. Each skill is a function the agent can call during its execution.

**Built-in skills include:**

* `ocr.extract` — Extract structured data from uploaded documents and images
* `mail.send` — Send an email from a connected mail address
* `webhook.post` — POST data to an external endpoint
* `list.query` — Execute a filtered query against any list
* `workflow.trigger` — Start a named workflow with a payload

**Custom skills** are JavaScript functions you write directly in the skill editor:

```javascript theme={null}
// Custom skill: look up vendor payment terms from an external API
export async function getVendorTerms({ vendorId }) {
  const response = await fetch(`https://api.yourcompany.com/vendors/${vendorId}/terms`);
  const data = await response.json();
  return {
    paymentDays: data.net_days,
    discountRate: data.early_discount_pct,
  };
}
```

The agent calls your function with the arguments it infers from context and incorporates the result into its reasoning. Skills can be shared across multiple agents.

***

## Opening the Workspace Programmatically

You can configure the Hub workspace in code — useful for custom integrations, scripted agent runs, and embedding Hub capabilities into your own applications. The `pharen.openWorkspace` call assembles a named workspace context from the objects you specify:

```javascript theme={null}
const hub = await pharen.openWorkspace({
  docs: ['ops-playbook'],
  builder: ['approval-app'],
  workflows: ['review-loop'],
  channels: ['launch-room'],
  mail: ['support@'],
  agents: ['support'],
});
```

Each key accepts an array of workspace object names:

| Key         | What it loads                                                                |
| ----------- | ---------------------------------------------------------------------------- |
| `docs`      | Named docs, made available to agents and the App Builder as readable context |
| `builder`   | App Builder apps to mount in this workspace session                          |
| `workflows` | Workflows that can be triggered from within this session                     |
| `channels`  | Channels the session can post to or read from                                |
| `mail`      | Connected mail addresses available for sending and receiving                 |
| `agents`    | Named agents that can be invoked or handed off to                            |

Once opened, the workspace object exposes methods for all Hub operations:

```javascript theme={null}
// Run an agent against the loaded context
const result = await hub.agents.support.run({
  task: 'Triage and categorize all open support requests created today',
});

// Trigger a workflow with a record payload
await hub.workflows['review-loop'].trigger({
  recordId: 'inv-00492',
  priority: 'high',
});

// Post a message to a channel
await hub.channels['launch-room'].post({
  text: `Review complete. ${result.summary}`,
});
```

<Note>
  The `pharen` SDK is available as an npm package (`npm install @pharen/sdk`) and as a Python package (`pip install pharen`). Both expose the same `openWorkspace` interface.
</Note>

***

## Execution Planning

Execution planning turns high-level goals into prioritized, actionable next steps. When you give an agent (or the Chat interface) a goal rather than a specific task, Hub's planning system breaks it into a sequence of steps, estimates dependencies, and begins executing in order.

**Example prompt:**

> "Process all invoices in the Pending OCR status: extract their data, validate against our vendor list, flag any that exceed €10,000 for manual review, and move the rest to Pending Approval."

The planner will produce steps like:

1. Query the Invoice list for records with status `Pending OCR`
2. For each record, call `ocr.extract` on the attached document
3. Match the extracted vendor name against the Vendor list
4. Flag records over €10,000 by setting their status to `Manual Review Required`
5. Move all remaining records to `Pending Approval`
6. Trigger the `review-loop` workflow for each approved batch

You can review the plan before execution, edit individual steps, or approve it and let the agent run autonomously.

***

## Agent Handoffs

Handoffs let you coordinate specialized agents. Instead of building one monolithic agent that does everything, you build focused agents for specific domains and let them pass context and ownership to each other as a task evolves.

### How Handoffs Work

When Agent A determines that the next phase of a task is better handled by Agent B, it initiates a handoff:

1. Agent A packages its current context — what it learned, what it did, what's pending.
2. Hub routes that context bundle to Agent B, which is configured for the next phase.
3. Agent B picks up exactly where Agent A left off, with no loss of information.
4. If Agent B needs to escalate back or hand off to a third specialist, it can do so.

### Configuring Handoffs

In an agent's configuration, open the **Handoffs** tab and define the conditions under which this agent should transfer to another:

```javascript theme={null}
// In the agent skill or configuration
export const handoffRules = [
  {
    condition: (context) => context.flaggedForLegal === true,
    targetAgent: 'legal-review',
    message: 'Invoice flagged for legal review due to unusual contract terms.',
  },
  {
    condition: (context) => context.amount > 50000,
    targetAgent: 'senior-approver',
    message: 'High-value invoice requires senior approval.',
  },
];
```

<Tip>
  Name your agents after their role, not their implementation. `legal-review` and `senior-approver` make handoff rules readable and make it easy to swap underlying models or logic without rewriting the routing.
</Tip>

***

## App Builder

The App Builder lets you create custom workflow applications inside Pharen Hub — without building and hosting a full web application. Apps are configured through a visual builder and can combine forms, list views, approval panels, and AI actions into a cohesive interface for a specific process.

### What You Can Build

<CardGroup>
  <Card title="Approval apps" icon="circle-check">
    A tailored interface for reviewers: the relevant doc context, the structured record, and one-click approve/reject — all in one screen.
  </Card>

  <Card title="Data entry apps" icon="pen-to-square">
    Custom forms that write directly to a List, with field validation, conditional logic, and AI pre-fill from uploaded documents.
  </Card>

  <Card title="Dashboard apps" icon="chart-bar">
    Real-time views of list data, workflow statuses, and agent activity — configured for a specific team or stakeholder.
  </Card>

  <Card title="Process apps" icon="diagram-project">
    Multi-step wizard interfaces that walk users through a process, triggering workflow steps at each stage.
  </Card>
</CardGroup>

### Building an App

<Steps>
  <Step title="Open the App Builder">
    Go to **AI → App Builder** and click **+ New App**.
  </Step>

  <Step title="Choose a template or start blank">
    Templates for common use cases (Invoice Approval, Support Triage, Onboarding Checklist) give you a working starting point. Or start from a blank canvas.
  </Step>

  <Step title="Add screens and components">
    Drag components onto the canvas: forms, list views, approval panels, text blocks, AI action buttons. Each component is connected to a workspace object (a list, a doc, a workflow, or an agent).
  </Step>

  <Step title="Configure logic">
    Define what happens when a user submits a form, clicks a button, or completes a step. Actions include: write to list, trigger workflow, run agent, send mail, post to channel.
  </Step>

  <Step title="Publish and share">
    Click **Publish**. Your app gets a URL within your workspace that you can share with teammates or embed in a Hub meeting agenda or doc.
  </Step>
</Steps>

<Warning>
  App Builder apps run inside your Pharen Hub workspace. They can only access workspace objects you explicitly connect to them. An app cannot read lists or docs that are not added to its data sources — this is by design for access control.
</Warning>


# Pharen Hub Channels & Mail: Team Communication Layer
Source: https://docs.pharen.app/hub/channels-and-mail

Connect your team with Hub channels, threaded chat, video meetings, and mail integration. Keep communication and workflows in one shared context.

Communication in Pharen Hub isn't a separate product you switch to — it's woven into the same workspace where your docs, lists, and workflows live. Channels give your team a persistent, organized place to talk. Video meetings let you collaborate in real time. Hub Meetings formalize agendas and track attendance. And mail integration brings email into your workflow automation, so approvals and notifications can flow in and out of your inbox without leaving the Hub.

## Channels

Channels are persistent chat rooms organized by topic, team, or project. Every channel is scoped to your workspace, so the context your team builds up over time stays searchable and accessible.

### Creating a Channel

<Steps>
  <Step title="Open Channels">
    Click **Channels** in the left sidebar. You'll see all channels you belong to.
  </Step>

  <Step title="Create a new channel">
    Click **+ New Channel**. Give it a name (use lowercase with hyphens, e.g., `launch-room` or `support-escalations`) and an optional description.
  </Step>

  <Step title="Set visibility">
    Choose **Public** (any workspace member can join) or **Private** (invite-only). Private channels are not visible in the channel directory to non-members.
  </Step>

  <Step title="Invite members">
    Add teammates by name. They'll receive a notification and can start participating immediately.
  </Step>
</Steps>

### Messaging and Threads

<CardGroup>
  <Card title="Direct messages" icon="message">
    Send a direct message to any workspace member by clicking their name or using the **+ New Message** button. DMs support the same formatting, reactions, and file sharing as channels.
  </Card>

  <Card title="Threaded replies" icon="comments">
    Reply to any message in a thread to keep focused conversations from cluttering the main channel view. Threads are collapsible and show an unread indicator when they have new activity.
  </Card>

  <Card title="Emoji reactions" icon="face-smile">
    React to any message with an emoji. Reactions are a lightweight way to acknowledge a message, express agreement, or vote on options without generating noise.
  </Card>

  <Card title="File sharing" icon="paperclip">
    Drag and drop files directly into any channel or DM. Uploaded files are stored in the workspace and can be referenced by workflows and agents.
  </Card>
</CardGroup>

### Mentions and Notifications

Use `@name` to mention a specific teammate. Use `@channel` to notify everyone in the channel. Use `@here` to notify only members who are currently active.

<Tip>
  Keep `@channel` mentions for genuinely important announcements. For most updates, mention specific people or let workflows handle routing — this keeps notification fatigue low across the team.
</Tip>

### Channel Integrations

Channels aren't just for people — workflows and agents can post to them automatically.

* **Workflow notifications:** Configure a workflow step to post a message to a channel when a record reaches a certain status. For example, post to `#finance-team` when an invoice is approved.
* **Agent updates:** An AI agent running a long task can post a summary to a channel when it completes, so the team stays informed without polling.
* **Incoming webhooks:** Use the channel webhook URL to post messages from external systems. Configure this under **Channel Settings → Integrations**.

***

## Video Meetings

Hub includes built-in video meetings with screen sharing, so you can jump into a real-time conversation without leaving your workspace.

### Starting a Meeting

<Tabs>
  <Tab title="From a channel">
    Open any channel and click the **video camera icon** in the top-right. This starts an instant meeting and posts a join link in the channel so other members can hop in.
  </Tab>

  <Tab title="From a direct message">
    Open a DM and click **Start Video Call**. The recipient receives a notification and can join immediately.
  </Tab>

  <Tab title="From Hub Meetings">
    Schedule a formal Hub Meeting (see below) and it will appear on participants' calendars with a join link generated automatically.
  </Tab>
</Tabs>

### During a Meeting

* **Screen sharing:** Click the screen icon in the meeting toolbar. You can share your full screen or a specific application window.
* **Participant controls:** Mute/unmute, enable/disable video, and manage participants from the meeting toolbar.
* **Meeting notes:** Open the side panel to take collaborative notes that are saved automatically as a Doc in your workspace when the meeting ends.

***

## Hub Meetings

Hub Meetings are scheduled, structured meetings with formal agendas, RSVPs, and a built-in record in your workspace.

### Scheduling a Hub Meeting

<Steps>
  <Step title="Open Meetings">
    Click **Meetings** in the left sidebar, then click **+ New Meeting**.
  </Step>

  <Step title="Set the details">
    Add a title, date, time, duration, and an optional location or video call link (generated automatically if you select **Hub Video**).
  </Step>

  <Step title="Build the agenda">
    Add agenda items with titles and time allocations. Agenda items can be linked to specific docs or list records — so reviewers can access source material directly from the meeting view.
  </Step>

  <Step title="Invite participants">
    Add attendees by name or email. Each invited person receives an RSVP notification and can respond with **Accept**, **Decline**, or **Maybe**.
  </Step>

  <Step title="Send the invite">
    Click **Send Invites**. Attendees receive a notification in Hub and, if configured, a calendar invitation to their external calendar.
  </Step>
</Steps>

### During and After the Meeting

The meeting view shows the live agenda, attendee list, and a shared notes panel. After the meeting:

* Notes are saved as a Doc automatically.
* Action items noted during the meeting can be converted to List records with one click.
* The meeting record — including the agenda, attendance, and notes — is stored in your workspace permanently.

<Note>
  Hub Meetings are distinct from instant video calls. Use instant calls for quick, unplanned conversations. Use Hub Meetings for recurring syncs, reviews, and any meeting where an agenda and attendance record matter.
</Note>

***

## Mail Integration

Hub's mail integration connects email accounts to your workspace so incoming messages can trigger workflows, and outgoing notifications can be delivered as email.

### Connecting a Mail Address

<Steps>
  <Step title="Open Mail settings">
    Go to **Workspace Settings → Mail → Connect Address**.
  </Step>

  <Step title="Add your email address">
    Enter the email address you want to connect (e.g., `support@yourcompany.com` or `invoices@yourcompany.com`). Hub supports OAuth connection for major providers and IMAP/SMTP for custom domains.
  </Step>

  <Step title="Verify ownership">
    Complete the verification step for your provider. For shared team addresses, you may need to authorize from the account admin.
  </Step>

  <Step title="Assign a workflow trigger">
    Once connected, you can configure which workflow fires when a new email arrives at this address. Select the workflow from the dropdown or create a new one.
  </Step>
</Steps>

### Inbound Mail → Workflow Automation

When an email arrives at a connected address, Hub can:

1. **Extract structured data** — An AI agent reads the email body and any attachments, extracting fields like sender, subject, amount, due date, or document type.
2. **Create a record** — The extracted data is written to a List automatically, creating a new row for the incoming item.
3. **Trigger a workflow** — The record creation fires a workflow that routes it for review, assigns an owner, and sends notifications.

<Accordion title="Example: Support inbox automation">
  Connect `support@yourcompany.com` to a workflow that:

  1. Creates a record in the **Support Requests** list with the sender, subject, and AI-generated urgency score.
  2. Routes high-urgency requests to the on-call agent immediately.
  3. Sends an acknowledgment email to the sender automatically.
  4. Posts a summary to the `#support-escalations` channel if urgency is Critical.

  The entire triage happens in under 30 seconds with no manual intervention.
</Accordion>

### Outbound Mail from Workflows

Workflows can send emails as a step. Use cases include:

* **Approval requests:** Send an email to an external approver with a one-click approve/reject link. Their reply updates the workflow status automatically.
* **Status notifications:** Notify vendors, customers, or partners when a record reaches a specific status.
* **Reminders:** Schedule an email to fire if a record hasn't been acted on within a defined time window.

<Warning>
  Outbound emails sent by workflows are delivered from the connected mail address. Make sure the address you connect has sending permissions and that your domain's SPF/DKIM records are configured to avoid deliverability issues.
</Warning>


# Pharen Hub Docs & Lists: Manage Knowledge and Data
Source: https://docs.pharen.app/hub/docs-and-lists

Store, edit, and structure your team's knowledge with Hub Docs and Lists. Switch between list, Kanban, and calendar views in one unified Data layer.

The Data layer of Pharen Hub is where your team's knowledge and structured information live. Docs give you a flexible, collaborative writing surface for everything from runbooks to meeting notes. Lists give you structured, queryable records — tasks, requests, assets, contacts — viewable as a flat list, a Kanban board, or a calendar. Because both live inside the same workspace, your AI agents and workflows can read and write to them directly, without any integration plumbing.

## Docs

### Creating a Document

<Steps>
  <Step title="Open the Docs section">
    In the left sidebar of the Hub web app, click **Docs**. You'll see all documents in your workspace, organized by folder.
  </Step>

  <Step title="Create a new doc">
    Click **+ New Doc** in the top-right corner. Give it a title — this becomes the doc's identifier for other layers of the Hub (agents, workflows, and the App Builder can reference it by name).
  </Step>

  <Step title="Start writing">
    The editor opens with a clean canvas. Type `/` to open the block menu and insert headings, bullet lists, code blocks, tables, callouts, dividers, and more.
  </Step>

  <Step title="Invite collaborators">
    Click **Share** in the top-right. Add teammates by name or email. You can grant view-only or edit access on a per-doc basis.
  </Step>
</Steps>

### Editing and Formatting

Hub Docs uses a block-based editor. Every paragraph, heading, image, or table is an independent block you can drag, duplicate, or delete.

<Tabs>
  <Tab title="Text blocks">
    Use `/heading` for H1–H3, `/quote` for block quotes, `/callout` for highlighted notes, and `/divider` for visual separation. Standard Markdown shortcuts (`**bold**`, `_italic_`, `~~strikethrough~~`) work inline.
  </Tab>

  <Tab title="Structured blocks">
    Use `/table` to insert a structured table, `/code` for a fenced code block with syntax highlighting, and `/toggle` for collapsible sections — useful for FAQs and runbooks.
  </Tab>

  <Tab title="Media & embeds">
    Use `/image` to upload or link an image, `/file` to attach a downloadable asset, and `/embed` to drop in a URL-based preview (dashboards, videos, external tools).
  </Tab>
</Tabs>

### Linking Docs to the Rest of Hub

Docs aren't isolated pages — they're live workspace objects.

* **Reference in workflows:** When building an approval workflow, attach a doc as context. Approvers see the relevant policy or specification directly in the approval panel.
* **Feed AI agents:** Add a doc to an agent's context window using the `docs` parameter in the workspace configuration. The agent can read, summarize, and cite it.
* **Link between docs:** Type `@` followed by a doc name to create an inline cross-reference. Hub resolves it to the current version of that document.

<Tip>
  Use a dedicated **Ops Playbook** doc as your team's single source of truth for recurring processes. Agents and workflows can pull from it automatically, keeping guidance consistent without manual copy-pasting.
</Tip>

### Version History

Every edit is saved automatically. To review or restore a previous version, open the doc, click the **⋯ menu** in the top-right, and select **Version History**. You'll see a timestamped list of every edit session, who made it, and a diff view. Click **Restore** on any version to roll back — without losing the current version, which is saved as a new entry.

***

## Lists

Lists are the structured data store of Pharen Hub. Where a Doc is freeform prose, a List is a table of records — each row has defined fields (text, number, date, status, person, relation) and can be acted on by workflows and agents.

### Creating a List

<Steps>
  <Step title="Open Lists">
    Click **Lists** in the left sidebar. You'll see all lists in your workspace.
  </Step>

  <Step title="Create a new list">
    Click **+ New List**. Choose a name and optionally a template (Tasks, Bug Tracker, Invoice Queue, Contact List, and more).
  </Step>

  <Step title="Define your fields">
    Add columns using the **+ Field** button. Each field has a type: **Text**, **Number**, **Date**, **Status**, **Person**, **Checkbox**, **URL**, or **Relation** (links to another list). You can reorder and rename fields at any time.
  </Step>

  <Step title="Add records">
    Click **+ New Record** or press `N` to add a row. Fill in fields inline or open the record detail panel for a full editing view, including a rich-text notes section and an activity log.
  </Step>
</Steps>

### Switching Views

Every list supports three view types. Switch between them using the view toggle at the top of the list.

<CardGroup>
  <Card title="List View" icon="list">
    The default table layout. Sort and filter by any field. Best for reviewing many records at once, bulk editing, and data entry.
  </Card>

  <Card title="Kanban View" icon="table-columns">
    Groups records into columns by any **Status** or **Select** field. Drag cards between columns to update their status. Best for task management, request queues, and pipeline tracking.
  </Card>

  <Card title="Calendar View" icon="calendar">
    Plots records on a monthly or weekly calendar using any **Date** field. Best for scheduling, deadlines, and event planning.
  </Card>
</CardGroup>

<Note>
  View preferences are saved per user. Your Kanban view doesn't affect a teammate who prefers the list view — you each see the same data, formatted your way.
</Note>

### Filtering and Grouping

Use the **Filter** button to narrow records by any field value. Filters can be stacked — for example, show all records where **Status = In Review** AND **Assignee = You** AND **Due Date = This Week**.

Use **Group** to cluster records by a field. In list view, grouping by Status creates collapsible sections. In Kanban, grouping is already visual.

### Connecting Lists to Workflows and Agents

Like docs, lists are first-class objects in the Hub workspace:

* **Workflow triggers:** A workflow can fire whenever a record is created, updated to a specific status, or reaches a due date. For example, when an invoice record moves to **Pending Approval**, the approval workflow starts automatically.
* **Agent reads/writes:** An AI agent can query a list (e.g., "find all open requests assigned to nobody") and create, update, or close records as part of its execution plan.
* **Relations:** Link records across lists. An Invoice record can relate to a Vendor record in a separate list, letting agents and workflows pull full context from both.

<Accordion title="Example: Invoice processing list setup">
  A typical invoice processing list includes the following fields:

  | Field          | Type     | Purpose                                           |
  | -------------- | -------- | ------------------------------------------------- |
  | Invoice Number | Text     | Unique identifier                                 |
  | Vendor         | Relation | Links to the Vendor list                          |
  | Amount         | Number   | Invoice total                                     |
  | Due Date       | Date     | Payment deadline                                  |
  | Status         | Status   | Draft → Pending Approval → Approved → Transferred |
  | Assignee       | Person   | Current owner of the record                       |
  | Document       | File     | Uploaded PDF or scanned image                     |
  | Notes          | Text     | Free-form context from the AI agent or reviewer   |

  When the AI agent processes an incoming invoice, it creates a record here automatically — populating every field from the scanned document via OCR — then moves the status to **Pending Approval** to trigger the workflow.
</Accordion>

### Exporting Data

To export a list, open the **⋯ menu** and select **Export**. You can export to CSV or JSON. Exports respect your active filters, so you can export a filtered subset without modifying the full list.


# Pharen Hub Mobile App: Approvals and Updates on the Go
Source: https://docs.pharen.app/hub/mobile-app

The Pharen Hub mobile app keeps your team's approvals, notifications, and decisions moving from any device — fully synced with the web workspace.

The Pharen Hub mobile app is the fifth layer of the Hub — and the one that makes the other four resilient to the real world. Approvals don't stall because a reviewer is between meetings. Urgent updates don't wait until someone is back at their desk. Decisions that need context get the full record, not just a forwarded email. The mobile app delivers the same workspace capabilities your team relies on from the web, formatted for focus and speed on a phone or tablet.

## Getting Started

<Steps>
  <Step title="Download the app">
    Search for **Pharen Hub** on the Apple App Store or Google Play Store and install it on your device.
  </Step>

  <Step title="Sign in">
    Open the app and tap **Sign In**. Use your Pharen Hub workspace credentials — the same email and password you use on the web. If your workspace uses SSO, tap **Sign in with SSO** and enter your workspace domain.
  </Step>

  <Step title="Enable notifications">
    When prompted, allow push notifications. This is how the app delivers approval requests, urgent channel mentions, and workflow alerts in real time. You can refine notification preferences later in **Settings → Notifications**.
  </Step>

  <Step title="Explore your workspace">
    The mobile home screen shows your notification feed, pending approvals, recent activity, and quick links to your most-used lists and channels.
  </Step>
</Steps>

***

## Approvals on the Go

Approvals are the highest-value mobile use case in Hub. When a workflow routes a record to you for a decision, you get a push notification with enough context to act immediately — without switching to a laptop.

### Receiving an Approval Request

When a workflow assigns an approval to you:

1. Your device receives a push notification with the record title and the workflow name.
2. Tap the notification to open the approval detail view.
3. The view shows the full record — all fields, attached documents, and the workflow context that the sender or agent included.
4. Scroll through the context, then tap **Approve** or **Reject**.
5. If you reject, you'll be prompted for a brief reason. This is logged in the audit trail and sent back to the originator.

<Tip>
  For invoice approvals, the mobile view shows the extracted invoice data alongside the original PDF so you can verify the numbers before approving — no need to download anything or open a separate app.
</Tip>

### Bulk Approvals

When multiple approval requests are pending, the **Approvals** tab shows them in a prioritized queue. You can:

* Tap any item to review and act on it individually.
* Use **Bulk Approve** to approve multiple low-risk items in one tap (available when all selected items are below a configured amount or priority threshold set by your workspace admin).

<Warning>
  Bulk approval is a workspace-level setting. If your organization requires individual review for all approvals — for example, due to financial controls or regulatory requirements — an admin can disable bulk approval under **Workspace Settings → Workflows → Approval Policy**.
</Warning>

***

## Notifications

The Hub mobile app delivers notifications across all five layers of the workspace, consolidated into a single, organized feed.

<CardGroup>
  <Card title="Approval requests" icon="circle-check">
    Routed to you by a workflow. Tap to review full context and act immediately.
  </Card>

  <Card title="Channel mentions" icon="at">
    Someone used @yourname or @channel in a channel you belong to. Tap to view the message and reply inline.
  </Card>

  <Card title="Workflow alerts" icon="triangle-exclamation">
    A workflow you own has stalled, failed, or reached an escalation threshold. Tap to view the run detail and take action.
  </Card>

  <Card title="Record updates" icon="pen-to-square">
    A list record you're assigned to or watching has been updated. Tap to see what changed and by whom.
  </Card>

  <Card title="Meeting reminders" icon="calendar">
    A Hub Meeting you accepted is starting soon. Tap to open the meeting view, review the agenda, and join the video call.
  </Card>

  <Card title="Agent completions" icon="robot">
    An AI agent you triggered has finished its task. Tap to review the summary and any records it created or updated.
  </Card>
</CardGroup>

### Configuring Notification Preferences

Go to **Settings → Notifications** in the mobile app to control what you receive and how:

* **Per-source toggles:** Turn off push notifications for specific sources (e.g., suppress channel mentions outside working hours while keeping approval requests always on).
* **Quiet hours:** Set a window during which the app suppresses non-urgent push notifications. Approvals marked **Urgent** by a workflow bypass quiet hours.
* **Notification grouping:** Choose whether notifications from the same source are grouped into a single push or delivered individually.

***

## Key Mobile Features

### Lists

The full Lists experience is available on mobile. View, filter, and update records from any of your lists.

<Tabs>
  <Tab title="Viewing records">
    Open a list and scroll through records in list view. Tap any record to open the full detail panel — all fields, attached files, comments, and activity history. Swipe left on a record for quick actions: assign, update status, or archive.
  </Tab>

  <Tab title="Updating records">
    Tap any field in the record detail panel to edit it inline. Status fields offer a tap-to-select picker. Date fields open a calendar. File fields let you attach a photo taken directly from your camera — useful for capturing receipts, site photos, or physical documents on the go.
  </Tab>

  <Tab title="Creating records">
    Tap **+** in any list to create a new record. Fill in fields manually, or tap the AI icon to open the assistant — describe the record in plain language and the AI pre-fills the fields for you to review and confirm.
  </Tab>
</Tabs>

### Channels

Read and post in any channel directly from the mobile app.

* Tap a channel to open the message thread.
* Use the text bar to compose a message with formatting, mentions, and emoji.
* Tap and hold any message to add an emoji reaction or reply in a thread.
* Tap the **+** in the message bar to attach a file from your device or camera roll.

### Docs

Browse and read any doc in your workspace. Tap the **edit** icon to make changes — the mobile editor supports the same block types as the web app, including headings, lists, code blocks, and tables. Changes sync instantly to the web.

### AI Chat

The AI Chat interface is fully available on mobile. Open it from the bottom navigation bar. Ask questions, give instructions, and get execution plans — the same workspace context is available as on the web.

***

## Sync with the Web App

The mobile app and web app are the same workspace — not two separate products that sync. Any change you make on mobile is immediately reflected on the web, and vice versa.

<CardGroup>
  <Card title="Real-time sync" icon="rotate">
    Record updates, channel messages, doc edits, and workflow state changes appear on all devices within seconds. There is no "sync now" button — everything is always current.
  </Card>

  <Card title="Offline support" icon="wifi-slash">
    The mobile app caches your recent lists, docs, and notifications for offline reading. Edits made offline are queued and sync automatically when connectivity is restored.
  </Card>

  <Card title="Consistent permissions" icon="lock">
    Your workspace role and access permissions are enforced identically on mobile and web. You can only see and act on the same objects on both platforms.
  </Card>

  <Card title="Cross-device audit trail" icon="shield-check">
    Actions taken on mobile are logged in the same audit trail as web actions — including the device and platform. The approval you gave from your phone is attributed to you, timestamped, and stored permanently.
  </Card>
</CardGroup>

<Note>
  The mobile app requires iOS 16 or later, or Android 10 or later. For the best experience, keep the app updated to the latest version — Hub releases mobile updates in sync with web feature releases.
</Note>

***

## Mobile-Specific Tips

<AccordionGroup>
  <Accordion title="Use the camera for document capture">
    When you need to add a document to a list record on the go — a receipt, a delivery note, a physical form — tap the file field in the record and choose **Take Photo**. Hub automatically attaches the image and, if the record is part of an OCR workflow, queues it for AI extraction.
  </Accordion>

  <Accordion title="Act on approvals from the lock screen">
    Approval push notifications include action buttons visible directly on the iOS lock screen or Android notification shade. For simple approvals where you've already reviewed context, you can approve or reject without even unlocking your phone.
  </Accordion>

  <Accordion title="Star important channels for quick access">
    In the Channels tab, long-press any channel and tap **Star** to pin it to the top of your list. On mobile, reducing the number of taps to your most critical channels makes a real difference during a busy day.
  </Accordion>

  <Accordion title="Use AI Chat for fast record lookups">
    Instead of navigating to a list and filtering, ask Chat: "What's the status of invoice INV-00492?" or "Who is assigned to the packaging scan task?" The AI returns the answer with a link directly to the record.
  </Accordion>
</AccordionGroup>


# Pharen Hub Overview: Unified AI Workspace for Teams
Source: https://docs.pharen.app/hub/overview

Pharen Hub brings together docs, lists, channels, mail, and AI agents in five coordinated layers. One workspace for your entire team.

Pharen Hub is a single AI-powered workspace that replaces the disconnected tangle of tools most teams rely on. Instead of switching between a document editor, a project tracker, a chat app, an inbox, and a separate automation platform, your team works in one shared environment where every layer — knowledge, communication, workflow, and intelligence — is aware of the others. The result is faster decisions, less manual coordination, and a clear record of everything that happened.

## The Five Layers

Pharen Hub is designed around five integrated layers. Each layer handles a distinct job, and together they form a complete operating environment for any team or process.

<CardGroup>
  <Card title="AI" icon="sparkles">
    Chat, agents, and the App Builder give your team on-demand assistance and autonomous execution — all sharing the same workspace context so the AI always knows what's going on.
  </Card>

  <Card title="Data" icon="database">
    Docs and lists keep your knowledge base, task queues, and structured source data in one place. No more hunting across drives and spreadsheets.
  </Card>

  <Card title="Functions" icon="bolt">
    Workflows and mail connect approvals, automation, and communication in one continuous flow. Trigger actions from any event, route decisions to the right people, and close the loop automatically.
  </Card>

  <Card title="Web App" icon="browser">
    The central surface for control, collaboration, and transparency. Every layer of the Hub is accessible from a clean, unified interface your whole team can use daily.
  </Card>

  <Card title="Mobile App" icon="mobile">
    Keeps approvals, updates, and decisions moving when your team is away from the desk. Full context, real notifications, one-tap actions.
  </Card>
</CardGroup>

## How the Layers Work Together

The power of Pharen Hub comes not from any single layer, but from how they communicate. Consider a common scenario: a new support request arrives by email.

<Steps>
  <Step title="Mail receives the request">
    An incoming email lands in a connected mail address. The Functions layer detects it and fires a trigger.
  </Step>

  <Step title="AI triages and enriches">
    An AI agent reads the email, classifies its urgency, pulls relevant context from your Docs layer, and creates a structured record in a List.
  </Step>

  <Step title="Workflow routes for approval">
    The workflow assigns the right owner, sends a notification through Channels, and — if needed — requests a decision by reply email or mobile push.
  </Step>

  <Step title="Audit trail closes the loop">
    Every step is logged. The full history of what happened, who acted, and when is available in the web app at any time.
  </Step>
</Steps>

This same pattern applies to invoice processing, document reviews, onboarding checklists, incident response, and any other repeating process your team runs.

## What Makes Hub Different

<Tabs>
  <Tab title="Unified context">
    Most tools store data in silos. When your AI assistant, your task list, your inbox, and your team chat are all separate products, nothing knows about anything else. In Pharen Hub, every layer shares a common workspace context. An AI agent can read a doc, update a list, send a channel message, and trigger a workflow — in a single operation, without any glue code.
  </Tab>

  <Tab title="AI that executes">
    Hub's AI doesn't just answer questions — it acts. Agents can be given skills, handed off to specialized peers, and tasked with turning goals into prioritized execution plans. The App Builder lets you create custom workflow apps on top of that intelligence without writing a full application from scratch.
  </Tab>

  <Tab title="Built for process">
    Approvals, audit trails, automated notifications, and ERP-ready integrations are first-class citizens in Hub — not afterthoughts bolted on via a third-party Zapier connection. Workflows are version-controlled, observable, and tied to real business outcomes.
  </Tab>

  <Tab title="Mobile-first approvals">
    Decisions don't wait for people to get back to their desks. Hub's mobile app delivers full context alongside every approval request, so the right person can act immediately — from anywhere.
  </Tab>
</Tabs>

## Core Capabilities at a Glance

<AccordionGroup>
  <Accordion title="Knowledge & Data">
    * Rich text docs with collaborative editing
    * Structured lists with Kanban, list, and calendar views
    * Version history and doc linking
    * Source data storage for workflows and AI agents
  </Accordion>

  <Accordion title="Communication">
    * Team channels with threaded replies and emoji reactions
    * Video meetings with screen sharing
    * Hub meetings with agendas and RSVPs
    * Mail integration for inbound and outbound automation
  </Accordion>

  <Accordion title="AI & Automation">
    * Conversational AI chat with full workspace context
    * Custom AI agents with skills and code execution
    * Agent handoffs for multi-step, multi-specialist workflows
    * App Builder for custom workflow applications
    * Execution planning: goals → prioritized next steps
  </Accordion>

  <Accordion title="Workflow & Governance">
    * Visual approval workflow builder
    * Trigger-based automation (email, schedule, event)
    * Full audit trails for every action
    * ERP and external system integrations
  </Accordion>
</AccordionGroup>

<Note>
  Pharen Hub is a SaaS product. Your workspace is available at [pharen.de](https://pharen.de). No infrastructure setup is required — invite your team and start building.
</Note>

## Ready to Explore?

Each section of this documentation dives into a specific layer. Start with the area most relevant to your team:

<CardGroup>
  <Card title="Docs & Lists" icon="file-lines" href="/hub/docs-and-lists">
    Learn how to create documents, build structured lists, and keep your team's knowledge organized.
  </Card>

  <Card title="Channels & Mail" icon="envelope" href="/hub/channels-and-mail">
    Set up team channels, schedule meetings, and connect your mail for two-way workflow automation.
  </Card>

  <Card title="AI Agents" icon="robot" href="/hub/ai-agents">
    Build and configure AI agents, use the App Builder, and set up agent handoffs.
  </Card>

  <Card title="Workflows" icon="diagram-project" href="/hub/workflows">
    Automate approvals, build trigger-based workflows, and maintain a complete audit trail.
  </Card>

  <Card title="Mobile App" icon="mobile-screen" href="/hub/mobile-app">
    Approve requests, receive updates, and stay in the loop from any device.
  </Card>
</CardGroup>


# Pharen Hub Workflows: Automate Approvals and Processes
Source: https://docs.pharen.app/hub/workflows

Build approval workflows, automate triggers and notifications, and maintain a full audit trail for every process — all inside Pharen Hub Functions.

The Functions layer of Pharen Hub is built around the idea that every repeating process in your business deserves to be automated, audited, and continuously improving. Workflows are the engine of that layer: visual, configurable sequences of steps that connect people, data, AI agents, and external systems. Whether you're routing invoices for approval, onboarding a new customer, or responding to a support escalation, workflows eliminate the manual coordination that slows teams down and creates errors.

## Core Concepts

Before building your first workflow, it helps to understand how the main pieces fit together.

<CardGroup>
  <Card title="Triggers" icon="bolt">
    Every workflow starts with a trigger: a specific event that causes it to begin. Triggers can be a new list record, an incoming email, a schedule, a manual action, or a step in another workflow.
  </Card>

  <Card title="Steps" icon="arrow-right">
    Steps are the actions the workflow takes: updating a record, sending a notification, requesting an approval, running an agent, calling an external API, or branching based on a condition.
  </Card>

  <Card title="Conditions" icon="code-branch">
    Conditions let a workflow branch. Based on field values, approval decisions, or agent outputs, the workflow can follow different paths for different situations.
  </Card>

  <Card title="Audit Trail" icon="shield-check">
    Every workflow run is logged. You can see exactly which steps ran, what data passed through them, who took which action, and when — for every single execution.
  </Card>
</CardGroup>

***

## Building an Approval Workflow

The most common workflow pattern in Pharen Hub is the approval loop: a record is created, routed to one or more reviewers, and approved or rejected — with each decision logged and the process continuing automatically.

<Steps>
  <Step title="Open Workflows">
    Navigate to **Functions → Workflows** in the left sidebar and click **+ New Workflow**.
  </Step>

  <Step title="Name your workflow">
    Give the workflow a clear, process-oriented name like `invoice-approval` or `contract-review`. This name is used when triggering the workflow from agents, App Builder apps, and code.
  </Step>

  <Step title="Set the trigger">
    Click **+ Add Trigger** and choose the event that starts this workflow. For an invoice approval, choose **List record updated** and configure it to fire when an invoice record's status changes to `Pending Approval`.
  </Step>

  <Step title="Add an approval step">
    Click **+ Add Step → Approval**. Configure:

    * **Assignee:** The person, role, or dynamic expression (e.g., the `Manager` field on the record) that receives the approval request.
    * **Context:** Attach the relevant doc, list record, or file so the approver has everything they need.
    * **Deadline:** An optional time limit. If the deadline passes with no action, the workflow can auto-escalate or auto-reject.
    * **Delivery:** Send the approval request as a Hub notification, a channel message, an email, or all three.
  </Step>

  <Step title="Branch on the decision">
    After the approval step, add a **Condition** branching on the decision result:

    * **Approved:** Continue to the next step (e.g., update the record status to `Approved`, post to a channel, trigger an ERP transfer).
    * **Rejected:** Route back to the originator with a rejection reason, update the record status to `Returned`, and optionally notify the submitter by email.
  </Step>

  <Step title="Add post-approval steps">
    Add steps for what happens after approval: update the record, send a confirmation email, post a channel message, or call an external API. Use the **HTTP Request** step to push data to your ERP, CRM, or any external system.
  </Step>

  <Step title="Test and activate">
    Click **Test Workflow** to run it against a real or synthetic record in sandbox mode. Review the execution log, adjust any steps, then click **Activate** to go live.
  </Step>
</Steps>

<Tip>
  Build approval workflows incrementally. Start with a single-step approval, activate it, and observe a few live runs before adding escalation logic and multi-step branching. Iterating on a working workflow is faster than designing a perfect one from scratch.
</Tip>

***

## Automation Triggers

Workflows can be started by a wide range of events. Choose the right trigger for your process:

<Tabs>
  <Tab title="List events">
    | Trigger           | Description                                              |
    | ----------------- | -------------------------------------------------------- |
    | Record created    | Fires when a new record is added to a list               |
    | Record updated    | Fires when any field (or a specific field) changes value |
    | Status changed to | Fires when the Status field reaches a specific value     |
    | Record due        | Fires a set time before or after a Date field            |
    | Record assigned   | Fires when the Assignee field is set or changed          |
  </Tab>

  <Tab title="Mail events">
    | Trigger              | Description                                                   |
    | -------------------- | ------------------------------------------------------------- |
    | Email received       | Fires when a new email arrives at a connected address         |
    | Email received from  | Fires only for emails from a specific sender or domain        |
    | Email reply received | Fires when a reply comes in on a thread started by a workflow |
  </Tab>

  <Tab title="Schedule">
    | Trigger         | Description                                |
    | --------------- | ------------------------------------------ |
    | Daily at        | Fires once per day at a specified time     |
    | Weekly on       | Fires on a specific day and time each week |
    | Monthly on      | Fires on a specific date each month        |
    | Cron expression | Full cron syntax for custom schedules      |
  </Tab>

  <Tab title="Manual & API">
    | Trigger          | Description                                             |
    | ---------------- | ------------------------------------------------------- |
    | Manual           | A user clicks "Run" in the workflow list or App Builder |
    | Webhook          | An external system POSTs to the workflow's webhook URL  |
    | Agent            | An AI agent calls `workflow.trigger` from a skill       |
    | Another workflow | A workflow step triggers this workflow as a sub-process |
  </Tab>
</Tabs>

***

## Workflow Steps Reference

<AccordionGroup>
  <Accordion title="Approval">
    Request a human decision. Configure the assignee, context, deadline, and delivery channels. The workflow pauses until the approver acts. Returns `approved` or `rejected` and an optional comment.
  </Accordion>

  <Accordion title="Update Record">
    Write new values to fields in any list record. Use dynamic expressions to pull values from the trigger payload or from previous steps — e.g., set `Approved By` to the identity of the approver from the previous step.
  </Accordion>

  <Accordion title="Send Notification">
    Send a Hub notification, a channel message, or an email. Supports templated messages using `{{field_name}}` placeholders that are filled at runtime from the record or workflow context.
  </Accordion>

  <Accordion title="Run Agent">
    Invoke a named AI agent as a workflow step. Pass the current record as context. The agent executes its task and returns a result that subsequent steps can use. For example: run the `invoice-processor` agent to validate an invoice before routing it for approval.
  </Accordion>

  <Accordion title="HTTP Request">
    Make a GET, POST, PUT, or PATCH request to any external URL. Use this to push approved data to your ERP, call a payment API, update a CRM record, or integrate with any third-party system that exposes an API.
  </Accordion>

  <Accordion title="Condition / Branch">
    Branch the workflow based on any field value, approval decision, agent output, or HTTP response. Each branch continues independently and can rejoin at a later merge step if needed.
  </Accordion>

  <Accordion title="Wait / Delay">
    Pause the workflow for a set duration or until a specific datetime. Useful for reminder sequences: send a notification, wait 48 hours, and if no action has been taken, escalate.
  </Accordion>

  <Accordion title="Create Record">
    Create a new record in any list. Useful for spawning sub-tasks, logging summaries, or creating output records from a workflow run.
  </Accordion>
</AccordionGroup>

***

## Audit Trails

Every workflow execution generates a complete, immutable audit trail. This is not optional logging — it's a first-class feature of Hub's Functions layer.

### What's Logged

For every workflow run, Hub records:

* The trigger event and its full payload
* Each step that executed, in order
* The input and output data for each step
* The identity and timestamp of every human action (approval, rejection, manual trigger)
* Any errors or retries, with the error details
* The final outcome of the run

### Accessing the Audit Trail

<Steps>
  <Step title="Open Workflows">
    Navigate to **Functions → Workflows** and select the workflow you want to inspect.
  </Step>

  <Step title="Open Run History">
    Click the **Run History** tab. You'll see a list of every execution, sorted by most recent, with status (Completed, Failed, Pending, Cancelled) and duration.
  </Step>

  <Step title="Inspect a run">
    Click any run to open the execution detail view. Each step is shown as a timeline entry. Click a step to see its input, output, and timing. Approval steps show who acted and when.
  </Step>

  <Step title="Export the log">
    Click **Export** to download the full run log as JSON. This is useful for compliance reporting or feeding into external audit systems.
  </Step>
</Steps>

<Note>
  Audit trail data is retained for the lifetime of your workspace. If your compliance requirements demand a specific retention period or external archival, use the **Export** function or the Audit API to pull logs to your own storage.
</Note>

***

## Notifications and Escalations

Workflows communicate with people through notifications. Hub gives you fine-grained control over how and when those messages are sent.

### Notification Channels

Each notification step can deliver to one or more channels simultaneously:

* **Hub notification** — appears in the recipient's in-app notification bell
* **Channel message** — posts to a named channel, optionally with an `@mention`
* **Email** — sends to the recipient's connected email address
* **Mobile push** — sends a push notification to the Hub mobile app

### Escalation Patterns

<Accordion title="Deadline-based escalation">
  Set a deadline on any approval step. If the deadline passes without action:

  1. The workflow checks the escalation rule.
  2. It reassigns the approval to the escalation target (e.g., the approver's manager).
  3. It sends a new notification with context about the missed deadline.
  4. It logs the escalation in the audit trail.

  Configure deadline and escalation under the **Approval Step → Advanced** settings.
</Accordion>

<Accordion title="Reminder sequences">
  Use a **Wait** step followed by a **Condition** step to build reminder sequences:

  1. Send the initial approval request.
  2. Wait 24 hours.
  3. Check: has the record's `Approval Status` changed?
  4. If not, send a reminder notification.
  5. Wait another 24 hours.
  6. If still pending, escalate.
</Accordion>

***

## Real-World Use Cases

### Invoice Processing

Manual invoice handling is one of the highest-friction processes in most organizations. Hub reduces it from \~15 minutes per invoice to \~2 minutes.

<Steps>
  <Step title="Receive">
    An invoice arrives by email at `invoices@yourcompany.com`. The inbound mail trigger fires.
  </Step>

  <Step title="Extract">
    The `invoice-processor` AI agent uses OCR to extract vendor, amount, line items, due date, and PO number from the attached PDF — in under 60 seconds.
  </Step>

  <Step title="Create record">
    The agent creates a record in the Invoice list with all extracted fields populated and sets the status to `Pending Approval`.
  </Step>

  <Step title="Route">
    The `invoice-approval` workflow triggers. Based on the amount, it routes to the appropriate approver tier (under €5,000 → team lead, €5,000–€50,000 → finance manager, above €50,000 → CFO).
  </Step>

  <Step title="Approve">
    The approver receives a notification with the full invoice context and a one-click approve button — accessible from web or mobile.
  </Step>

  <Step title="Transfer">
    On approval, the workflow calls the ERP HTTP endpoint to create the payment order automatically. The record status updates to `Transferred` and the audit trail closes.
  </Step>
</Steps>

### Insurance Claims Triage

Hub's AI triage cuts claim capture and initial review time dramatically.

* A new claim arrives (email, form, or direct API post).
* The AI agent reads submitted documents in under 1 minute, extracting claim type, claimant, amount, and supporting evidence quality.
* Claims are scored for urgency and completeness and sorted into a prioritized queue.
* Adjusters work the queue in order — no manual sorting, no missed claims.
* Each step is logged for regulatory audit purposes.

<Tip>
  For regulated industries, enable the **Immutable Audit Log** option under **Workspace Settings → Compliance**. This writes all workflow events to a write-once log that cannot be edited or deleted, suitable for regulatory review.
</Tip>


# Introduction to Pharen Hub: AI Workspace for Teams
Source: https://docs.pharen.app/introduction

Pharen Hub unifies docs, lists, channels, mail, and AI agents in one workspace. Eliminate tool-switching and automate your team's workflows.

Pharen Hub is the all-in-one AI workspace that replaces the fragmented stack of tools your team juggles every day. Instead of bouncing between a document editor, a project tracker, a chat app, an email client, and a handful of automation tools, everything lives in one place — connected, searchable, and powered by AI that actually understands your work.

## What is Pharen Hub?

At its core, Pharen Hub is built around five layers that work together seamlessly:

* **AI** — Chat with built-in AI assistants, deploy custom agents with specialized skills, and build internal AI-powered apps with the App Builder — no code required.
* **Data** — Create rich documents and structured lists that serve as the single source of truth for your team's knowledge and projects.
* **Functions** — Automate multi-step workflows with approvals and full audit trails, and manage all your team's mail in one place.
* **Web App** — Access your entire workspace from any browser, with a fast and responsive interface designed for real work.
* **Mobile App** — Stay connected to your team and your work from anywhere, on iOS and Android.

Every layer is aware of the others. An AI agent can read your docs, update a list, trigger a workflow, and send a message — all in a single automated action. That tight integration is what makes Pharen Hub fundamentally different from stitching tools together with integrations.

## Who is Pharen Hub for?

Pharen Hub is built for teams that move fast and care about quality. Whether you're a small startup trying to stay organized without drowning in SaaS subscriptions, or a growing company that needs enterprise-grade security and automation, Pharen Hub scales with you.

* **Startups and small teams** get a full-featured workspace on the Free or Starter plan — no credit card required to get going.
* **Growing teams** on the Team or Pro plan unlock multiple teams, expanded member seats, and advanced AI capabilities.
* **Enterprises** get custom pricing with SSO, granular permissions, budget controls, AI model policies, and dedicated support.

## What problems does Pharen Hub solve?

**Tool-switching kills focus.** The average knowledge worker switches between more than a dozen apps every day. Pharen Hub eliminates that by bringing docs, lists, chat, mail, and AI into a single workspace where context is never lost.

**Automation should be accessible.** Most workflow tools require engineering resources or complex no-code expertise. Pharen Hub's workflow builder is designed for the people who actually do the work — with approvals, audit trails, and AI assistance built in from the start.

**AI should know your context.** Generic AI assistants don't know your team's processes, terminology, or data. Pharen Hub's agents are trained on your workspace content and can be given custom skills that reflect how your team actually operates.

**Permissions need to match reality.** Sharing the right information with the right people — and keeping sensitive data away from those who shouldn't see it — is hard to get right. Pharen Hub's granular roles and permissions give you fine-grained control without the administrative overhead.

## Where to go next

<CardGroup>
  <Card title="Quickstart" icon="rocket" href="/quickstart">
    Create your workspace, invite your team, and send your first message or document in under five minutes.
  </Card>

  <Card title="Workspace Setup" icon="gear" href="/workspace-setup">
    Configure your workspace name, teams, profile, and core settings to match how your team works.
  </Card>

  <Card title="AI Agents" icon="robot" href="/hub/ai-agents">
    Build and deploy custom AI agents with skills tailored to your team's workflows and knowledge.
  </Card>

  <Card title="Workflow Automation" icon="diagram-project" href="/hub/workflows">
    Automate multi-step processes with approvals, conditions, and full audit trails.
  </Card>

  <Card title="Docs and Lists" icon="file-lines" href="/hub/docs-and-lists">
    Create rich documents and structured lists that become the living knowledge base for your team.
  </Card>

  <Card title="Pricing" icon="tag" href="https://pharen.de/pricing">
    Compare plans from Free to Enterprise and find the right fit for your team's size and needs.
  </Card>
</CardGroup>

<Note>
  Pharen Hub is available at [pharen.de](https://pharen.de). You can sign up for free — no credit card required — and upgrade at any time as your team grows.
</Note>


# Field types and validation for lists
Source: https://docs.pharen.app/lists/fields

Reference for every Pharen Hub list field type, including text, number, date, select, relation, and formula fields, plus validation options.



# Organize structured data with lists
Source: https://docs.pharen.app/lists/overview

Discover how Pharen Hub lists store structured records, link to docs and channels, and feed workflows and AI agents with reliable team data.

<Note>
  Placeholder — content coming soon.
</Note>


# Table, Kanban, and Calendar list views
Source: https://docs.pharen.app/lists/views

Switch between table, Kanban, and calendar views in Pharen Hub lists, then filter, sort, and group records to fit each team's workflow.

<Note>
  Placeholder — content coming soon.
</Note>


# Install the Pharen Hub mobile app
Source: https://docs.pharen.app/mobile/installation

Download, install, and sign in to the Pharen Hub mobile app on iOS and Android, including device requirements and single sign-on setup.

<Note>
  Placeholder — content coming soon.
</Note>


# Pharen Hub on iOS and Android
Source: https://docs.pharen.app/mobile/overview

See what the Pharen Hub mobile app offers, including offline access, push notifications, and on-the-go editing for lists, docs, and workflows.

<Note>
  Placeholder — content coming soon.
</Note>


# Quickstart: Up and Running with Pharen Hub in Minutes
Source: https://docs.pharen.app/quickstart

Create your Pharen Hub workspace, invite teammates, and send your first message or document in under five minutes. No credit card required.

Getting started with Pharen Hub takes less than five minutes. By the end of this guide you'll have a live workspace, at least one teammate invited, and a feel for the two most-used features — team messaging and collaborative documents. Everything else builds on this foundation.

<Steps>
  <Step title="Create your workspace">
    Head to [pharen.de](https://pharen.de) and click **Get started free**. You'll be asked to sign up with your work email address or continue with Google.

    Once you've authenticated, Pharen Hub prompts you to create your first workspace:

    1. **Enter a workspace name.** Use something your whole team will recognize — typically your company or team name (e.g. `Acme Marketing` or `Product Team`).
    2. **Choose a workspace URL.** This becomes the unique address for your workspace within Pharen Hub (e.g. `acme-marketing`). You can change it later in Settings.
    3. Click **Create workspace**.

    Your workspace is created immediately and you land on the Pharen Hub home screen.

    <Note>
      The Free plan supports one member and 10 workflow runs per month at no cost. You can upgrade to a paid plan at any time from **Settings → Billing**.
    </Note>
  </Step>

  <Step title="Complete your profile">
    Before you invite anyone, take thirty seconds to set up your profile so teammates know who you are.

    Click your avatar in the bottom-left corner of the sidebar and select **Profile settings**. From here:

    * Upload a **profile photo** — this appears in messages, documents, and anywhere you're mentioned.
    * Confirm your **display name** and add your **job title** so teammates can quickly identify your role.
    * Set your **time zone** — Pharen Hub uses this to surface the right notifications and display timestamps correctly.

    Click **Save** when you're done.

    <Tip>
      Adding a real photo and title makes the workspace feel more human from day one, especially for remote or distributed teams meeting each other for the first time in Pharen Hub.
    </Tip>
  </Step>

  <Step title="Invite your team members">
    With your profile set, it's time to bring your teammates in.

    Click **Settings** in the left sidebar, then navigate to **Members → Invite members**.

    1. Enter the **email addresses** of the people you want to invite, separated by commas.
    2. Choose a **role** for each invitee: **Admin**, **Member**, or **Guest**. Members is the right choice for most teammates; Admins can manage workspace settings; Guests have limited read-only access.
    3. Click **Send invites**.

    Each person receives an email with a link to join your workspace. They'll be prompted to create an account (or log in if they already have one) and land directly in your shared workspace.

    <Info>
      The number of members you can invite depends on your plan: Free supports 1 member, Starter up to 3, Team up to 5, and Pro up to 50. Check **Settings → Billing** to upgrade if needed.
    </Info>
  </Step>

  <Step title="Send your first message">
    Pharen Hub includes built-in team channels so you can communicate without leaving your workspace.

    In the left sidebar, click **Channels**, then select the **#general** channel that was created automatically with your workspace.

    Type a message in the composer at the bottom of the screen — try something like:

    ```text theme={null}
    Hey team 👋 Welcome to our Pharen Hub workspace! This is where we'll keep everything organized.
    ```

    Press **Enter** (or click the send button) to post it. Your message is instantly visible to all members who have access to the channel.

    To create a new channel — for a project, a department, or any topic — click the **+** icon next to **Channels** in the sidebar, give it a name, and add the relevant teammates.

    <Tip>
      Use the `@` symbol to mention a specific teammate in any message. They'll receive a notification so nothing falls through the cracks.
    </Tip>
  </Step>

  <Step title="Create your first document">
    Documents are where your team's knowledge lives in Pharen Hub. They're rich, collaborative, and connected to everything else in your workspace.

    In the left sidebar, click **Docs**, then click **New document**.

    1. Give your document a **title** — for example, `Team Handbook` or `Project Brief: Q3 Launch`.
    2. Start typing in the body. The editor supports headings, bullet lists, numbered lists, tables, code blocks, images, and more. Use `/` anywhere in the document to open the command menu and insert any block type.
    3. **Share the document** with your team by clicking the **Share** button in the top-right corner and selecting which members or channels should have access.

    Changes are saved automatically and synced in real time for anyone viewing the document alongside you.

    <Note>
      You can mention teammates inside a document using `@` and reference other docs or lists using `[[`. This turns your documents into a connected knowledge graph rather than isolated files.
    </Note>
  </Step>

  <Step title="Ask the AI assistant">
    Every Pharen Hub workspace comes with a built-in AI assistant that understands your workspace content.

    Click the **AI** icon in the left sidebar (or press `Cmd+K` / `Ctrl+K`) to open the AI chat panel.

    Try asking it something practical, like:

    ```text theme={null}
    Summarize the document I just created.
    ```

    or

    ```text theme={null}
    Draft an agenda for a 30-minute team kickoff meeting.
    ```

    The AI assistant has access to your workspace docs, lists, and channels (based on your permissions), so it can provide answers that are relevant to your actual work — not just generic responses.

    <Tip>
      As your workspace grows, the AI becomes more useful. Feed it your processes, guidelines, and project docs and it becomes a genuine team resource rather than just a generic chatbot.
    </Tip>
  </Step>
</Steps>

## What's next?

You've got a workspace, a team, messages flowing, a document created, and AI working for you. Here's where to go from here:

<CardGroup>
  <Card title="Workspace Setup" icon="gear" href="/workspace-setup">
    Configure teams, permissions, and workspace settings to match how your organization is structured.
  </Card>

  <Card title="AI Agents" icon="robot" href="/hub/ai-agents">
    Go beyond the assistant and deploy specialized agents with custom skills for your team's workflows.
  </Card>

  <Card title="Workflow Automation" icon="diagram-project" href="/hub/workflows">
    Automate repetitive processes — with approvals, conditions, and audit trails built in.
  </Card>

  <Card title="Docs and Lists" icon="file-lines" href="/hub/docs-and-lists">
    Explore the full power of collaborative documents and structured project lists.
  </Card>
</CardGroup>


# Build your first app in Pharen Studio
Source: https://docs.pharen.app/studio/getting-started

Step-by-step guide to creating your first Pharen Studio app, from picking a data source to publishing an interface for your team to use.

<Note>
  Placeholder — content coming soon.
</Note>


# Design custom apps with Pharen Studio
Source: https://docs.pharen.app/studio/overview

Meet Pharen Studio, the low-code builder for designing custom apps, interfaces, and automations on top of your Pharen Hub workspace data.

<Note>
  Placeholder — content coming soon.
</Note>


# Clean and reshape data with Transformation
Source: https://docs.pharen.app/transformation/overview

Use Pharen Hub Transformation to clean, enrich, and reshape data between lists, files, and external systems without writing custom scripts.

<Note>
  Placeholder — content coming soon.
</Note>


# Build data pipelines step by step
Source: https://docs.pharen.app/transformation/pipelines

Design Pharen Hub Transformation pipelines that pull source data, run steps to clean and join it, and write the results back into lists or files.

<Note>
  Placeholder — content coming soon.
</Note>


# Conversation
Source: https://docs.pharen.app/ui/ai/conversation

Import and use the Conversation components from @pharen/ui/components/ai.

Use **Conversation** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="conversation" title="Conversation preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Conversation, ConversationContent, ConversationEmptyState } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Conversation>
      <ConversationContent>
        <ConversationEmptyState title="Start a conversation" />
      </ConversationContent>
    </Conversation>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

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

## Exports

| Export                   | Purpose                                  |
| ------------------------ | ---------------------------------------- |
| `Conversation`           | Exported Vue component from this module. |
| `ConversationContent`    | Contains the visible content.            |
| `ConversationEmptyState` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/conversation)


# Message
Source: https://docs.pharen.app/ui/ai/message

Import and use the Message components from @pharen/ui/components/ai.

Use **Message** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="message" title="Message preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Message, MessageContent, MessageResponse } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Message from="assistant">
      <MessageContent>
        <MessageResponse content="Your workflow is ready." />
      </MessageContent>
    </Message>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Message, MessageContent, MessageActions, MessageResponse, MessageToolbar, MessageBranch, MessageBranchContent, MessageBranchSelector, MessageBranchPrevious, MessageBranchNext, MessageBranchPage } from '@pharen/ui/components/ai';
```

## Exports

| Export                  | Purpose                                  |
| ----------------------- | ---------------------------------------- |
| `Message`               | Exported Vue component from this module. |
| `MessageContent`        | Contains the visible content.            |
| `MessageActions`        | Exported Vue component from this module. |
| `MessageResponse`       | Exported Vue component from this module. |
| `MessageToolbar`        | Exported Vue component from this module. |
| `MessageBranch`         | Exported Vue component from this module. |
| `MessageBranchContent`  | Contains the visible content.            |
| `MessageBranchSelector` | Exported Vue component from this module. |
| `MessageBranchPrevious` | Exported Vue component from this module. |
| `MessageBranchNext`     | Exported Vue component from this module. |
| `MessageBranchPage`     | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/message)


# Pharen thinking
Source: https://docs.pharen.app/ui/ai/pharen-thinking

Import and use the Pharen thinking components from @pharen/ui/components/ai.

Use **Pharen thinking** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="pharen-thinking" title="Pharen thinking preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { PharenThinking } from '@pharen/ui/components/ai';
  </script>

  <template>
    <PharenThinking />
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { PharenThinking } from '@pharen/ui/components/ai';
```

## Exports

| Export           | Purpose                                  |
| ---------------- | ---------------------------------------- |
| `PharenThinking` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/pharen-thinking)


# Plan
Source: https://docs.pharen.app/ui/ai/plan

Import and use the Plan components from @pharen/ui/components/ai.

Use **Plan** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="ai-plan" title="Plan preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Plan, PlanTask } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Plan class="w-full max-w-lg">
      <template #description><p class="mt-1 text-sm text-muted-foreground">Three steps to publish the workflow.</p></template>
      <PlanTask title="Validate inputs" status="done" />
      <PlanTask title="Run automation" status="in_progress" />
      <PlanTask title="Publish results" status="todo" />
    </Plan>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Plan, PlanTask } from '@pharen/ui/components/ai';
```

## Exports

| Export     | Purpose                                  |
| ---------- | ---------------------------------------- |
| `Plan`     | Exported Vue component from this module. |
| `PlanTask` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/plan)


# Reasoning
Source: https://docs.pharen.app/ui/ai/reasoning

Import and use the Reasoning components from @pharen/ui/components/ai.

Use **Reasoning** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="reasoning" title="Reasoning preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Reasoning } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Reasoning :duration="4" class="w-full max-w-lg">
      I compared the workflow history with the current configuration and found two changes.
    </Reasoning>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Reasoning } from '@pharen/ui/components/ai';
```

## Exports

| Export      | Purpose                                  |
| ----------- | ---------------------------------------- |
| `Reasoning` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/reasoning)


# Shimmer
Source: https://docs.pharen.app/ui/ai/shimmer

Import and use the Shimmer components from @pharen/ui/components/ai.

Use **Shimmer** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="shimmer" title="Shimmer preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Shimmer } from '@pharen/ui/components/ai';
  </script>

  <template><Shimmer as="p" :duration="3" class="text-lg font-medium">Generating your workflow…</Shimmer></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Shimmer } from '@pharen/ui/components/ai';
```

## Exports

| Export    | Purpose                                  |
| --------- | ---------------------------------------- |
| `Shimmer` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/shimmer)


# Suggestion
Source: https://docs.pharen.app/ui/ai/suggestion

Import and use the Suggestion components from @pharen/ui/components/ai.

Use **Suggestion** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="suggestion" title="Suggestion preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Suggestion, Suggestions } from '@pharen/ui/components/ai';

  const prompts = ['Summarize this page', 'Create a workflow', 'Explain the errors'];
  </script>

  <template>
    <Suggestions><Suggestion v-for="prompt in prompts" :key="prompt" :suggestion="prompt" /></Suggestions>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { Suggestions, Suggestion } from '@pharen/ui/components/ai';
```

## Exports

| Export        | Purpose                                  |
| ------------- | ---------------------------------------- |
| `Suggestions` | Exported Vue component from this module. |
| `Suggestion`  | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/suggestion)


# Thinking label
Source: https://docs.pharen.app/ui/ai/thinking-label

Import and use the Thinking label components from @pharen/ui/components/ai.

Use **Thinking label** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="thinking-label" title="Thinking label preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { ThinkingLabel } from '@pharen/ui/components/ai';
  </script>

  <template><ThinkingLabel label="Thinking about the next step" active :size="20" /></template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

```ts theme={null}
import { ThinkingLabel } from '@pharen/ui/components/ai';
```

## Exports

| Export          | Purpose                   |
| --------------- | ------------------------- |
| `ThinkingLabel` | Labels a value or region. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/thinking-label)


# Tool
Source: https://docs.pharen.app/ui/ai/tool

Import and use the Tool components from @pharen/ui/components/ai.

Use **Tool** to build AI interfaces. This page covers every Vue component exported by the public module.

<PharenUiPreview name="tool" title="Tool preview" />

<Accordion title="View code">
  ```vue theme={null}
  <script setup lang="ts">
  import { Tool, ToolInput, ToolOutput } from '@pharen/ui/components/ai';
  </script>

  <template>
    <Tool tool-name="Search workspace" state="output-available" class="w-full max-w-lg">
      <ToolInput :input="{ query: 'Q3 plan' }" />
      <ToolOutput output="3 matching documents" />
    </Tool>
  </template>
  ```
</Accordion>

## Installation

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

<Note>
  Import `@pharen/ui/styles.css` exactly once in your application entrypoint.
</Note>

## Usage

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

## Exports

| Export       | Purpose                                  |
| ------------ | ---------------------------------------- |
| `Tool`       | Exported Vue component from this module. |
| `ToolInput`  | Exported Vue component from this module. |
| `ToolOutput` | Exported Vue component from this module. |

## Source

[Open the source on GitHub](https://github.com/PharenIT/ELEV8-Labs/tree/main/src/packages/ui/src/components/ai/tool)


# Build workflow actions step by step
Source: https://docs.pharen.app/workflows/actions

Add and configure actions that update records, send messages, call APIs, or run AI agents as part of a Pharen Hub workflow automation.

<Note>
  Placeholder — content coming soon.
</Note>


# Automate tasks with Pharen Hub workflows
Source: https://docs.pharen.app/workflows/overview

Understand how Pharen Hub workflows chain triggers and actions to automate repetitive work across lists, docs, channels, mail, and AI agents.

<Note>
  Placeholder — content coming soon.
</Note>


# Configure workflow triggers in Pharen Hub
Source: https://docs.pharen.app/workflows/triggers

Set up event, schedule, and webhook triggers that start Pharen Hub workflows when records change, time passes, or external systems send data.

<Note>
  Placeholder — content coming soon.
</Note>


# Workspace Setup: Configure Your Pharen Hub Environment
Source: https://docs.pharen.app/workspace-setup

Learn how to name your workspace, organize teams, configure your profile, and master workspace settings to match how your team actually works.

A well-configured workspace is the difference between a tool your team tolerates and one they rely on. This guide walks you through every important configuration step — from naming and branding your workspace, to organizing teams and channels, to locking down the settings that matter for security and compliance. Work through these steps after completing the [Quickstart](/quickstart) and your workspace will be ready for real, day-to-day use.

## Workspace identity

Your workspace name and URL are the first things every team member sees. Getting them right early saves you from confusion later.

Navigate to **Settings → General** to access workspace identity settings.

### Workspace name

Your workspace name appears in the sidebar, in email notifications, and in any links shared with teammates. Use a name that's immediately recognizable — your company name, your department, or a project name depending on how broadly this workspace will be used.

* ✅ `Acme Corp`, `Acme Product Team`, `Acme — Engineering`
* ❌ `My Workspace`, `Test`, `Workspace 1`

Click the name field, type your preferred name, and click **Save changes**.

### Workspace URL

Your workspace URL is the unique identifier used within Pharen Hub. It must be lowercase with no spaces (hyphens are fine). For example, `acme-product` or `engineering-team`.

<Warning>
  Changing your workspace URL after your team is active will break any previously shared links to specific documents or channels. Set a permanent URL early and stick with it.
</Warning>

### Workspace logo

Upload a logo under **Settings → General → Workspace logo**. This appears in the sidebar and in email notifications sent from your workspace. Use a square image of at least 256×256 pixels for the best result across all contexts.

***

## Organizing with teams

Teams in Pharen Hub are groups of members that share access to a dedicated set of channels, docs, and lists. They're the primary way to organize a larger workspace without everyone drowning in irrelevant content.

<Info>
  Teams are available on the **Team plan** (up to 3 teams), **Pro plan** (up to 10 teams), and **Enterprise** (unlimited). The Free and Starter plans use a single shared workspace without separate teams.
</Info>

### Creating a team

1. Go to **Settings → Teams** and click **Create team**.
2. Give the team a **name** (e.g. `Product`, `Marketing`, `Customer Success`) and an optional **description** so members understand its purpose.
3. Set the team's **visibility**: **Open** teams are discoverable and joinable by any workspace member; **Private** teams require an invitation.
4. Click **Create**.

### Adding members to a team

Open the team from **Settings → Teams**, then click **Add members**. Search for teammates by name or email and assign each one a team-level role:

| Role           | What they can do                                               |
| -------------- | -------------------------------------------------------------- |
| **Team Admin** | Manage team settings, members, and all content within the team |
| **Member**     | Create and edit content, participate in channels               |
| **Guest**      | View content they've been explicitly granted access to         |

<Tip>
  Team membership is independent of workspace-level roles. A workspace Member can be a Team Admin within their specific team — giving them authority where they need it without elevating their global permissions.
</Tip>

### Team channels and content

When you create a team, Pharen Hub automatically creates a default channel for that team. You can create additional channels, docs, and lists scoped to the team directly from within the team view. Content created inside a team is only visible to team members by default, though individual items can be shared more broadly if needed.

***

## Configuring your profile

Your personal profile settings are separate from workspace settings and apply across all workspaces you belong to.

Click your **avatar** in the bottom-left corner and select **Profile settings**.

### Personal information

| Field             | Recommendation                                                                     |
| ----------------- | ---------------------------------------------------------------------------------- |
| **Display name**  | Use your real name so teammates can find and mention you easily                    |
| **Job title**     | Add your role — it shows in your profile card and helps people know who to loop in |
| **Profile photo** | Upload a clear headshot — it makes async communication much more personal          |
| **Time zone**     | Set this accurately; it drives notification scheduling and timestamp display       |

### Notification preferences

Under **Profile settings → Notifications**, you control exactly when and how Pharen Hub alerts you:

* **Desktop notifications** — Enable for direct messages and mentions; consider disabling for all channel activity to protect focus.
* **Email notifications** — Set the digest frequency (real-time, hourly, daily, or off). Real-time is useful for direct messages; daily digests work well for channel summaries.
* **Mobile push notifications** — Configure separately for the mobile app. Most people enable push only for direct messages and @mentions.
* **Do Not Disturb schedule** — Set quiet hours (e.g. 10 PM – 8 AM) to stop notifications outside working hours. Pharen Hub respects this even if teammates are in different time zones.

<Tip>
  You can temporarily pause all notifications with **Pause notifications** in the notification menu. Set it to pause for 30 minutes, 2 hours, or until tomorrow — useful during deep work sessions.
</Tip>

***

## Roles and permissions

Pharen Hub's permission system operates at two levels: **workspace-level roles** that apply globally, and **team-level roles** that apply within a specific team. Both can be managed from Settings.

### Workspace roles

| Role       | Access level                                                                                 |
| ---------- | -------------------------------------------------------------------------------------------- |
| **Owner**  | Full control over all workspace settings, billing, and members. Only one Owner per workspace |
| **Admin**  | Can manage members, teams, and workspace settings, but cannot access billing                 |
| **Member** | Standard access to content they've been granted permission on                                |
| **Guest**  | Limited access — can only view content explicitly shared with them                           |

Navigate to **Settings → Members** to view all members, change their roles, or remove them from the workspace.

### Content-level permissions

Individual documents, lists, and channels carry their own permission settings, independent of team membership. When you open any item, click the **Share** button in the top right to configure who can view, comment, or edit it. Options include:

* **Specific people** — Name individual members or guests.
* **Team members** — Grant access to everyone in a given team.
* **All workspace members** — Make it visible to anyone in the workspace.
* **Private (only me)** — Keep it entirely to yourself until you're ready to share.

<Warning>
  Guest users can only access content you have explicitly shared with them. They cannot browse or discover other workspace content, which makes the Guest role suitable for external collaborators and clients.
</Warning>

***

## Workspace settings reference

The **Settings** area contains several sections worth reviewing as you set up your workspace. Here's a quick reference for the most important ones:

### General

Workspace name, URL, logo, and deletion. Also where you set the **default language** for the workspace interface.

### Members

View and manage all workspace members, send invitations, change roles, and remove members. You can also configure **invitation permissions** — whether only Admins can invite, or any Member can.

### Teams

Create and manage teams, adjust team membership and visibility, and archive teams that are no longer active.

### Security

* **Two-factor authentication (2FA)** — Require all members to enable 2FA before accessing the workspace. Strongly recommended for any workspace handling sensitive data.
* **Session timeout** — Set how long an inactive session stays valid before requiring re-authentication.
* **Allowed email domains** — Restrict new sign-ups to specific email domains (e.g. only `@acme.com` addresses) to prevent unauthorized access.

### AI settings

* **AI model policy** — Choose which AI models are available to workspace members. You can restrict to specific providers or models that comply with your data policies.
* **Budget controls** — Set monthly spending caps on AI usage per member, per team, or across the whole workspace. Pharen Hub will alert you as you approach limits and can pause AI features automatically when a budget is hit.
* **Data handling** — Review how your workspace content is used for AI inference. Enterprise plans include options for stricter data residency and processing controls.

### Billing

View your current plan, upgrade or downgrade, update payment information, and download invoices. Available plans:

| Plan           | Price      | Members   | Teams     |
| -------------- | ---------- | --------- | --------- |
| **Free**       | €0/month   | 1         | —         |
| **Starter**    | €20/month  | Up to 3   | —         |
| **Team**       | €50/month  | Up to 5   | 3         |
| **Pro**        | €100/month | Up to 50  | 10        |
| **Enterprise** | Custom     | Unlimited | Unlimited |

<Note>
  All prices are per workspace per month. If you need multiple workspaces — for example, to separate client projects or subsidiaries — each workspace is billed independently.
</Note>

### API

Generate and manage REST API keys for integrating Pharen Hub with external tools and services. The Pharen Hub REST API is available at `/v1/`. See the [API reference](/api-reference/introduction) for full documentation.

***

## Setup checklist

Use this checklist to confirm your workspace is ready before you roll it out to your full team:

<Steps>
  <Step title="Set workspace name and URL">
    Go to **Settings → General** and confirm both are finalized. Avoid changing the URL after launch.
  </Step>

  <Step title="Upload a workspace logo">
    A logo makes the workspace feel official and helps members recognize notifications at a glance.
  </Step>

  <Step title="Create your teams">
    Set up the team structure that reflects your organization. Assign team admins before adding general members.
  </Step>

  <Step title="Invite members and assign roles">
    Go to **Settings → Members → Invite members** and send invitations with appropriate roles.
  </Step>

  <Step title="Configure security settings">
    Enable 2FA requirements and set up allowed email domains under **Settings → Security**.
  </Step>

  <Step title="Review AI and budget settings">
    Set your AI model policy and budget caps under **Settings → AI settings** before members start using AI features.
  </Step>

  <Step title="Set your personal notification preferences">
    Head to **Profile settings → Notifications** and configure how and when you want to be alerted.
  </Step>
</Steps>

<Tip>
  Once your workspace is configured, share a link to this documentation with your team members so they can set up their own profiles and notification preferences before their first day in the workspace.
</Tip>