DEDUPED Hot AI repos, turned into use cases Get 5 a day

What you can do with Affectui

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.

Trended earlier

flohoeller/affectui on GitHub

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.

What do you want to do?

4 use cases

  • Add a polished message action bar to an AI chat

    Drop a finished copy, regenerate, feedback and read-aloud bar under each AI reply in one file.

    View prompt
    In the affectui repo context, install the message-actions item into the <project-path> Next.js or React 19 project using `npx shadcn@latest add https://www.affectui.com/r/message-actions.json`, then render it under the last assistant message in <chat-component-file>. Expected output: a MessageActions import and usage in that file with your existing handlers wired to props. Verify the project still builds and the bar renders with no console errors.

  • Let an AI coding agent find and add UI items for you

    Connect the affectUI MCP server so Claude Code, Cursor or Codex can search items and install them.

    View prompt
    Use the affectUI MCP server at https://www.affectui.com/api/mcp to search for <component-need> and add the best match to the <project-path> React 19 project. Expected output: the new component file in components/ui and a short note naming the item chosen. Verify that the project builds after the file is added.

  • Build a review inbox where humans approve agent actions

    Combine Decision Inbox, Email Draft and Comment Thread so people can approve or discard agent output.

    View prompt
    Install the decision-inbox, email-draft and comment-thread items from https://www.affectui.com/r/<name>.json into the <project-path> React 19 project, then build an approvals page in <page-file> that passes pending agent items into them. Expected output: one page that renders all three components with your data and event handlers. Verify that answering a decision and discarding a draft each call your handler once.

  • Add an onboarding checklist with a live progress bar

    Show new users a step list whose progress bar and ticks update as they finish each task.

    View prompt
    Add the progress-tracker item from https://www.affectui.com/r/progress-tracker.json to the <project-path> React 19 project and render it on <dashboard-file> with the onboarding steps from <steps-source>. Expected output: a rendered checklist whose progress bar matches the number of completed steps. Verify that the bar value changes when one step's completed state changes.

How to use Affectui

  1. Check you have what it needs: 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.
  2. Open flohoeller/affectui on GitHub and read the README and license.
  3. Run npx shadcn@latest add https://www.affectui.com/r/message-actions.json in the project root.
  4. Open the generated file in components/ui and read the props on the item page at https://www.affectui.com/components/message-actions.
  5. Import the component into the chat message renderer with import { MessageActions } from "@/components/ui/message-actions";. (inferred, check the README)
  6. Connect your own copy, regenerate and feedback handlers to the component props.

These steps come from our top use case, Add a polished message action bar to an AI chat, which also has a copy-paste agent prompt.

Affectui alternatives · Best AI repos for Software and DevOps

About this repo

  • Who it is forFrontend 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.
  • Why it is hot
  • LanguageTypeScript
  • Sourcegithub.com/flohoeller/affectui · Back to Hot repos

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
Maintain Affectui? Add the Featured on Deduped badge

Paste this into your README:

[![Featured on Deduped](https://dedupedai.com/badge/flohoeller-affectui.svg)](https://dedupedai.com/use-cases/flohoeller-affectui/?ref=badge)

More badge styles and HTML

Questions about Affectui

What is Affectui?

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. It is an open-source project on GitHub: https://github.com/flohoeller/affectui.

Who is Affectui for?

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.

What can I do with Affectui?

4 use cases so far, for example: Add a polished message action bar to an AI chat; Let an AI coding agent find and add UI items for you; Build a review inbox where humans approve agent actions. Each has steps and a copy-paste agent prompt.

What do I need to run Affectui?

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.

What are alternatives to Affectui?

Other hot AI repos in Software and DevOps: Harness2, iFixAi, Orca, Diagram Design, AI Memory.

Is Affectui safe to run?

Deduped does not own, audit or vouch for it. Read the README and license, run it on your own systems first and review every command before you run it.