magicuidesign/magicui

What is it?

Key features

• 01Copy-and-paste components rather than an installed package dependency.
• 02Built with React, TypeScript, Tailwind CSS and Framer Motion.
• 03Includes animated backgrounds, buttons and text effects.
• 04Documentation site with component previews.

Use cases

• Adding animated hero sections and effects to a Next.js landing page.
• Prototyping interface motion quickly in a shadcn/ui-based project.
• Borrowing animated components as a starting point and customizing them.

Quick start

1. 1

   Visit the documentation site to browse components

2. 2

   Read the contributing guide if you want to add a component

Things to know

• !The README contains no install command; components are copied into your project rather than installed as a package.
• !Documentation is hosted externally at magicui.design.

Topics

FAQ

What is magicui?

A React and Tailwind CSS component library of animated UI components and effects that you copy into your Next.js or shadcn/ui apps. Magic UI is a collection of animated components and visual effects for React applications. Instead of installing a package and importing it, you copy the component source into your project and adjust it as needed, following the same model as shadcn/ui.

Is magicui free to use? What license does it have?

magicui is open source under the MIT license. Check the license terms before using it in commercial products.

Is magicui still maintained?

Actively maintained. The last commit to magicui was on Oct 17, 2026.

What can I use magicui for?

Adding animated hero sections and effects to a Next.js landing page. Prototyping interface motion quickly in a shadcn/ui-based project. Borrowing animated components as a starting point and customizing them.

How do I install magicui?

Visit the documentation site to browse components Read the contributing guide if you want to add a component

Where can I get magicui?

The source code and installation instructions are on GitHub: https://github.com/magicuidesign/magicui