React Magic UI

74 free and open-source animated components for React — built with TypeScript, Tailwind CSS v4 and Motion. Copy them into your app with one command, or install the package from npm.

Documentation & live demos →

Using Vue? The same catalogue — same names, same props — is available as Vue Magic UI.

Why

• Own the code. Like shadcn/ui, components are copied into your project, so you can change anything.
• One command. shadcn add drops in the source, installs npm dependencies and adds the keyframes to your CSS.
• Next.js ready. Client components carry "use client"; random values are generated after mount, so server and client renders match.
• Themed by default. Components use the shadcn colour tokens and work in light and dark mode.
• Accessible motion. Looping animations respect prefers-reduced-motion; split text stays readable by screen readers.

Install a component (recommended)

You need a React 18/19 project with Tailwind CSS v4 and shadcn/ui initialised. Then:

npx shadcn@latest add https://yousefkadah.github.io/react-animation-library/r/marquee.json

import { Marquee } from "@/components/ui/marquee"

export function Logos() {
  return (
    <Marquee pauseOnHover>
      <span>React</span>
      <span>Next.js</span>
      <span>Vite</span>
    </Marquee>
  )
}

Add the registry once to components.json and use short names:

{
  "registries": {
    "@magic-react": "https://yousefkadah.github.io/react-animation-library/r/{name}.json"
  }
}

npx shadcn@latest add @magic-react/border-beam @magic-react/number-ticker

Or install from npm

npm install @yousefkadah/react-magic-ui

/* app/globals.css */
@import "tailwindcss";
@import "@yousefkadah/react-magic-ui/theme.css";
@source "../node_modules/@yousefkadah/react-magic-ui/dist";

import { BorderBeam, Marquee, NumberTicker } from "@yousefkadah/react-magic-ui"

Components

Components — Animated Circular Progress Bar · Animated List · Avatar Circles · Bento Grid · Code Comparison · Dock · Dotted Map · File Tree · Globe · Hero Video Dialog · Icon Cloud · Lens · Marquee · Orbiting Circles · Pointer · Progressive Blur · Scroll Progress · Smooth Cursor · Terminal

Special Effects — Animated Beam · Backlight · Border Beam · Confetti · Cool Mode · Glare Hover · Magic Card · Meteors · Neon Gradient Card · Particles · Pixel Image · Shine Border · Theme Toggler · Warp Background

Animations — Blur Fade

Text Animations — Animated Gradient Text · Animated Shiny Text · Aurora Text · Comic Text · Dia Text Reveal · Highlighter · Hyper Text · Kinetic Text · Line Shadow Text · Morphing Text · Number Ticker · Scroll Based Velocity · Sparkles Text · Spinning Text · Text 3D Flip · Text Animate · Text Reveal · Typing Animation · Video Text · Word Rotate

Buttons — Interactive Hover Button · Pulsating Button · Rainbow Button · Ripple Button · Shimmer Button · Shiny Button

Backgrounds — Animated Grid Pattern · Dot Pattern · Flickering Grid · Grid Pattern · Hexagon Pattern · Interactive Grid Pattern · Light Rays · Noise Texture · Retro Grid · Ripple · Striped Pattern

Device Mocks — Android · Safari · iPhone

Development

npm install
npm run dev        # docs site at http://localhost:5174
npm test           # renders every example and fails on any React error or warning
npm run build      # registry JSON + docs site + npm package

Adding a component? Read CONTRIBUTING.md.

Credits

Component designs and APIs follow Magic UI by the Magic UI team (MIT). See THIRD_PARTY_NOTICES.md.

License

MIT © Yousef Kadah