magicui
Magic UI is a collection of animated React components and effects built with Tailwind CSS and Framer Motion, aimed at design engineers who want polished landing-page and marketing-site visuals. Components are copy-pasted into your project (shadcn/ui-style) rather than installed as a runtime dependency.
Embed badge
[](https://opensources.dev/resource/magicui)MITPermissive — free to use in commercial and proprietary software, with attribution.View license →
Production readiness
4/5- Actively maintainedCommits in the last 6 months
- No known vulnerabilitiesNot yet scanned
- Clear, usable licenseMIT (permissive)
- Proven adoptionWidely used
- Has documentationDocumentation indexed
Our analysis
A library of pre-built, animated UI components (gradients, marquees, animated beams, text effects, etc.) for React, distributed in the shadcn/ui copy-into-your-codebase model and styled with Tailwind CSS and Framer Motion.
When to use magicui
Use it when building marketing pages, landing pages, or product sites that need eye-catching motion and visual flourish quickly, especially if you already use Tailwind, Next.js, and shadcn/ui. Ideal for design engineers who want ownership of the component source.
When not to
Skip it for data-heavy application UIs that need accessible, headless primitives (forms, tables, dialogs with strict a11y), or non-React stacks. It complements rather than replaces a full component system like Radix/shadcn for app chrome.
Strengths
- Large catalog of distinctive animated effects that are hard to build from scratch
- Copy-paste model gives full source ownership and easy customization
- Integrates cleanly with the popular Tailwind + shadcn/ui ecosystem
- MIT licensed and very actively starred/used in the community
Trade-offs
- Heavy reliance on Framer Motion adds bundle weight and motion that can hurt performance or accessibility if overused
- Decorative focus means limited coverage of functional/accessible app primitives
- Copy-paste distribution means no automatic upstream updates or versioning per component
- Tightly coupled to React + Tailwind; not framework-agnostic
Maturity
Popular and actively maintained with a sizable community (Discord, frequent contributions) and 20k+ stars; production-usable for marketing surfaces, though as a curated component collection rather than a stability-guaranteed framework.
Documentation
Visit https://magicui.design/docs to view the documentation.
Contributing
Visit our contributing guide to learn how to contribute. It only takes ~5 minutes to add your own!
Community
Have questions, comments or feedback? Join our discord.
Authors
Stats
Star History
License
Licensed under the MIT license.