Skip to content
aiarabicdev
Landing pages

Magic UI

A large catalogue of animated marketing components for React

Magic UI is a collection of animated components aimed squarely at marketing pages: marquees, beams, orbiting circles, text reveals and number tickers. It installs through the shadcn CLI and is built on Tailwind and Motion, so it drops into most React projects without a new styling layer.

Free tierMITTypeScriptSelf hostable

What you get

The catalogue is broad and skewed towards effects rather than structure. You will find the animated pieces that make a hero feel alive, and fewer of the plain layout blocks that hold a page together.

Because installation copies source into your repository, each component becomes yours to trim. That matters with effect components, which often ship more configuration than any single page needs.

How to use it well

Treat it as a garnish shelf rather than a page framework. One or two of these effects in a hero reads as craft, and six on the same screen reads as a demo reel.

It pairs naturally with shadcn/ui, which handles the buttons, inputs and dialogs Magic UI deliberately leaves alone.

Reach for it when

  • you have a plain page and need three moments of motion in it
  • you already use Tailwind and shadcn/ui
  • you want the effect without writing the Motion choreography yourself

Watch out for

  • the finished page templates are a paid product, the individual components are the free part
  • heavy effect components can cost real frame time on mid range phones, so measure before shipping several
  • it is a component shelf, not a design system, so the coherence of the page is still your job
NEXT TO IT ON THE SHELF

Compare with these

Machroui

Building something? Launch it on Machroui

A free board for startups in the Middle East. List yours, the community votes, and the leaderboard resets every Monday. No pay to win.

Visit Machroui

Free to list. English and Arabic.