affectui

Website  ·  Browse components  ·  Docs  ·  Install  ·  Pro

UI for AI agents. affectUI is a library of React components for what agents do – runs, tool calls, traces, handoffs, approvals and context – and for the rest of your app: inputs, menus, charts, screens, illustrations and motion. Every item is one .tsx file with its styles inside: no Tailwind, no CSS setup, no animation library. Install it with the shadcn CLI, or let Claude Code, Cursor or Codex add it through the MCP server, and it is source you own.

Showcase

Agent components, recorded live from affectui.com. Items marked ^Pro are part of affectUI Pro and are not in this repository; everything else installs from here for free.

Agent Tree Pro Who started whom	Tool Call Card An agent's tool call in one line
Trace Waterfall Pro Where the time and money of an agent run go	Decision Inbox Open decisions with two quick answers each
Agent Inbox Pro All your background agent tasks in one calm list	Thinking Loader A small working pill for AI replies
Context Map Pro What fills an agent's context window, as a living treemap	Agent Handoff Pro A task passed from agent to agent like a relay

Contents

• Why affectUI
• Install
• Usage
• Use it with AI tools
• Components
• Blocks
• Illustrations
• Motion
• affectUI Pro
• Contributing
• License

Why affectUI

• Made for agents. Components for what agents actually do: trees of sub-agents, tool calls, traces with cost per step, handoffs, approvals and the context window – live states, not static mockups.
• Agent-ready. An MCP server and llms.txt let Claude Code, Cursor, Codex or v0 find and add items for you.
• One file each. Every component is a single .tsx file with its styles inside. Nothing to configure, no CSS framework required.
• Motion that feels finished. Morphs, staggered reveals, rolling numbers and smooth state changes, and all of it respects prefers-reduced-motion.
• Dark mode built in. Each item switches when an ancestor has the class dark or data-theme="dark".
• Accessible by default. Real buttons, labels, keyboard support and live regions where they matter.
• Responsive. Container queries, so items adapt to the space they get, not just the window.

Install

Requirements

• React 19, with or without TypeScript
• Any React setup: Next.js, Vite, Remix or plain React
• The @/* import alias if you use the shadcn CLI (Next.js and shadcn set it up by default)

With the shadcn CLI

Every item has its own registry URL. Run the command from its page on affectui.com or from the tables below:

npx shadcn@latest add https://www.affectui.com/r/reaction-bar.json

The file lands in components/ui, ready to import.

Prefer short names? Register the namespace once in components.json:

{
  "registries": {
    "@affectui": "https://www.affectui.com/r/{name}.json"
  }
}

npx shadcn@latest add @affectui/reaction-bar

Copy and paste

Open the item's folder in this repository (components/, illustrations/ or motion/), copy the file into your project and import it. That's all it takes.

Usage

import { ReactionBar } from "@/components/ui/reaction-bar";

export function PostActions({ post }) {
  return (
    <ReactionBar
      reactions={{ like: { count: post.likes, active: post.liked }, comment: { count: post.comments } }}
      onReact={(key, state) => api.react(post.id, key, state.active)}
    />
  );
}

Props, keyboard support and accessibility notes for every item are on its page, e.g. Reaction Bar.

Use it with AI tools

affectUI is agent-ready. Connect the MCP server once and Claude Code, Cursor, VS Code or Codex can search every item, read its docs and add it for you:

claude mcp add --transport http affectui https://www.affectui.com/api/mcp

Other clients: add { "mcpServers": { "affectui": { "url": "https://www.affectui.com/api/mcp" } } } to their MCP config. Without any setup, point your assistant at llms.txt or llms-full.txt. Every page on affectui.com also has a Copy prompt bar for Claude, ChatGPT / Codex, Cursor and v0. Setup details: Using with AI.

Components

Blocks

Illustrations

Motion

affectUI Pro

87 more components, screens, blocks and illustrations, including the agent components above (Agent Tree, Agent Inbox, Trace Waterfall, Context Map, Agent Handoff and more), full app screens and blocks, are part of affectUI Pro: a one-time purchase with lifetime updates. Their source is not in this repository.

Contributing

Found a bug or missing a component? Open an issue. The files here are synced from the affectUI source on every release, so fixes land through issues rather than pull requests. See CONTRIBUTING.md.

License

Everything in this repository is released under the MIT license. Use it in personal and commercial projects.
Logos shown in previews belong to their owners and are only sample content.