# Magic UI

> A large catalogue of animated marketing components for React

Category: Landing page templates (https://aiarabicdev.com/landing-pages)
Canonical page: https://aiarabicdev.com/landing-pages/magic-ui
Tags: animation, shadcn, motion, marketing, 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.

## Facts

- Licence: MIT
- Language: TypeScript
- Cost: Free core, paid tiers exist
- Self hostable: yes
- Added: 2026-08-23
- Last checked: 2026-08-23

## Links

- Website: https://magicui.design
- Source: https://github.com/magicuidesign/magicui

## 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

## Get started

Add a component:

```sh
pnpm dlx shadcn@latest add https://magicui.design/r/marquee.json
```

---

aiarabicdev is a free directory of open source tools. No affiliate links, no sponsored placements.
New entries are announced at https://t.me/arabic_Intelligence