flohoeller/affectui

Website  ·  Browse components  ·  Docs  ·  Install  ·  Pro

affectUI is a library of handcrafted React components, illustrations and motion effects for AI products and modern SaaS apps. 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 copy the file, and it is source you own.

A few favorites, 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 Team A prompt types itself and branches out into three agents, each with a role and overlapping tool logos	Reaction Bar Like, comment, repost and share in one pill – icons pop and fill, counts roll in digit by digit
Team Invite Connected teammates – a cursor drags a new one into the empty slot, the line turns solid and they go online	Command Menu Pro Search and run anything from one field – tool actions with logos and ⌘1–⌘5, everyday commands with icons
Progress Tracker Onboarding checklist with an animated progress bar, ticks that draw themselves and auto play	KPI Chart Pro Metric card with a multi-line chart and a tooltip that follows the pointer
Model Wheel AI model names on a turning drum – the rows bend away at the edges and each model lands on a soft gray fill	Logo Cluster Your mark on a white disc in the middle – company logos bounce out of it and settle around it

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

• 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.

• 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)

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

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.

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.

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.

100 more components, screens, blocks and illustrations, including the Command Menu, the Chat Composer, the KPI Chart, the Pricing Plans block and full app screens, are part of affectUI Pro: a one-time purchase with lifetime updates. Their source is not in this repository.

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.

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.