Overview
The React component library your agent already needs.
TheoUI is the visual surface of the usetheo ecosystem. It is the design system — codename Violet Forge — that powers TheoCode Desktop, every TheoKit app, and the Theo PaaS dashboard. And because it ships as a normal React package, you can adopt it standalone in any project.
shadcn-compatible. Tailwind 4 native. Dark-first.
Install
pnpm add @usetheo/uiWorks with React 19, Next.js 16, Vite, Remix, Tanstack Start, and any framework that runs React 19 + Tailwind 4.
What is in the box
Tokens
A complete design system — colors, type scale, motion, shadows, radii — exposed as CSS custom properties so theming is one selector deep.
Primitives
Buttons, inputs, dialogs, popovers, tooltips. Built on Radix UI, themed to Violet Forge, accessible by default.
Agent components
Chat bubbles, tool-call cards, streaming code blocks, file pickers, artifact viewers — the surface area an AI agent UI actually needs.
Layout primitives
Sidebars, command palettes, multi-pane workspaces — the patterns TheoCode Desktop uses.
Icons
Lucide React 1.x preconfigured, plus a small set of usetheo-specific glyphs.
Fonts
Geist and Geist Mono loaded with sensible fallbacks. Self-hosted entrypoint available.
Quick start
import { Button, Card } from '@usetheo/ui';
import '@usetheo/ui/styles.css';
export function Example() {
return (
<Card>
<h2>Welcome to Violet Forge</h2>
<p>Drop a component in and it just looks right.</p>
<Button>Get started</Button>
</Card>
);
}That is the entire surface for a typical component. No theme provider to wire,
no cn() helper to import — the styles come with the package.
Default theme: dark
Violet Forge is dark-dominant (the design system call from 2026-05-15). Light mode is supported and themable; dark is the canonical surface you should design against first.
<html className="dark">
{/* … */}
</html>TheoUI is a community auxiliary in the usetheo ecosystem. It does not require Theo PaaS, TheoCode, or TheoKit to be useful — adopt it in any React project that wants the Violet Forge aesthetic.
Where to go next
TheoKit ships TheoUI
If you start with TheoKit, you already have TheoUI wired and themed — no setup required.
Build a custom agent UI
Pair TheoKit-SDK (agent primitives) with TheoUI (components) for a fully custom stack.
The TheoCode Desktop look
TheoCode Desktop is built on TheoUI. Use it as a reference implementation of a real agent UI.