PixilUI and Arc
A React UI library with calm motion: 120 free components and 22 blocks under MIT, Pro motion components and blocks, a shadcn registry, an MCP server and an agent skill.
In short
Arc is the broader library: 120 free components and 22 blocks, with Pro adding 120 motion components and 115 blocks, styled with CSS Modules so it works without Tailwind. Choose Arc to cover a whole app's UI. Choose PixilUI for AI product moments designed in depth (approval card, run timeline, tool call row, thinking state, streaming text) on Tailwind v4.
Checked against Arc's own docs on .
Side by side
| Question | Arc | PixilUI |
|---|---|---|
| Free | 120 components and 22 blocks, MIT | 11 components, MIT |
| Pro | Adds 120 motion components and 115 blocks | Agent inbox and eval table, more as they ship |
| Price | Pro $149 a year or $249 once; Team $799 once or $449 a year for up to 10 people | Free items under MIT. Pro $199 once (the first 100 at $99 when Pro opens), Pro yearly $129, Team $599 once for 10 people |
| Styling | CSS Modules and CSS variables; Tailwind not required | Tailwind v4 utilities on its own tokens, in two design styles; free items also ship as standalone files |
| MCP server | Remote server; a free account signs in on first connect | Remote server; free items need no login |
| Agent skill and llms.txt | Yes, both | Yes, both |
| Refunds | Generally final; a refund if a purchased piece is broken and cannot be fixed | 14 days if no Pro source was installed; after that if an item is broken and not fixed within 14 days |
| Install | npx shadcn@latest add @uiarc/button | npx shadcn@latest add @pixilui/approval-card |
What Arc is good at
- Breadth: 120 free components and 22 blocks, and a Pro shelf of motion components and blocks.
- Works without Tailwind: CSS Modules and CSS variables.
- Agent setup: llms.txt, llms-small and llms-full, an agent skill and a remote MCP server.
- Calm motion across the whole library.
What PixilUI adds
- AI product moments designed in depth, with their waiting, error and finished states: approval card, run timeline, tool call row, thinking state, streaming text.
- Two design styles, quiet and lively, from one token set, so the same items fit a calm or a playful product.
- Free items served by the MCP server with no login.
- A 14-day refund before any Pro source is installed.
Install
Arc
npx shadcn@latest add @uiarc/button @uiarc/dialogpnpm dlx shadcn@latest add @uiarc/button @uiarc/dialogyarn dlx shadcn@latest add @uiarc/button @uiarc/dialogbunx --bun shadcn@latest add @uiarc/button @uiarc/dialogPixilUI, 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
Arc can carry the app's general UI while PixilUI carries the agent moments. Each reads its own foundation stylesheet, so keep one library per surface rather than mixing them on one card.
Questions
Arc or PixilUI for an AI product?
Arc if you want one library for the whole app, from buttons to settings blocks. PixilUI if the agent moments are the product and you want them designed in depth: approvals, runs, tool calls, thinking and streaming text. They can share an app.
Can Arc and PixilUI share a project?
Yes. Both install with the shadcn CLI, Arc into components/arc and PixilUI into components/pixilui, each with its own foundation stylesheet.
Do both work with Claude Code and Cursor?
Yes. Both publish llms.txt, an agent skill and a remote MCP server. Arc's MCP server asks for a free account on first connect; PixilUI's serves free items without a login.
More comparisons
Sources
Read on . If something here no longer matches Arc's site, write to hello@pixilui.com and we will fix it.