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.
## 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.
 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 
## Contents
- Why affectUI
- Install
- Usage
- Use it with AI tools
- Components
- Blocks
- 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.
## Install
### 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:
 [code] 
The file lands in `components/ui`, ready to import.
Prefer short names? Register the namespace once in `components.json`:
 [code] 
 [code] 
### 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
 [code] 
Props, keyboard support and accessibility notes for every