Getting Started

arclo is an AI-native design system for React. It provides 20 components every AI product needs — primitives that don't exist in MUI, Tailwind, Radix, or shadcn/ui.

Installation

bash

npm install @arc-lo/ui

Setup

Add the styles import to your CSS file:

css

@import "tailwindcss";
@import "@arc-lo/ui/styles.css";

That's it — theme variables, dark mode, and Tailwind utility scanning are all included. See Theming for color customization.

Quick start

tsx

import {
  ChatThread,
  StreamingText,
  FeedbackBar,
  ThinkingBlock,
  PromptBox,
} from "@arc-lo/ui";

function Chat({ response }) {
  return (
    <ChatThread.Root className="h-[500px]">
      <ChatThread.Messages>
        <ChatThread.UserMessage name="You">
          How does this work?
        </ChatThread.UserMessage>

        <ChatThread.AssistantMessage name="Claude">
          <ThinkingBlock.Root state="done" duration={3} collapseOnDone>
            <ThinkingBlock.Trigger />
            <ThinkingBlock.Content>Analyzing...</ThinkingBlock.Content>
          </ThinkingBlock.Root>

          <StreamingText.Root text={response} speed={30}>
            <StreamingText.Content />
            <StreamingText.Cursor />
            <StreamingText.Toolbar>
              <FeedbackBar.Root>
                <FeedbackBar.ThumbsUp />
                <FeedbackBar.ThumbsDown />
                <FeedbackBar.Copy />
              </FeedbackBar.Root>
            </StreamingText.Toolbar>
          </StreamingText.Root>
        </ChatThread.AssistantMessage>

        <ChatThread.ScrollAnchor />
      </ChatThread.Messages>
    </ChatThread.Root>
  );
}

Philosophy

Radix-style composable API — compound components with Root + parts. Use only what you need.
Built for AI states — pending, streaming, done, interrupted, error, and ratelimit are first-class states, not afterthoughts.
Works with shadcn/ui — same Tailwind + Radix conventions. Drop arclo components into an existing shadcn project.
Trust & uncertainty — visual language for confidence levels, citations, and refusals. The layer no other DS has.
Agent-ready — ThinkingBlock and ToolCall handle chain-of-thought reasoning and tool invocations out of the box.
Media generation — ImageGen and VideoGen for AI-generated images and videos with progress, states, and playback.
Themeable — 6 built-in color themes, CSS custom properties, light + dark mode.

Components

Streaming & rendering

Component	Purpose
`StreamingText`	Token-by-token rendering with 6 lifecycle states
`MarkdownRenderer`	Streaming-aware markdown with code blocks, lists, and links
`StatusIndicator`	Animated AI status label with letter-by-letter light sweep
`CodeBlock`	Code display with copy button, line numbers, and language badge

Input & interaction

Component	Purpose
`PromptBox`	AI prompt input with auto-grow, chips, and suggestions
`FeedbackBar`	Response actions toolbar — thumbs, copy, regenerate
`ModelSelector`	Dropdown selector for AI models with badges
`SuggestTopics`	Starter prompt cards for empty chat states
`ConversationBranch`	Branch navigation for regenerated responses
`FileAttachment`	File preview chips/cards with type icons and upload progress

Trust & transparency

Component	Purpose
`ConfidenceBadge`	Visual confidence indicators (badge, dot, inline)
`CitationInline`	Inline source references with hover previews
`RefusalCard`	Declined request handling with alternatives

Reasoning & agents

Component	Purpose
`ThinkingBlock`	Collapsible chain-of-thought reasoning display
`ToolCall`	Tool invocation with status, inputs, and outputs
`ChatThread`	Conversation container with user/assistant/system messages

Media generation

Component	Purpose
`ImageGen`	Image generation with blur reveal, progress, and 5 states
`VideoGen`	Video generation with stages, player, progress, and 6 states

Analytics & data

Component	Purpose
`TokenUsage`	Visual token/cost meter with input/output proportions
`SourceCard`	RAG retrieval result with relevance scoring