affectUI：面向 AI 产品的 React 组件库，每个组件都是单个 .tsx 文件

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.

Showcase

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.

Contents

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

Why affectUI

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

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

Every page on affectui.com has a Copy prompt bar: one click copies a ready-made prompt (what the item is, the install command, usage and docs link) and opens it in Claude, ChatGPT / Codex, Cursor or v0. The AI adds the component to your project and adapts the content to your app.

Components

Illustrations

Motion

affectUI Pro

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

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.

If affectUI saves you time, a ⭐ helps others find it.

Made by Flo