{
 "schema_version": 1,
 "generated": "2026-10-20",
 "repo": "flohoeller/affectui",
 "name": "affectui",
 "owner": "flohoeller",
 "slug": "flohoeller-affectui",
 "github": "https://github.com/flohoeller/affectui",
 "what": "affectUI is a free, open source library of handcrafted React components, illustrations and motion effects, each delivered as one .tsx file with its styles inside.",
 "why": "",
 "language": "TypeScript",
 "requirements": [
  "A React 19 project, with or without TypeScript",
  "A setup that supports the shadcn CLI, such as Next.js or shadcn-configured projects with the @/* import alias",
  "Access to the affectui.com registry URLs"
 ],
 "audience_note": "Frontend developers and their AI coding agents who are building AI chat, SaaS or dashboard interfaces and want finished-looking UI pieces without adding a CSS framework or animation library.",
 "risk": "none",
 "section": "earlier",
 "weekly_rank": null,
 "category": "Software and DevOps",
 "url": "https://dedupedai.com/use-cases/flohoeller-affectui/",
 "use_case_count": 4,
 "use_cases": [
  {
   "id": "flohoeller-affectui--add-ai-message-actions-to-chat",
   "title": "Add a polished message action bar to an AI chat",
   "best": true,
   "url": "https://dedupedai.com/use-cases/flohoeller-affectui/add-ai-message-actions-to-chat/",
   "json": "https://dedupedai.com/use-cases/u/flohoeller-affectui/add-ai-message-actions-to-chat.json"
  },
  {
   "id": "flohoeller-affectui--let-ai-coding-agent-install-affectui-items",
   "title": "Let an AI coding agent find and add UI items for you",
   "best": false,
   "url": "https://dedupedai.com/use-cases/flohoeller-affectui/let-ai-coding-agent-install-affectui-items/",
   "json": "https://dedupedai.com/use-cases/u/flohoeller-affectui/let-ai-coding-agent-install-affectui-items.json"
  },
  {
   "id": "flohoeller-affectui--build-agent-approval-inbox",
   "title": "Build a review inbox where humans approve agent actions",
   "best": false,
   "url": "https://dedupedai.com/use-cases/flohoeller-affectui/build-agent-approval-inbox/",
   "json": "https://dedupedai.com/use-cases/u/flohoeller-affectui/build-agent-approval-inbox.json"
  },
  {
   "id": "flohoeller-affectui--add-onboarding-progress-checklist",
   "title": "Add an onboarding checklist with a live progress bar",
   "best": false,
   "url": "https://dedupedai.com/use-cases/flohoeller-affectui/add-onboarding-progress-checklist/",
   "json": "https://dedupedai.com/use-cases/u/flohoeller-affectui/add-onboarding-progress-checklist.json"
  }
 ],
 "disclaimer": "Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk."
}