AI-native components
for React

18 primitives every AI product needs — streaming, prompts, confidence, feedback, citations, refusals, thinking blocks, tool calls, markdown, status indicators, token usage, model selection, source cards, and chat threads. Built on Radix conventions. Themeable. Works with shadcn/ui.

Get startednpm i @arc-lo/ui

Components

<StreamingText />

Token-by-token text rendering with 6 states: pending, streaming, done, interrupted, error, and ratelimit.

<PromptBox />

Auto-growing textarea with context chips, suggestions, and Enter-to-submit.

<ConfidenceBadge />

Visual indicator for high, medium, low, or unknown confidence levels.

<FeedbackBar />

Thumbs up/down, copy, and regenerate toolbar for AI responses.

<CitationInline />

Inline source attribution with hover preview tooltips.

<RefusalCard />

Graceful handling of declined requests with suggested alternatives.

<ThinkingBlock />

Collapsible chain-of-thought display for AI reasoning with auto-collapse.

<ToolCall />

Tool invocation display with status, collapsible inputs and outputs for agent UIs.

<MarkdownRenderer />

Streaming-aware markdown with code blocks, lists, links, and blockquotes.

<StatusIndicator />

Animated status label with letter-by-letter light sweep for AI states.

<TokenUsage />

Visual token and cost meter showing input/output usage against a budget.

<ModelSelector />

Dropdown selector for AI models with badges and descriptions.

<SourceCard />

RAG retrieval result card with relevance scoring, title, and content preview.

<ChatThread />

Conversation container with user, assistant, and system messages — auto-scrolling, avatars, and timestamps.

<FileAttachment />

File preview chips and cards with type icons, upload progress, and remove button.

<CodeBlock />

Standalone code display with copy button, line numbers, and language badge.

<ConversationBranch />

Branch navigation for regenerated responses — compact '2/3 ←→' control.

<SuggestTopics />

Starter prompt cards for empty chat states — help users begin conversations.