affectUI › Compare

affectUI vs shadcn/ui

shadcn/ui gives you general building blocks – buttons, dialogs, inputs – styled with Tailwind. affectUI gives you finished pieces for AI products – chat composers, agent trees, tool calls, approvals – each as one self-contained file. They don't compete: affectUI installs through the shadcn CLI and sits next to shadcn/ui in the same project.

What each one is

  • shadcn/ui – general UI primitives (button, dialog, select, table…) you copy into your project, styled with Tailwind CSS and built on headless libraries
  • affectUI – higher-level components, screens and blocks for AI and agent products, each one .tsx file with its own styles and motion, no Tailwind or other dependencies

Where they differ

  • Scope: shadcn/ui covers the basics of any app; affectUI covers what AI products need on top – streaming answers, thinking states, tool calls, multi-agent views, approvals
  • Styling: shadcn/ui uses Tailwind classes; affectUI components carry their own CSS with variables for colors, so they work with or without Tailwind
  • Finish: shadcn/ui is intentionally plain so you style it; affectUI ships designed states and motion, in two styles (classic and clean)
  • Price: shadcn/ui is free; affectUI has free MIT components and a one-time Pro license for the rest

Using both together

affectUI is a shadcn registry, so the same CLI installs both. Register affectUI once in components.json to use short names, and its components land in components/ui next to your shadcn/ui ones.

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

// then
npx shadcn@latest add @affectui/tool-call-card

Which to pick

  • Building a general app or design system from scratch – start with shadcn/ui
  • Building an AI product and want chat, agent and approval UI that looks finished – add affectUI
  • Most AI products use both: shadcn/ui for forms and dialogs, affectUI for the AI-specific parts
  • Chat Composer – Prompt composer with model picker, voice input, app connections and approval request
  • Agent Tree – Who started whom – an orchestrator and its sub-agents as a live tree, with status, cost and time on every card, costs rolling up each branch, and branches that fold to one line
  • Tool Call Card – An agent's tool call in one line – live timer, status and summary, folds open to highlighted arguments and result with copy, retry on errors and a group that sums them up

Questions

Is affectUI built on shadcn/ui?

No. affectUI components are self-contained and don't import shadcn/ui, but they install through the shadcn CLI and live in the same components/ui folder.

Does affectUI need Tailwind?

No. Each component carries its own styles, so it works in projects with or without Tailwind.

Can I use affectUI with v0, Cursor or Claude?

Yes. affectUI has an MCP server and llms.txt, so coding assistants can search the library, read the docs and add components for you.

Updated 2026-10-29