# Magic UI — Animated React Components for Design Engineers

> Magic UI is a free open-source collection of animated React components built with Tailwind CSS, Framer Motion, and shadcn/ui conventions that you copy and paste into your projects.

## Install

Save in your project root:

# Magic UI — Animated React Components for Design Engineers

## Quick Use
```bash
npx shadcn@latest add "https://magicui.design/r/marquee"
```
Then use in your component:
```tsx
import { Marquee } from "@/components/magicui/marquee"
<Marquee pauseOnHover>{items}</Marquee>
```

## Introduction
Magic UI is a collection of animated, copy-paste UI components for React and Next.js. Built on Tailwind CSS and Framer Motion, it follows the shadcn/ui pattern where you own the source code rather than depending on a package, giving full control over customization and bundle size.

## What Magic UI Does
- Provides 50+ animated components: marquees, text animations, backgrounds, cards, and effects
- Uses the shadcn/ui CLI pattern for adding components directly into your project
- Ships source code you own, not an npm dependency to manage
- Offers landing page sections and templates ready for marketing sites
- Supports both light and dark mode with Tailwind CSS class variants

## Architecture Overview
Each Magic UI component is a standalone React file using Tailwind CSS for styling and Framer Motion for animations. Components are published to a registry that the shadcn CLI can resolve. When you add a component, the CLI copies the source files into your project's components directory along with any required utilities. There is no runtime library to import.

## Self-Hosting & Configuration
- Requires a React/Next.js project with Tailwind CSS and Framer Motion installed
- Add components via `npx shadcn@latest add "https://magicui.design/r/<name>"`
- Components land in your `components/magicui/` directory as editable source files
- Customize animations by editing Framer Motion props directly in the component
- Works with any Tailwind theme configuration you already have

## Key Features
- Copy-paste model means zero dependency overhead and full code ownership
- Animated text components include typewriter, blur-in, gradual-spacing, and word-rotate
- Background effects like dot pattern, grid pattern, ripple, and particles
- Marquee, dock, globe, and bento grid components for landing page layouts
- Built-in dark mode support through Tailwind's `dark:` variant classes

## Comparison with Similar Tools
- **shadcn/ui** — Foundation Magic UI builds on; shadcn focuses on core UI primitives, Magic UI adds animated effects
- **Aceternity UI** — Similar animated component approach; Magic UI follows shadcn CLI conventions more closely
- **Framer Motion** — The animation engine Magic UI uses; Magic UI provides pre-composed components
- **Radix UI** — Headless accessible primitives; Magic UI focuses on visual effects and animations
- **Chakra UI** — Full design system with runtime CSS-in-JS; Magic UI is static Tailwind with motion

## FAQ
**Q: Is Magic UI free?**
A: Yes. All components are MIT-licensed and free to use in personal and commercial projects.

**Q: Do I need shadcn/ui installed first?**
A: A shadcn/ui setup (Tailwind + the CLI) is recommended since Magic UI uses the same registry and conventions.

**Q: Does Magic UI work with plain React (not Next.js)?**
A: Yes. Any React project with Tailwind CSS and Framer Motion can use Magic UI components.

**Q: How do I update a component after copying it?**
A: Since you own the source, re-run the CLI add command to overwrite, or manually merge changes from the Magic UI docs.

## Sources
- https://github.com/magicuidesign/magicui
- https://magicui.design

---
Source: https://tokrepo.com/en/workflows/asset-ca9d165d
Author: AI Open Source