# Overview

## Components Library

Headless primitives and copy-paste blocks for building AI chat interfaces

Arlopass ships two complementary layers for UI development:

| Package                   | What it is                                                | Install                           |
|--------------------------|----------------------------------------------------------|-----------------------------------|
| `@arlopass/react-ui`     | Headless compound components — no styles, full control   | `pnpm add`                       |
| `@arlopass/ui`           | Styled Tailwind blocks — copy into your project via CLI  | `pnpm dlx @arlopass/ui add`      |

### Install

```
pnpm add @arlopass/react-ui
```

### Quick example

A fully functional uncontrolled chat in under 20 lines. The `Chat.Root` manages conversation state internally — just drop it in and go.

```
import { Chat, StreamingText, Message } from "@arlopass/react-ui";

function MyChat() {
  return (
    <Chat.Root systemPrompt="You are a helpful assistant.">
      <Chat.Messages>
        {(messages, streamingContent) => (
          <>
            {messages.map((msg) => (
              <Chat.Message key={msg.id} message={msg}>
                <Message.Root>
                  <Message.Content />
                </Message.Root>
              </Chat.Message>
            ))}
            {streamingContent && <StreamingText content={streamingContent} />}
          </>
        )}
      </Chat.Messages>
      <Chat.Input placeholder="Type a message…" />
      <Chat.SendButton>Send</Chat.SendButton>
    </Chat.Root>
  );
}
```

### Primitives

All primitives are exported from `@arlopass/react-ui`. Each is a compound component with dot-notation sub-components (e.g. `Chat.Root`, `Chat.Messages`).

| Component                                      | Description                                                                                      |
|------------------------------------------------|--------------------------------------------------------------------------------------------------|
| [Chat](/content/docs/components/chat/index.html)        | Compound component for a full chat interface — manages conversation state, message rendering, input, send/stop buttons, and streaming. |
| [Message](/content/docs/components/message/index.html)    | Renders a single message with role-aware layout, markdown content, and tool-call display slots.  |
| [StreamingText](/content/docs/components/streaming-text/index.html) | Renders in-progress assistant output with token-by-token display.                                  |
| [ProviderPicker](/content/docs/components/provider-picker/index.html) | Compound component for selecting an AI provider and model from the user’s configured list.      |
| [ToolActivity](/content/docs/components/tool-activity/index.html)     | Displays tool-call invocations and their results inline within a message.                       |
| [ConnectionStatus](/content/docs/components/connection-status/index.html) | Renders content conditionally based on the Arlopass extension connection state (connected / disconnected / not installed).  |

### Data attributes

Primitives expose semantic `data-*` attributes on their rendered DOM elements so you can style states with plain CSS — no JavaScript required.

| Attribute      | Purpose                       | Example values                                    |
|----------------|-------------------------------|--------------------------------------------------|
| `data-role`    | Message author role           | `user`, `assistant`, `system`                    |
| `data-state`   | Component state               | `idle`, `streaming`, `error`                     |
| `data-status`  | Connection status             | `connected`, `disconnected`, `not-installed`    |

```
/* Style user messages differently using data attributes */
[data-role="user"] {
  background: #2563eb;
  color: white;
}

[data-role="assistant"] {
  background: #f4f4f5;
}

[data-state="streaming"] {
  opacity: 0.8;
}

[data-status="connected"] {
  color: #22c55e;
}
```