PixilUI and Magic UI
Free, MIT animated components and effects for landing pages, built with React, Tailwind CSS and Motion, and Magic UI Pro with 50+ landing page sections and 9+ templates, sold once.
In short
Magic UI and PixilUI do different jobs. Magic UI is free, MIT animated components for landing pages, such as Animated Beam, Border Beam and Bento Grid, and Pro adds 50+ sections and 9+ templates, including an AI agent landing page. PixilUI is the product UI an agent needs inside the app: approval card, run timeline, tool call row, thinking state and streaming text. Many AI products use both.
Checked against Magic UI's own docs on .
Side by side
| Question | Magic UI | PixilUI |
|---|---|---|
| Made for | Landing and marketing pages | Inside the product, where an agent asks or works |
| Items | 150+ free animated components and effects; Pro: 50+ sections and 9+ templates | Approval card, run timeline, tool call row, thinking state, streaming text; agent inbox and eval table in Pro |
| Price | Free under MIT; Pro $199 once for an individual, with lifetime updates | 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 | An official MCP server | llms.txt, an agent skill and a remote MCP server; free items need no login |
| Install | npx shadcn@latest add @magicui/blur-fade | npx shadcn@latest add @pixilui/approval-card |
What Magic UI is good at
- Animated landing page pieces: beams, marquees, bento grids, device mockups, text effects and backgrounds.
- A free MIT library with about 23,000 GitHub stars.
- Pro sections and templates for SaaS, startup, developer tool, mobile and AI agent landing pages.
- An official MCP server for Cursor, Windsurf, Claude and Cline.
What PixilUI adds
- Product UI for agents rather than marketing effects: approvals, runs, tool calls, thinking and streaming text.
- Each item's states, keys and reduced-motion behavior listed on its page.
- Two design styles, quiet and lively, from one token set.
Install
Magic UI
npx shadcn@latest add @magicui/blur-fadepnpm dlx shadcn@latest add @magicui/blur-fadeyarn dlx shadcn@latest add @magicui/blur-fadebunx --bun shadcn@latest add @magicui/blur-fadePixilUI, 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
Use Magic UI on the landing page and PixilUI in the app. They rarely meet on one screen, so their styling never has to agree.
Questions
Magic UI or PixilUI for an AI product?
Both, for different pages. Magic UI for the landing page that sells the product, PixilUI inside the product where the agent asks for approval, runs steps, calls tools and streams text.
Can Magic UI and PixilUI share a project?
Yes. Both install with the shadcn CLI, and PixilUI lands in its own components/pixilui folder, so neither overwrites the other.
More comparisons
- PixilUI and shadcn/ui
- PixilUI and AI Elements
- PixilUI and assistant-ui
- PixilUI and CopilotKit
- PixilUI and prompt-kit
- PixilUI and Arc
- PixilUI and affectUI
- PixilUI and beUI
- PixilUI and React Bits
- PixilUI and AI SDK Agents
- PixilUI and BoardUI
- PixilUI and ReUI
- PixilUI and Aceternity UI
- PixilUI and Kibo UI
- PixilUI and Tool UI
- PixilUI and LlamaIndex chat-ui
- PixilUI and Chatbot UI
- PixilUI and Shadcnblocks
- PixilUI and shadcn.io
- PixilUI and Agents Kit
Sources
Read on . If something here no longer matches Magic UI's site, write to hello@pixilui.com and we will fix it.