Skip to main content
Magic UI is a collection of re-usable components that you can copy and paste into your web apps.
Magic UI is a curated collection of animated React components designed specifically for creating landing pages and user-facing marketing materials. Built on top of shadcn/ui, it provides beautiful, performant components that establish trust and professionalism.

​
Why Magic UI?

Copy and paste

No package installation required. Copy components directly into your project and customize them to your needs.

Animated by default

Every component features smooth, professional animations powered by Framer Motion.

Built on standards

Uses shadcn/ui conventions and Next.js best practices. Fully typed with TypeScript.

Production ready

Battle-tested components used by thousands of developers in production applications.

​
Design philosophy

Good design contributes significant value to software. It’s one of the main methods of establishing trust between you and an internet stranger. Trust is important for internet businesses because it is the first thing a visitor evaluates before pulling out their credit card and becoming a customer. Some questions visitors might ask themselves:
  • “Is this company legit?”
  • “Who else is using it?”
  • “Can I trust them with my personal data?”
Poor design reflects poorly on your team. It comes off as lazy, unfinished, and unstable. It shows that the team doesn’t care about user experience. Good design indicates that the team behind has their shit together. I can probably expect good things from them in the future. It makes me think “if they care so much about these tiny details, they must care a lot about other things in the company, including their customers!”. A great example of this in play is linear.app landing page which I first came across in 2020. I didn’t even need to try the product but I already knew that it must be good.

​
Quick start

Installation

Set up your project with shadcn CLI and start adding components

Components

Browse 50+ animated components for your landing pages

MCP Integration

Connect Magic UI to your AI-assisted IDE for faster development

​
What’s included

Magic UI features components, blocks, and templates geared towards creating landing pages and user-facing marketing materials:
  • Text animations: Blur fade, hyper text, typing animation, word rotate, and more
  • Visual effects: Particles, meteors, ripple, aurora, grid patterns, and backgrounds
  • Interactive elements: Marquee, dock, safari browser, iPhone mockup, globe
  • Buttons: Shimmer, rainbow, pulsating, shiny, and interactive hover buttons
  • Cards and layouts: Bento grid, magic card, neon gradient card

​
Inspiration

This library is heavily inspired by shadcn/ui and follows the same philosophy of providing high-quality, customizable components that you own.

Build docs developers (and LLMs) love

Get started for freeTalk to us