Which Magic UI component should you start with?
Start with the job on your page. Choose Marquee for a scrolling row of logos, Animated List for items that appear in sequence, or Bento Grid to organize static cards. Open that component’s demo and confirm the behavior before copying any code.
- Use the installation instructions for your project version. The documentation keeps a separate legacy path.
- Try one component on a scratch route. Check text contrast, keyboard use, and what happens when reduced motion is enabled.
Start with one interaction
Choose an effect that supports a task: drawing attention to a feature, showing progress or presenting a product. Keep the main action understandable before introducing decorative motion.
Match the installation to your stack
Magic UI uses a shadcn-compatible installation flow. Current and legacy documentation differ around Tailwind versions; an existing Tailwind v3 app should consult the legacy guidance before copying current setup steps.
Separate component access from AI context
The MCP integration can provide component context to an AI development tool. It is optional to the component installation workflow. The public repository uses MIT; the separate Pro registry has its own access requirements.
A few more details
Do I need MCP to use Magic UI?
No. The installation guide covers adding components directly. MCP is an additional way to supply component information to an AI-assisted editor.
Does a component preview prove it works well in my app?
No. Review the integrated page on mobile, with a keyboard and with reduced-motion preferences. A library preview does not measure your page's actual performance.
Sources & maker notes
This guide is based on the cited documentation and maker sources. vibeforthat has not run an independent installation or end-to-end product test for this article.