Magic UI — Animated React Components for Design Engineers

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