PixilUI and affectUI
Agent-ready React UI for AI products and SaaS: 129 components, screens, blocks, illustrations and motion effects, each one .tsx file with its styles inside. 40 are free under MIT.
In short
affectUI and PixilUI both make UI for AI agents. affectUI has the larger catalog (129 items, 40 free) and ships each item as one .tsx file with no Tailwind and no other dependencies. PixilUI has fewer items with more states and motion designed per item, on one shared token foundation in two design styles. Pick by catalog breadth, or by depth per item.
Checked against affectUI's own docs on .
Side by side
| Question | affectUI | PixilUI |
|---|---|---|
| Items | 129: 40 free under MIT, 89 Pro | 13: 11 free under MIT, 2 Pro |
| Format | One .tsx file per item with its styles inside; no Tailwind or animation library | Items on a shared foundation (tokens, motion presets) with Tailwind v4; free items also ship as standalone files |
| Looks | Many items in two variants (slugs ending in -clean) | Two design styles, quiet and lively, from one token set |
| Lands in | components/ui | components/pixilui |
| Price | Individual $199 once, Team $499 once | Free items under MIT. Pro $199 once (the first 100 at $99 when Pro opens), Pro yearly $129, Team $599 once for 10 people |
| Agent setup | llms.txt and a Streamable HTTP MCP server | llms.txt, an agent skill and a Streamable HTTP MCP server |
| Install | npx shadcn@latest add @affectui/<slug> | npx shadcn@latest add @pixilui/<slug> |
What affectUI is good at
- A large agent shelf: 129 items across components, screens, blocks, illustrations and motion effects.
- One file per item with its styles inside, so an item drops into any React 19 app.
- Two looks for many items, installed as separate slugs.
- Agent setup: llms.txt and an MCP server.
What PixilUI adds
- More states designed per item, with the motion between them from one token set and a reduced-motion branch in every animation.
- One foundation the whole app shares, in two design styles, so every item changes together.
- An agent skill that teaches a coding agent the design rules, alongside llms.txt and the MCP server.
- A 14-day refund before any Pro source is installed.
Install
affectUI
npx shadcn@latest add @affectui/buttonpnpm dlx shadcn@latest add @affectui/buttonyarn dlx shadcn@latest add @affectui/buttonbunx --bun shadcn@latest add @affectui/buttonPixilUI, after adding the registry to components.json (installation)
npx shadcn@latest add @pixilui/approval-cardpnpm dlx shadcn@latest add @pixilui/approval-cardyarn dlx shadcn@latest add @pixilui/approval-cardbunx --bun shadcn@latest add @pixilui/approval-cardUsing both
They can share an app in separate folders. Keep one library per surface: their single-file styles and PixilUI's tokens do not read each other.
Questions
affectUI or PixilUI?
affectUI if you want the widest set of agent and SaaS items now, each in one file. PixilUI if you want fewer items with every state and the motion between them designed, on one token foundation shared by the whole app.
Can they share a project?
Yes. affectUI installs into components/ui and PixilUI into components/pixilui, so neither overwrites the other.
Do both work without Tailwind?
affectUI items need no Tailwind. PixilUI needs Tailwind v4 from the registry, and its free items also ship as single standalone .tsx files that need React and nothing else.
More comparisons
Sources
Read on . If something here no longer matches affectUI's site, write to hello@pixilui.com and we will fix it.