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 Compound component for a full chat interface — manages conversation state, message rendering, input, send/stop buttons, and streaming.
Message Renders a single message with role-aware layout, markdown content, and tool-call display slots.
StreamingText Renders in-progress assistant output with token-by-token display.
ProviderPicker Compound component for selecting an AI provider and model from the user’s configured list.
ToolActivity Displays tool-call invocations and their results inline within a message.
ConnectionStatus 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;
}