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

@arabic_Intelligence

New entries, as they land

One channel. New tools when they are added, with the caveat included. No daily digest, no course, nothing to buy.

Join the Telegram

Free. No email required.