Guide · Open source
How to use Magic UI: install, copy components and tips
Updated · written with AI from the project's own documentation and checked against our catalogue data
Magic UI is an open-source UI library of animated components and visual effects that you copy and paste into your own web app. It is aimed at design engineers and developers who build with React, Next.js, Tailwind CSS and TypeScript. This guide explains what you need before you start, how to get the source, how to add components to a project, and when the library is a poor fit.
Magic UImagicuidesign/magicui · ★ 23k · MIT Install options & downloads Quick start
- 1Check prerequisites. Confirm that Node.js, React, Next.js and Tailwind CSS are set up in your project.
- 2Clone the repository. Run git clone https://github.com/magicuidesign/magicui in your terminal to download the source.
- 3Open the docs. Visit https://magicui.design/docs to find the component you want and read how it is used.
- 4Copy the component. Copy the component code into your own app rather than installing a large package.
- 5Use it in a page. Place the component in your React or Next.js page and adjust its Tailwind CSS classes to fit your design.
What Magic UI is and who it is for
Magic UI is a collection of animated UI components and visual effects. The project describes itself as a UI library for design engineers, and it is meant to be copied into your apps rather than installed as a large dependency.
The project's topics point to React, Next.js, Tailwind CSS, TypeScript and shadcn/ui, so it fits best if you already work in that stack. It suits developers who want animated landing-page elements, and designers who write code and want ready-made motion effects.
- Good fit: React or Next.js developers building animated landing pages
- Good fit: developers already using Tailwind CSS and TypeScript
- Not a fit: beginners with no React experience, since the components assume a working React setup
- Not a fit: projects that use neither React nor Tailwind CSS
- Not a fit: anyone who needs a full app or finished product rather than building blocks
Prerequisites: what you need before you start
The source lists Node.js, React, Next.js and Tailwind CSS as the prerequisites. Set these up in a project before you try to use any component.
Because the components assume a working React setup, it helps to be comfortable with React components and props before you begin.
- Node.js
- React
- Next.js
- Tailwind CSS
Get the Magic UI source code
The README gives a clone command for the repository. Run it in the terminal to download the source to your machine.
The README does not spell out further setup steps. For details on how components are used, the README points to the external documentation at magicui.design/docs.
git clone https://github.com/magicuidesign/magicuiFind the component you need in the documentation
The README is short and links out for the details of how each component is used. Open the documentation at https://magicui.design/docs to see what is available and how each one is meant to be used.
Check the component's documentation before copying it, so you understand its props and any dependencies it expects.
- Open https://magicui.design/docs
- Pick the component or effect that fits your page
- Read its usage notes before copying the code
Copy components into your own app
Magic UI is built around copy-and-paste. You take the component code and place it in your own project, where it runs with your React, Next.js and Tailwind CSS setup.
Because you own the copied code, you can adjust it to match your design. This is the reason the project suggests copy-paste components over a heavy dependency.
- Copy the component code into your project
- Make sure your project already has React, Next.js and Tailwind CSS
- Use the component in your page like any other React component
- Adjust styling with Tailwind CSS classes to match your design
Get help and contribute
For questions, comments or feedback, the README links to a Discord community. To add your own component, the project has a contributing guide that the README says takes about five minutes.
Read the contributing guide at CONTRIBUTING.md in the repository before you submit anything.
- Community: join the Discord linked in the README
- Contributing: follow the CONTRIBUTING.md guide in the repository
What people use it for
- Animated hero sections on a React or Next.js landing page
- Motion effects for a design engineer's marketing site
- Visual accents added to a Tailwind CSS interface without writing animation code from scratch
Frequently asked questions
Is Magic UI free and open source?
Yes. The README describes Magic UI as free and open source, and the repository is licensed under the MIT license, as stated in the LICENSE.md file linked from the README.
What do I need before using Magic UI?
The source lists Node.js, React, Next.js and Tailwind CSS as prerequisites. The components assume a working React setup, so beginners with no React experience may find them hard to use.
How do I install Magic UI?
The README gives a clone command: git clone https://github.com/magicuidesign/magicui. For how each component is used, read the documentation at https://magicui.design/docs.
Does Magic UI work without Tailwind CSS or React?
The project's listed topics point to React, Next.js and Tailwind CSS, so it is built for that stack. If your project uses neither, it is not a good match based on the information in the source.
How does Magic UI compare to shadcn/ui, Aceternity UI and Framer Motion?
The source lists shadcn/ui, Aceternity UI and Framer Motion as comparable projects, but it does not compare them in detail. Check each project's documentation to see which fits your animation and styling needs.
Where can I get help with Magic UI?
The README links to a Discord community for questions, comments and feedback, and to the documentation at magicui.design/docs.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Magic UI is a good choice if you already build with React, Next.js, Tailwind CSS and TypeScript and want animated components you can copy into your own app. If you are new to React, need a complete app template, or do not use this stack, pick a different tool.
Install options & downloads