Free React component library with animated UI elements you can copy-paste into your app, built on Tailwind CSS and Framer Motion.
Mindmap
mindmap
root((Magic UI))
What it does
Animated components
Copy-paste ready
Visual effects
Tech stack
React
Tailwind CSS
Framer Motion
shadcn-ui
Use cases
Build design-forward apps
Add smooth animations
Speed up UI development
Audience
Design engineers
React developers
Frontend builders
Things people build with this
USE CASE 1
Add polished animated buttons, cards, and transitions to a React app without building from scratch.
USE CASE 2
Copy pre-built component code directly into your project and customize with Tailwind CSS.
USE CASE 3
Create visually engaging interfaces with smooth Framer Motion animations for better user experience.
USE CASE 4
Speed up frontend development by reusing production-ready animated components across projects.
Tech stack
ReactTailwind CSSFramer Motionshadcn-uiMDX
Getting it running
Difficulty · easyTime to first run · 5min
Use freely for any purpose including commercial, as long as you keep the copyright notice.
In plain English
Magic UI is a free, open-source UI component library aimed at design engineers building React applications. Based on the description and topics, it provides animated components and visual effects that developers can copy and paste directly into their apps, built on top of React, Tailwind CSS, shadcn-ui, and Framer Motion. The README does not provide further detail, but full documentation is available at magicui.design/docs.
Copy-paste prompts
Prompt 1
Show me how to add a Magic UI animated button component to my React app and customize its colors with Tailwind.
Prompt 2
I want to use Magic UI components in my Next.js project, what's the setup process and how do I import them?
Prompt 3
Help me copy a Magic UI card component and modify the animation speed using Framer Motion props.
Prompt 4
What Magic UI components would work best for a landing page hero section with smooth scroll animations?
Prompt 5
How do I integrate Magic UI with my existing shadcn-ui component library in a React project?