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.
Best for 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
Install
Add a component
pnpm dlx shadcn@latest add https://magicui.design/r/marquee.jsonWhat 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.
On the same shelf
Watermelon UI
Technical, animated landing templates installed through the shadcn CLI
Aceternity UI
Big, cinematic hero effects with the code shown in full
Motion Primitives
Small, composable animation building blocks rather than finished effects